Layui数据表格的构建

开发工具与关键技术：VS ；单表的linq语句
作者：刘佳明
撰写时间：2019年 4 月 14 日

（注：源代码及资料，插件来源于老师的课件！！！！）
构建数据表格的方法有很多种；为什么文章采取的封装方法是layui呢？
这么做的好处是为了避免后期在使用较为庞大数据库时，查询所得数据在数据表格中显示；layui中有一个将数据分页的方法，在这种情况下；使用layui插件构建数据表格，数据的呈现效果，实现了美观和简便；

//linq 单表查询的写法
/*
(from 自定义的表名 in Model对象.查询的表
【where 自定义的表名.字段1 关系运算符 值 【&& 自定义的表名.字段2 关系运算符 值】】 条件
例：where 自定义的表.xxID==传递参数的ID
【orderby 自定义的表名.字段】 根据orderby 定义的条件 排序
【select 自定义的表名】
【select new {自定义的表名.字段1,
自定义的表名.字段2,
自定义的表名.字段3,
…
}】
【select 类名{ 类的属性1=自定义的表名.字段1，
类的属性2=自定义的表名.字段2，
…
}】
).Single();//查询单条数据，当没有数据或者有多条数据时会触发异常
.ToList();//查询多条数据并转为List
.Count();//查询数据总数
*/
使用VS编程；完成一系列的编程操作后，在对应控制器中编辑你所需要查询的单表数据

  public ActionResult SelectGradeByAcademeId(LayuiTablePage layuiTablePage, int academeId)
        {
            //获取查询数据的总数
            int intTotalRow = (from tbGrade in myModel.SYS_Grade
                               where tbGrade.AcademeID == academeId
                               select tbGrade).Count();
            List<SYS_Grade> listgGrades = (from tbGrade in myModel.SYS_Grade
                                           where tbGrade.AcademeID == academeId
                                           orderby tbGrade.GradeID descending//倒叙排序
                                           select tbGrade)
                                           .Skip(layuiTablePage.GetStartIndex())//从何处开始查询，GetStartIndex  分页开始序号
                                           .Take(layuiTablePage.limit).ToList();//查询所得数据的总条数
            LayuiTableData<SYS_Grade> layuiTableData = new LayuiTableData<SYS_Grade>();
            layuiTableData.count = intTotalRow;
            layuiTableData.data = listgGrades;
            return Json(layuiTableData, JsonRequestBehavior.AllowGet);
        }

LayuiTablePage 该类是封装的一些分页所需要的字段；例：当前页码，每页的数据量，开始序号等……
因为查询的信息为年级信息，所以需要传递一个参数，学院ID 来进行查询，查询对应学院下，所有的年级信息。
实例化一个表用来接收查询的数据；

LayuiTableData<SYS_Grade> layuiTableData = new LayuiTableData<SYS_Grade>();

给layuiTableData中字段赋值；count：表示总行数；data：数据
            layuiTableData.count = intTotalRow;
            layuiTableData.data = listgGrades;

接下来，引用layui插件，在页面加载事件中构建layui的数据表格；

 var tabGrade;//bsgrid的 表格
        var layer, layuiTable;//保存layui模块以便全局使用
声明全局变量
$(function(){
layui.use(['layer', 'table'], function () {
                //赋值
                layer = layui.layer, layuiTable = layui.table;
                //执行渲染
                tabGrade = layuiTable.render({
                    elem: "#tabGrade",//html table id
                    url: "/SystemManagements/CollegeInfor/SelectGradeByAcademeId",//数据接口
                    cols: [[ //表头
                        //{ type: 'radio', fixed: 'left' },//单选框列,fixed:'left' 将列固定在左边
                        { type: 'numbers', title: '序号' },//序号列，title设定标题名称
                        { field: 'GradeID', title: 'GradeID', hide: true },//hide:true 隐藏列
                        { field: 'GradeName', title: '年级名称' },
                        { title: '操作', templet: setOperate, width: 160, align: 'center', fixed: 'right' }//width: 160 指定宽度，align 指定对其方式
                    ]],
                    page: {
                        limit: 10,//指定每页显示的条数
                        limits: [5, 10, 15, 20, 25, 30, 35, 40, 45, 50],//每页条数的选择项
                    }, //开启分页
                    where:{
                        academeId:academeId
                    }//where 设定异步数据接口的额外参数

                });
            });

});

就这样，一个单表的layui数据表格就完成了，以下是效果图