渲染表格

冷不防 2022-02-04 11:57 366阅读 0赞

## 渲染表格 ##

下面我们要做的是查询数据、渲染表格。（开发工具：Visual Studio 2015）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0ODc3MA_size_16_color_FFFFFF_t_70]  
layui.use(\[‘table’, ‘layer’\], function ()它的作用是进行模块加载。  
在TabAcademe = layuiTable.render(\{ \});中设置配置项。  
elme：’ ’ 对应的值是表格ID，指定原始 table 容器的选择器或 DOM  
url对应的是数据路径，异步数据接口相关参数。其中 url 参数为必填项。  
cols: \[\[ \]\] 设置表头,配置项的值是数组，值是一个二维数组。方法渲染方式必填。  
title用于设置标题名称，field用于设置数据，设定字段名。字段名的设定非常重要，且是表格数据列的唯一标识。  
type设置列的类型。  
![在这里插入图片描述][20190507173251705.png]  
\{ title: ‘选择’, type: ‘radio’ \}，\{ title: ‘序号’, type: ‘numbers’ \},  
在这里设置的选择列要用到单选框，所以要在type中设置radio；序号列用需要用到数字序号，所以要在type中设置numbers。  
\{ title: ‘学院名称’, field: ‘AcademeName’, align: ‘center’ \},  
\{ title: ‘学院代号’, field: ‘AcademeCode’, align: ‘center’ \},  
field用于设置数据，‘AcademeName’ 对应的是数据库当中的学院名称，'AcademeCode’对应的是数据库当中的学院代号。  
align用于设置列的位置。  
![在这里插入图片描述][20190507173306864.png]  
\{ title: ‘操作’, templet: setOption, align: ‘center’ \}它所设置的是操作列的修改和删除选项，css部分是调用插件layui.css。templet 自定义列模板，模板遵循 laytpl 语法。这是一个非常实用的功能，你可借助它实现逻辑处理，以及将原始数据转化成其它格式，如时间戳转化为日期字符等  
![在这里插入图片描述][20190507173322508.png]  
page: \{  
limit: 5,  
limits:\[5,9,10\]  
\}  
Page用于设置分页，默认显示10条数据，limit用于设置默认数据条数，limits 每页条数的选择项，默认：\[10,20,30,40,50,60,70,80,90\]。  
优先级低于 page 参数中的 limits 参数。  
![在这里插入图片描述][20190507173338791.png]  
（注：以上代码图片来源于授课老师！！！仅供参考，感谢支持！）

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0ODc3MA_size_16_color_FFFFFF_t_70]: /images/20220204/dd2b014e23c44459aa67b2bccbd081e5.png
[20190507173251705.png]: /images/20220204/65a5b39cf796428a88daa98b3749ac2a.png
[20190507173306864.png]: /images/20220204/b667a449bfe3417da0c0d941fd5a41d0.png
[20190507173322508.png]: /images/20220204/3fe7109baaea4555817f727550eafba3.png
[20190507173338791.png]: /images/20220204/3ad3c044be6e4e4b8bcce731a387fd28.png