初始化表格layui模块

开发工具与关键技术：Visual Studio 2015
作者：杨镇虹
撰写时间：2019

一、 页面初始化表格模块
1、首先声明这两个变量
○1获取到这表格给的id元素(tabEmployee) var tabEmployee;
○2声明一下初始化表格layui的模块 var layer, layuiTable;//layui模块

图1
2、加载&&初始化layui模块
layui.use([‘layer’, ‘table’], function () {
layer = layui.layer,
layuiTable = layui.table;
});
3、初始化员工信息表
拿到要初始化的这个员工tabEmployee表格 表格模块layuiTable
tabEmployee = layuiTable.render({
选择到html的元素
elem: ‘#tabEmployee’,
//url路径 接收到控制器给的路径
url: “/yangzhu/yangzhun/selectEmployeeAll”,
cols: [[//表头 左left浮动 宽度width align:”center”居中
{ type: “checkbox”, fixed: “left” },
{ type: “numbers”, title: “序号” },
{ field: “EmployeeID”, title: “EmployeeID”, hide: true }, //隐藏的员工ID(EmployeeID)
{ field: “UserID”, title: “UserID”, hide: true },//隐藏用户ID
{ field: “EmployeeNumber”, title: “编号”, width: 70, align: “center” },//员工编号
{ field: “EmployeeName”, title: “姓名”, width: 100, align: “center” },//员工姓名名称
{ field: “Phone”, title: “电话”, align: “center” },//电话
{ field: “Cellphone”, title: “手机”, align: “center” },//手机
{ field: “DepartmentName”, title: “部门”, align: “center” },//部部名称
{ field: “PositionName”, title: “职位”, align: “center” },//职位名称
{ field: “Address”, title: “地址”, align: “center” },//地址
{ field: “Remark”, title: “备注”, align: “center” },//备注
]],

图2（表格头）
page: {//页数
limit: 10,//指定每页显示的条数
limits: [5, 10, 15, 20, 25, 30, 35, 40, 45, 50],//每页条数的选择项
},
data:[],
toolbar: “#tabEmployeeToolbar” //html表格头部传过来的元素
});
//监听行单击事件 点击到这个模块layuiTable 的row行的员工表格tabEmployee
layuiTable.on(‘row(tabEmployee)’, function (obj) {
console.log(obj);控制台输出
//标注选中行样式
obj.tr.addClass(“layui-table-click”).siblings().removeClass(“layui-table-click”);
//选中行，勾选复选框
obj.tr.find(“div.layui-unselect.layui-form-checkbox”)[1].click();
});
二、 初始化表格的控制器的路径selectEmployeeAll
首先给这个表格数据初始化查询所要查询的员工表selectEmployeeAll 实体类里面的一个(LayuiTablePage) layui table组件分页请求数据封装
public ActionResult selectEmployeeAll(LayuiTablePage layuiTablePage)
{ List列 实体类的一个类EmployeeVo 自己给的一个局部变量listEmployee 要查到数据库myModels的员工表PW_Employee 这个实体类封装的数据List图3

图3
List listEmployee = (from tbEmployee in myModels.PW_Employee
还要查询到数据库myModels的SYS_Department部门表的数据 连到tbEmpl0oyee这个员工表里面的部门ID(DepartmentID) 还有tbDepartment部门里面的部门ID(DepartmentID)
join tbDepartment in myModels.SYS_Department on tbEmployee.DepartmentID equals tbDepartment.DepartmentID
join 职位变量tbPosition in 查询到数据库myModels里面的职位表SYS_Position on 连到这个局部变量tbEmpl0oyee员工表里面的职位ID(PositionID) equals 还有这个职位变量tbPosition的职位表的职位ID(PositionID)
join tbPosition in myModels.SYS_Position on tbEmployee.PositionID equals tbPosition.PositionID
join 用户变量tbUser in 查询到数据库myModels里面的职位表PW_User on 连到这个局部变量tbEmpl0oyee员工表里面的用户ID(UserID) equals 还有这个用户变量tbUser的用户表的用户ID(UserID)
join tbUser in myModels.PW_User on tbEmployee.UserID equals tbUser.UserID
orderby排序 descending根据键按降序对序列的元素排序
orderby tbEmployee.EmployeeID descending
查询select到实体类EmployeeVo里面的数据
select new EmployeeVo
{获取查询到初始化员工表的所有信息数据(tbEmployee) 部门表(tbDepartment) 用户表(tbUser)的数据
EmployeeID = tbEmployee.EmployeeID,// 员工表tbEmployee的员工ID(EmployeeID)
UserID = tbUser.UserID,// 用户表(tbUser)的用户ID(UserID)
EmployeeName = tbEmployee.EmployeeName,//员工表的员工姓名(EmployeeName)
EmployeeNumber = tbEmployee.EmployeeNumber,//员工表的员工编号(EmployeeNumber)
Phone = tbEmployee.Phone,// 员工表的电话(Phone)
Cellphone = tbEmployee.Cellphone,//员工表的手机号码(Cellphone)
Address = tbEmployee.Address,//员工表的员工地址(Address)
Remark = tbEmployee.Remark,//员工表备注(Remark)
DepartmentName = tbDepartment.DeoartmentName,//部门表的部门名称(DeoartmentName)
PositionName = tbPosition.PositionName,//职位表的职位名称(PositionName)
}).ToList();//列表ToList
//计算员工的列表listEmployee数据的总条数
int totaRow = listEmployee.Count();
//分页查询 查询到这个列表封装的员工数据的一个实体类的一个类List
List dbEmployee = listEmployee
.Skip(layuiTablePage.GetStartIndex())
//从序列开头返回到这个参数layuiTablePage 每页的数据量limit
.Take(layuiTablePage.limit)
.ToList();//创建一个列表

图4
//实例化这个列表里面封装的数据layuiTableData 这个实体类图4
LayuiTableData layuiTableData = new LayuiTableData();
layuiTableData.count = totaRow;//总行数
layuiTableData.data = dbEmployee;
//返回
return Json(layuiTableData, JsonRequestBehavior.AllowGet);
}