Table数据表格

Table数据表格

   Table数据表格是layui框架中最核心的模板之一，它用于对表格进行一些功能和动态化数据操作，支持固定表头、固定行、固定列，支持多级表头，支持单元格的自定义模板，支持对表格重载等一系列功能。

   三种初始化渲染方式

1. 方法渲染：用JS方法的配置完成渲染，无需写过多的HTML，在JS中指定原始元素，再设定各项参数
2. 自动渲染：HTML配置，自动渲染，无需写过多的JS，可专注于HTML表头部分
3. 转换静态表格：转化一段已有的表格数据，无需配置数据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开始，该参数也可以自动从<table id=”text”></table>中的id参数中获取

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，包含接口返回的所有字段和数据。如下所示：