layui数据表格加载、layui table 加载数据

2024-10-22 0 353

Image

layui数据表格加载、layui table 加载数据

在现代Web开发中,数据表格是展示数据的重要方式之一。Layui 是一个流行的前端UI框架,提供了丰富的组件,其中 layui table 组件用于创建和管理数据表格。本文将详细介绍如何使用 Layui 加载数据到表格中,并提供多种实现思路。

解决方案概述

本文将介绍两种常见的方法来加载数据到 Layui 表格中:

  1. 静态数据加载:直接在页面中定义数据,通过 JavaScript 将数据传递给表格。
  2. 动态数据加载:从服务器端获取数据,通过 AJAX 请求将数据加载到表格中。

静态数据加载

HTML 结构

首先,我们需要在 HTML 中定义一个表格容器:

html
</p>



  
  <title>Layui Table 静态数据加载示例</title>
  


  <table id="demo"></table>

  



<p>

JavaScript 代码

接下来,我们使用 JavaScript 初始化表格并加载静态数据:

html</p>


layui.use(['table'], function(){
  var table = layui.table;

  // 定义静态数据
  var data = [
    {id: 1, name: '张三', age: 28, city: '北京'},
    {id: 2, name: '李四', age: 24, city: '上海'},
    {id: 3, name: '王五', age: 30, city: '广州'}
  ];

  // 渲染表格
  table.render({
    elem: '#demo',
    cols: [[
      {field: 'id', title: 'ID', width: 80},
      {field: 'name', title: '姓名', width: 120},
      {field: 'age', title: '年龄', width: 100},
      {field: 'city', title: '城市', width: 150}
    ]],
    data: data,
    page: true // 开启分页
  });
});


<p>

动态数据加载

HTML 结构

动态数据加载的 HTML 结构与静态数据加载类似,只需确保有一个表格容器:

html
</p>



  
  <title>Layui Table 动态数据加载示例</title>
  


  <table id="dynamicTable"></table>

  



<p>

JavaScript 代码

接下来,我们使用 AJAX 请求从服务器获取数据,并将其加载到表格中:

html</p>


layui.use(['table', 'jquery'], function(){
  var table = layui.table;
  var $ = layui.jquery;

  // 渲染表格
  table.render({
    elem: '#dynamicTable',
    url: '/api/data', // 假设这是你的 API 地址
    method: 'get',
    cols: [[
      {field: 'id', title: 'ID', width: 80},
      {field: 'name', title: '姓名', width: 120},
      {field: 'age', title: '年龄', width: 100},
      {field: 'city', title: '城市', width: 150}
    ]],
    page: true // 开启分页
  });

  // 监听工具条事件
  table.on('tool(test)', function(obj){
    var data = obj.data;
    if(obj.event === 'detail'){
      layer.msg('ID:'+ data.id + ' 的查看操作');
    } else if(obj.event === 'del'){
      layer.confirm('真的删除行么', function(index){
        obj.del();
        layer.close(index);
      });
    } else if(obj.event === 'edit'){
      layer.prompt({title: '编辑 ID 为 '+ data.id +' 的姓名', value: data.name}, function(value, index){
        obj.update({
          name: value
        });
        layer.close(index);
      });
    }
  });
});


<p>

服务器端代码示例(Node.js)

假设你使用 Node.js 作为后端,以下是一个简单的示例:

javascript
const express = require('express');
const app = express();</p>

<p>app.get('/api/data', (req, res) => {
  const data = [
    {id: 1, name: '张三', age: 28, city: '北京'},
    {id: 2, name: '李四', age: 24, city: '上海'},
    {id: 3, name: '王五', age: 30, city: '广州'}
  ];
  res.json(data);
});</p>

<p>app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

总结

通过以上两种方法,你可以轻松地在 Layui 表格中加载数据。静态数据加载适用于数据量较小且固定的情况,而动态数据加载则适用于数据量较大或需要实时更新的场景。希望本文对你有所帮助!

1. 本站所有资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!cheeksyu@vip.qq.com
2. 本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用!如有链接无法下载、失效或广告,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或教程,您可以投稿发布,成功分享后有积分奖励和额外收入!
5.严禁将资源用于任何违法犯罪行为,不得违反国家法律,否则责任自负,一切法律责任与本站无关

源码下载