表格数据的重载

开发工具与关键技术：VS+数据重载
作者： 李伙
撰写时间： 2019年5月25日

在学习MVC过程中，为了能够直观地看到我们想要的数据，我们都会用到layui中的数据表格来装在数据库中查询到的数据，即在数据库中查询到的数据放入一个表格中，创建一个表格需要用到table标签。因为查询出来的数据会比较多，而我们想要某条数据时就会显得数据冗余，在众多数据中很难找到我们想要的数据，所以我们就会用到多条件查询，多条件查询能够筛选出我们需要的数据，这样可以大大减少我们的时间，而多条件查询则需要用到表格数据的重载，不然的话，就算写了多条件查询的代码也无法实现功能的，接下来就讲讲如何实现表格数据的重载。
实现表格数据的重载之前需要先创建一个表格来装数据库查询到的数据，代码如下：

如上图所示：因为这个数据表格用到了layui插件，因此在使用前要先引用layui插件里面的css文件以及js文件，然后在“$(function(){});”里面加载和初始化layui模块，否则会报错。加载和初始化layui模块前要先定义一个全局变量，定义一个全局变量能够方便我们写多条件查询的方法。加载和初始化layui模块后就初始化表格，上图中的“tabStudent”是table标签里的id名，这可以随便命名，只需要保持一致即可。elem表示指定原始table容器的选择器或DOM，一般我们都是用id选择器来选中指定的table容器；url表示异步数据接口；cols表示设置表头。type表示设定列类型，可选值有：normal（常规列，无需设定），checkbox（复选框列），radio（单选框列），numbers（序号列），space（空列）。fixed表示固定列，这里为固定在左边。title表示设定标题名称。hide表示隐藏列。Field表示设定字段名，字段名的设定非常重要，且是表格数据列的唯一标识，这里的字段名一定要与数据库中的字段名保持一致，否则查不出数据；page表示开启分页。limit表示指定每页显示的条数。limits表示每页条数的选择项，这里可以自己定义每页条数的选择项；data表示直接赋值数据，既适用于只展示一页数据，也非常适用于对一段已知数据进行多页展示，这里因为用到多条件查询，所以一开始先给它为空；toolbar表示开启表格头部工具栏区域。创建好表格后就是多条件查询的方法了，先看看代码：

如上图所示：先获取查询条件，然后进行判断，然后就到表格数据的重载了，表格数据的重载有两种方法，第一种是自动化渲染，第二种是方法级渲染的重载。自动化渲染的格式为“id=layuiTable.render(“id名”,{});”，url表示异步数据接口，因为多条件查询时在初始化表格时不需要写url异步数据接口的，只需要在初始化表格那里加上data就可以了，加data的原因是让表格一开始的数据先为空。where里面的第一个参数是上面获取到的查询条件，第二个参数是传入控制器的参数。方法级渲染的重载的格式为“id.reload({});”，它里面的参数跟自动化渲染的参数是一样的，page表示开启分页，curr表示重新从第一页开始。这样表格数据的重载功能就实现了。