layui数据表格

约定不等于承诺〃 2021-06-24 16:11 723阅读 0赞

## 快速使用 ##

创建一个table实例最简单的方式是，在页面放置一个元素 `<table id="demo"></table>`，然后通过 table.render() 方法指定该容器，示例代码如下：

<!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <title>table模块快速使用</title>
      <link rel="stylesheet" href="/layui/css/layui.css" media="all">
    </head>
    <body>
     
    <table id="demo" lay-filter="test"></table>
     
    <script src="/layui/layui.js"></script>
    <script>
    layui.use('table', function(){
      var table = layui.table;
      
      //第一个实例
      table.render({
        elem: '#demo'
        ,height: 312
        ,url: '/demo/table/user/' //数据接口
        ,page: true //开启分页
        ,cols: [[ //表头
          {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
          ,{field: 'username', title: '用户名', width:80}
          ,{field: 'sex', title: '性别', width:80, sort: true}
          ,{field: 'city', title: '城市', width:80} 
          ,{field: 'sign', title: '签名', width: 177}
          ,{field: 'experience', title: '积分', width: 80, sort: true}
          ,{field: 'score', title: '评分', width: 80, sort: true}
          ,{field: 'classify', title: '职业', width: 80}
          ,{field: 'wealth', title: '财富', width: 135, sort: true}
        ]]
      });
      
    });
    </script>
    </body>
    </html>

## 三种初始化渲染方式 ##

**方法渲染**  
这是“自动化渲染”的手动模式，本质与“自动化渲染”类似，只是“方法级渲染”将基础参数的设定放在了JS代码中，且原始的 table 标签只需要一个 选择器：  
HTML

JavaScript

var table = layui.table;
     
    //执行渲染
    table.render({
      elem: '#demo' //指定原始表格元素选择器（推荐id选择器）
      ,height: 315 //容器高度
      ,cols: [{}] //设置表头
      //,…… //更多参数参考右侧目录：基本参数选项
    });

官方推荐采用“方法级渲染”的做法，其最大的优势在于你可以脱离HTML文件，而专注于JS本身。尤其对于项目的频繁改动及发布，其便捷性会体现得更为明显。  
table.render()方法返回一个对象：var tableIns = table.render(options)，可用于对当前表格进行“重载”等操作。  
**自动渲染**  
所谓的自动渲染，其实就是在一段 table 容器中配置好相应的参数，由 table 模块内部自动对其完成渲染，而无需你写初始的渲染方法。其特点在上文也有阐述。你需要关注的是以下三点：

1.  带有 class=“layui-table” 的 `<table>` 标签。
2.  对标签设置属性 lay-data="" 用于配置一些基础参数
3.  在 标签中设置属性lay-data=""用于配置表头信息

按照上述的规范写好table原始容器后，只要你加载了layui 的 table 模块，就会自动对其建立动态的数据表格。示例代码如下：

**转换静态表格**  
假设页面上已经存在了一段有内容的表格，它由原始的table标签组成，这时如果需要赋予它一些动态元素，比如拖拽调整列宽、排序等等，那么同样可以很轻松地去实现。尝试在你的静态表格的 th 标签中加上 lay-data="" 属性，示例代码如下：

<table lay-filter="demo">
      <thead>
        <tr>
          <th lay-data="{field:'username', width:100}">昵称</th>
          <th lay-data="{field:'experience', width:80, sort:true}">积分</th>
          <th lay-data="{field:'sign'}">签名</th>
        </tr> 
      </thead>
      <tbody>
        <tr>
          <td>贤心1</td>
          <td>66</td>
          <td>人生就像是一场修行a</td>
        </tr>
        <tr>
          <td>贤心2</td>
          <td>88</td>
          <td>人生就像是一场修行b</td>
        </tr>
        <tr>
          <td>贤心3</td>
          <td>33</td>
          <td>人生就像是一场修行c</td>
        </tr>
      </tbody>
    </table>

然后执行用于转换表格的JS方法，目标便达成了。示例代码如下：

var table = layui.table;
     
    //转换静态表格
    table.init('demo', {
      height: 315 //设置高度
      ,limit: 10 //注意：请务必确保 limit 参数（默认：10）是与你服务端限定的数据条数一致
      //支持所有基础参数
    });