表格初始化的写法

开发工具与关键技术:vs asp.net mvc
作者:邹志深
撰写时间:2019.4.16
首先要在视图那里新建一个表单如下图把他们的表头表身都一一设计写出来形成一张表达然后写表格的初始化如下图:
表格初始化的写法
上图就是页面加载的的写法,先声明全局变量layer、layuiTable和初始化的表名 然后建加载插件,其中layui.use中括号里就是加载插件的元素,然后创建一个方法这个方法里面分别给layer和layuiTable赋值,赋值之后就是初始化表格,图中的tabStudent就是初始化表格的表单名,elem:这里放的是表单的id; url:这里写的代码是控制器那边根据图中要显示出来的数据,close:从这里开始是设计表单的,type;这里写的代码是表头代码,field:这里写的是表身的数据在这里面你可以设计它们的文本长度和显示位置,title:是表尾,你可以在这里给表单的每行最后那里都设计按钮,不过要在下面写一个方法来拼接按钮如下面的例子是拼接修改和删除的按钮的:
function setOperate(data) {
var employeeId = data.EmployeeID; //注意:这里的EmployeeID必须是数据库中所对应的id
var btn = “”;
btn += ‘修改’; //class里面是设计按钮的样式的
btn += ‘删除’;
return btn;
}
这样按钮就设计完成了。而page:里面是设计表的显示条数和分多少页,如图中的limit:10,就是每页显示10条数据的意思而图中的limits则是设计每页显示多少条数据的意思。打完上面的代码就把一个表单的模型给建好了那么接下来就是在控制器那边写查询表单的数据,如下图就是控制器中的代码:表格初始化的写法

在控制器那边要建一个类来查询员工信息如上图建了一个名字为allData的类来查询员工信息;括号里是引用分页查询的插件;到了查询列表了图中的List< EmployeeVo >这里的EmployeeVo是要新建一个类来装表单数据的而EmployeeVo就是继承了图中的员工表的数据然后把你要查的数据而且是员工表里没有的数据写上去就可以了;接下来就是根据表单的id来连表查询把上面初始化表格的数据所在的表单都连起来查询,然后给新建的类EmployeeVo里面的数据全都赋值也就是把你查出来的数据都赋值给EmployeeVo,注意:你给新建类赋值里面的数据在哪张表单的赋值时必须是写哪张表,如图中的员工姓名是在员工表里的赋值时前后要相同eg:EmployeeName = dbEmployee.EmployeeName。接下来就是计算有多少条数据,然后给表单设计分页查询。这里是给新建表单实例化做铺垫的,最后就是给你查出来的表单数据实例化了如上图中的注释实例化那里面的代码就是数据赋值。这样一个表单的实例化就可以了,他就会把你要的数据都传到页面上了。
知识点:在使用分页查询时一定要使用排序,也就是上图的orderby是排序的意思。