Layui方法渲染数据表格

开发工具与关键技术： MVC
撰写时间：2021/5/18

Layui框架作为我们日常常用的框架，其中的数据表格因其便捷也被我们广泛应用。

1.首先引入layui文件是必不可缺的，在视图层代码内分别引入layui.css以及layui.js
注意：由于框架的js是依赖于jquery的，所以引入layui.js之前需要引入jquery库，如下图

2.确定放置表格的位置，在页面表格位置处添加

，table中自定义好id，方便之后通过table.render()方法指定该容器。

3.layui数据表格有三种初始化渲染方式，分别是js方法渲染、自动渲染，转换静态表格，推荐采用js方法渲染，因为随项目数据更改，js方法渲染的效率更高，更便捷。采用js方法渲染表格如下图所示，在页面加载时：
（1）初始化layui模块我们使用数据表格，则在use处放上‘table’，layui.use(‘table’,function(){});
（2）将layui.table赋值给layuiTable，便于后面使用。使用render（）方法开始渲染表格。
（3）render（）方法内规定要使用的参数，平常使用多个参数需要使用{}括起来，常用的有：
elem：“表格id”//这个属性指定渲染到哪个表格，通常使用id值来找到表格
url：‘异步数据接口’，//获取表格数据的路径
cols：[[
{ title：‘表头名称’，type：‘设定列的类型’，fieId：‘此列对应数据名’，templet：自定义列函数名（函数return什么它就输出什么），rowspan/colspan：所占行数/列数 …}
]]， //cols用于设置表头，基本值是二维数组,其它参数可到layui官网查看参数一览表
page：查询出的数据是(true)否(false)分页处理，也可自定义{
limit:刚开始每页显示数据的条数，
limits:值是一个数组，设置可选择每页显示的条数，
curr：决定刚开始加载从哪一页开始显示
}
data：[] //值为数组类型，用于直接赋值数据
还有很多详细的属性可以到layui官网查看基本参数一览表

4.通常我们使用时会遇到条件动态筛选数据的问题，这里我们就需要搭配layui表格重载来实现这个筛选数据的效果。
（1）有条件动态筛选的话，渲染表格时可以不设定数据获取的地址建立出一个空表格，使用第一次数据重载来加载页面初始化数据，动态筛选时再调用一次数据重载的方法就好了

（2）数据重载的方法如下：先获取筛选数据的条件数据，使用reload（）方法进行数据重载，url:‘规定提交数据的路径’，where：{数据名：数据值（数据筛选的条件数据）}，
page：{curr：int值（规定数据重载后从第几页开始显示）}…

将筛选的条件数据传输到控制器后，查询数据时使用linq语句或者lambda表达式对数据进行筛选再返回数据即可。