数据表格

在项目中要把内容展示给用户，离不开数据表格的设计。首先引入layui插件，如下是引用插件layui设计数据表格的关键代码。
layui.use([‘layer’, ‘table’], function () {
layer = layui.layer;
layuiTable = layui.table; });

url: “/SystemManagement/CollegeInfor/SelectAcademeAll”

layui配合url来实现跳转的路径，url紧跟控制器及查询数据的名称。专业的说法就是数据接口，数据从这地方来。默认会自动传递两个参数：？page=1&limit=30，该参数可以通过request自定义。
Page代表当前页面，代表每页数据量就是limit。可以通过这两个参数设计自己想要的效果，非常简单。

设计数据表格查询出数据后一定要记得封装数据，不然就无法加载出来。同时还要分页。在使用Skip和Take前必须要使用oderby，如下是实现的代码：
List dbEmployee = listEmployee
.Skip(layuiTablePage.GetStartIndex())
.Take(layuiTablePage.limit)
.ToList();

通过new一个对象来装封装的数据，count和data里面的数据必不可少。
LayuiTableData layuiTableData = new LayuiTableData
{
count = totalRow,
data = dbEmployee
};

前面已经引入layui插件到项目里，声明变量保存layui以便全局使用。下面的cols加载的是表头，page是实现分页以及设定自己喜欢的效果。单选框列,fixed:‘left’ 将列固定在左边。序号列title设定标题名称。hide这列是是隐藏效果的。到这里数据表格已经可以加载出来了。

在数据表格里有时也会用到监听事件，大家可以了解一下。
单击事件是row，双击事件为是rowDouble。
事件代码如下： layuiTable.on(‘row(tabAcademe)’, function (obj)
{

这里写代码

}
声明变量获取点击行数据：
var data = obj.data;
标注选中样式代码：
obj.tr.addClass(‘layui-table- click’).siblings(). removeClass(‘layui-table-click’);
单击选中单选框写法：
obj.tr.find(‘div.layui-unselect.layui-form-radio’)[1].click();
单击选中/取消复选框写法：
obj.tr.find(‘div.layui-unselect.layui-form- checkbox’)[0].click();