渲染表格

渲染表格

下面我们要做的是查询数据、渲染表格。（开发工具：Visual Studio 2015）

layui.use([‘table’, ‘layer’], function ()它的作用是进行模块加载。
在TabAcademe = layuiTable.render({ });中设置配置项。
elme：’ ’ 对应的值是表格ID，指定原始 table 容器的选择器或 DOM
url对应的是数据路径，异步数据接口相关参数。其中 url 参数为必填项。
cols: [[ ]] 设置表头,配置项的值是数组，值是一个二维数组。方法渲染方式必填。
title用于设置标题名称，field用于设置数据，设定字段名。字段名的设定非常重要，且是表格数据列的唯一标识。
type设置列的类型。

{ title: ‘选择’, type: ‘radio’ }，{ title: ‘序号’, type: ‘numbers’ },
在这里设置的选择列要用到单选框，所以要在type中设置radio；序号列用需要用到数字序号，所以要在type中设置numbers。
{ title: ‘学院名称’, field: ‘AcademeName’, align: ‘center’ },
{ title: ‘学院代号’, field: ‘AcademeCode’, align: ‘center’ },
field用于设置数据，‘AcademeName’ 对应的是数据库当中的学院名称，'AcademeCode’对应的是数据库当中的学院代号。
align用于设置列的位置。

{ title: ‘操作’, templet: setOption, align: ‘center’ }它所设置的是操作列的修改和删除选项，css部分是调用插件layui.css。templet 自定义列模板，模板遵循 laytpl 语法。这是一个非常实用的功能，你可借助它实现逻辑处理，以及将原始数据转化成其它格式，如时间戳转化为日期字符等

page: {
limit: 5,
limits:[5,9,10]
}
Page用于设置分页，默认显示10条数据，limit用于设置默认数据条数，limits 每页条数的选择项，默认：[10,20,30,40,50,60,70,80,90]。
优先级低于 page 参数中的 limits 参数。

（注：以上代码图片来源于授课老师！！！仅供参考，感谢支持！）