Layui数据表格的构建

客官°小女子只卖身不卖艺 2022-02-20 15:21 357阅读 0赞

开发工具与关键技术：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数据表格就完成了，以下是效果图  
![在这里插入图片描述][20190414095323308.png]

[20190414095323308.png]: /images/20220220/f2bcb0809c8f46f0992ac8050693e94e.png