Table数据表格
Table****数据表格
Table数据表格是layui框架中最核心的模板之一，它用于对表格进行一些功能和动态化数据操作，支持固定表头、固定行、固定列，支持多级表头，支持单元格的自定义模板，支持对表格重载等一系列功能。
三种初始化渲染方式
- 方法渲染：用JS方法的配置完成渲染，无需写过多的HTML，在JS中指定原始元素，再设定各项参数
- 自动渲染：HTML配置，自动渲染，无需写过多的JS，可专注于HTML表头部分
- 转换静态表格：转化一段已有的表格数据，无需配置数据1接口，在JS中指定表格元素，并简单地给表头加上自定义属性
基础参数
table模块所支持的全部参数，对几个常用的重点参数进行详细说明：
elem：为String/DOM类型，指定原始table容器的选择器或DOM，方法渲染方式必填
cols：为Array类型，设置表头。值是一个二维数组。方法渲染方式不必填
url：异步数据接口相关参数。url参数为必填项
data：为Array类型，直接赋值数据。既适用于只展示一页数据，也适用于对一段已知数据进行多页展示
limit：Number类型，每页显示的条数（默认为10）.值必须对应limits参数的选项。优先级低于page参数中的limit参数。
limits：Array类型，每页条数的选择项，默认：[10,20,30,40,50,60,70,80,90]。优先级低于page参数中的limits参数。
title：String类型，定义table的大标题（在文件导出等地方会用到）
id：Sring设定容器唯一id。id是对表格的数据操作方法上是必要的传递条件，它是表格容器的索引。从layui2.2.0开始，该参数也可以自动从
skin：设定表格各种外观、尺寸
templet-自定义列模板
类型：String，没有默认值
在默认情况下，单元格的内容是完全按照数据接口返回的content原样输出的
templet提供了三种使用方式：
方式一：绑定模板选择器，如下所示：
table.render({
cols: [[
{field:'title', title: '文章标题', width: 200, templet: '#titleTpl'} //这里的templet值是模板元素的选择器
,{field:'id', title:'ID', width:100}
]]
});
方式二：函数转义。自layui2.2.5开始，templet开始支持函数形式，函数返回一个参数d，包含接口返回的所有字段和数据。如下所示：
table.render({
cols: [[
{field:'title', title: '文章标题', width: 200
,templet: function(d){
return 'ID：'+ d.id +'，标题：'+ d.title +''
}
}
,{field:'id', title:'ID', width:100}
]]
});
方式三：直接赋值模板字符。事实上，templet也可以直接是一段html内容，如：
templet: '
'注意：这里一定要被一层
包裹，否则无法读取到模板表格重载
很多时候，需要对表格进行重载。比如数据全局搜索。以下方法可以轻松实现这类需求（可任选一种）。
语法：table.reload(ID,options),说明：参数ID即为基础参数id对应的值，参数options即为各项基础参数
语法：tableIns.reload(options),说明：对象tableIns来源于table.render()方法的实例，参数options即为各项基础参数
示例1：自动化渲染的重载
【HTML】
【JS】
table.reload('idTest', {
url: '/api/table/search'
,where: {} //设定异步数据接口的额外参数
//,height: 300
});
示例2：方法级渲染的重载
//所获得的 tableIns 即为当前容器的实例
var tableIns = table.render({
elem: '#id'
, cols: [] //设置表头
, url: '/api/data' //设置异步接口
, id: 'idTest'
});
//这里以搜索为例
tableIns.reload({
where: { //设定异步数据接口的额外参数，任意设
aaaaaa: 'xxx'
, bbb: 'yyy'
//…
}
, page: {
curr: 1 //重新从第 1 页开始
}
});
//上述方法等价于
table.reload('idTest', {
where: { //设定异步数据接口的额外参数，任意设
aaaaaa: 'xxx'
, bbb: 'yyy'
//…
}
, page: {
curr: 1 //重新从第 1 页开始
}
});