LayUI:数据表格文档layui.table

1、 数据表格简单实用

<table id="demo" lay-filter="test"></table>

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

2、静态表格

<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>

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

3、基础参数

4、表头参数

field(String)设定字段名。

非常重要，且是表格数据列的唯一标识

title(String) 设定标题名称

width(Number/String) 设定列宽

若不填写，则自动分配；若填写，则支持值为：数字、百分比。请结合实际情况，对不同列做不同设定。

minWidth(Number)局部定义当前常规单元格的最小宽度（默认：60）

一般用于列宽自动分配的情况。其优先级高于基础参数中的 cellMinWidth

type(String)设定列类型。可选值有：

normal（常规列，无需设定）
checkbox（复选框列）
radio（单选框列，layui 2.4.0 新增）
numbers（序号列）
space（空列）

LAY_CHECKED (Boolean)是否全选状态（默认：false）

必须复选框列开启后才有效，如果设置 true，则表示复选框默认全部选中。

fixed(String) 固定列。可选值有：left（固定在左）、right（固定在右）

一旦设定，对应的列将会被固定在左或右，不随滚动条而滚动。
注意： 如果是固定在左，该列必须放在表头最前面；如果是固定在右，该列必须放在表头最后面。

hide(Boolean)是否初始隐藏列，默认：false。layui 2.4.0 新增

totalRow(Boolean/String)

是否开启该列的自动合计功能，默认：false。
当开启时，则默认由前端自动合计当前行数据。从 layui 2.5.6 开始： 若接口直接返回了合计行数据，则优先读取接口合计行数据，格式如下：

{
  "code": 0,
  "totalRow": {
    "score": "666"
    ,"experience": "999"
  },
  "data": [{}, {}],
  "msg": "",
  "count": 1000
}

如上，在 totalRow 中返回所需统计的列字段名和值即可。
另外，totalRow 字段同样可以通过 parseData 回调来解析成为 table 组件所规定的数据格式。
从 layui 2.6.3 开始，如果 totalRow 为一个 string 类型，则可解析为合计行的动态模板，如：

totalRow: '{{ d.TOTAL_NUMS }} 单位'
//还比如只取整：'{{ parseInt(d.TOTAL_NUMS) }}'

totalRowText(String)用于显示自定义的合计文本。layui 2.4.0 新增

sort(Boolean)是否允许排序（默认：false）

如果设置 true，则在对应的表头显示排序icon，从而对列开启排序功能。
注意：不推荐对值同时存在“数字和普通字符”的列开启排序，因为会进入字典序比对。比如：'贤心' > '2' > '100'，这可能并不是你想要的结果，但字典序排列算法（ASCII码比对）就是如此

unresize(Boolean) 是否禁用拖拽列宽（默认：false）

默认情况下会根据列类型（type）来决定是否禁用，如复选框列，会自动禁用。而其它普通列，默认允许拖拽列宽，当然你也可以设置 true 来禁用该功能

edit(String) 单元格编辑类型（默认不开启）目前只支持：text（输入框）

event(String) 自定义单元格点击事件名，以便在 tool 事件中完成对该单元格的业务处理

style(String) 自定义单元格样式。即传入 CSS 样式

align(String) 单元格排列方式。可选值有：left（默认）、center（居中）、right（居右）

colspan(Number) 单元格所占列数（默认：1）。一般用于多级表头

rowspan(Number) 单元格所占行数（默认：1）。一般用于多级表头

templet(String) 自定义列模板，模板遵循 laytpl 语法。这是一个非常实用的功能，你可借助它实现逻辑处理，以及将原始数据转化成其它格式，如时间戳转化为日期字符等

toolbar(String) 绑定工具条模板。可在每行对应的列中出现一些自定义的操作性按钮

以下是二级表头例子

JS：
table.render({
  cols:  [[ //标题栏
    {field: 'username', title: '联系人', width: 80, rowspan: 2} //rowspan即纵向跨越的单元格数
    ,{field: 'amount', title: '金额', width: 80, rowspan: 2}
    ,{align: 'center', title: '地址', colspan: 3} //colspan即横跨的单元格数，这种情况下不用设置field和width
  ], [
    {field: 'province', title: '省', width: 80}
    ,{field: 'city', title: '市', width: 120}
    ,{field: 'county', title: '详细', width: 300}
  ]]
});
 
它等价于：
<table class="layui-table" lay-data="{基础参数}">
  <thead>
    <tr>
      <th lay-data="{field:'username', width:80}" rowspan="2">联系人</th>
      <th lay-data="{field:'amount', width:120}" rowspan="2">金额</th>
      <th lay-data="{align:'center'}" colspan="3">地址</th>
    </tr>
    <tr>
      <th lay-data="{field:'province', width:80}">省</th>
      <th lay-data="{field:'city', width:120}">市</th>
      <th lay-data="{field:'county', width:300}">详细</th>
    </tr>
  </thead>
</table>