layui表格

最新推荐文章于 2024-03-20 10:16:05 发布

@HZY

最新推荐文章于 2024-03-20 10:16:05 发布

阅读量289

点赞数

CC 4.0 BY-SA版权

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/weixin_44546855/article/details/89948690

前端专栏收录该内容

20 篇文章

订阅专栏

本文介绍了layui表格渲染的步骤，从导入layui插件开始，详细讲解如何在控制器中编写查询方法，确保数据倒叙排序，然后阐述如何将查询结果绑定到layui表格中，包括elem、url、cols等关键配置的使用，以及页面分页和数据量控制的设置，旨在帮助读者深入理解layui表格的使用。

首先说一下渲染 layui表格渲染的步骤
首先要导入layui插件

在这里插入图片描述
下面详细说明一下渲染表格的方法
首先渲染表格的目的是显示数据，让数据有序排列展示，使得看起来简单明了。
所以我们应该先到控制器中写查询方法

  public ActionResult SelectEmployee(LayuiTablePage layuiTablePage)
        {

            List<PW_Employee> listAcademe = myModel.PW_Employee.OrderByDescending(m => m.employeeID).Skip(layuiTablePage.GetStartIndex())
               .Take(layuiTablePage.limit).ToList();
            int intTotalRow = myModel.PW_Employee.Count();
            LayuiTableData<PW_Employee> layuiTableData = new LayuiTableData<PW_Employee>()
            {
                count = intTotalRow,
                data = listAcademe
            };
            return Json(layuiTableData, JsonRequestBehavior.AllowGet);

        }

以上就是查询方法上面有个易错点，要注意给数据倒叙排序，也就是orderby，
这样才能使得后面新增数据排序在前面，使得更加直观的看到数据的变化。
数据查询出来之后，我们就可以把查询出来的数据绑定到layui 表格中了，
下面渲染表格并绑定数据

<script>
        var layer, layuiTable;
        var TabEmployee;
        $(document).ready(function () {
            layui.use(['layer', 'table'], function () {
                layer = layui.layer,
                layuiTable = layui.table;
                TabEmployee = layuiTable.render({
                    elem: '#employee',
                    //toolbar: '#toolbarDemo',
                    url: "/Main/SelectEmployee",
                    //data: [],
                    cols: [[
                       { title: '序号', type: 'numbers' },
                       { title: 'employeeID', field: 'employeeID', hide: true },
                       { title: '员工姓名', field: 'employeeName', align: 'center' },
                       { title: '员工编号', field: 'employeeNum', align: 'center' },
                       { title: '联系电话', field: 'telphone', align: 'center' },
                       { title: '家庭地址', field: 'address', align: 'center' },
                       { title: '操作', templet: setOperate, align: 'center' }
                    ]],
                    page: {
                        limit: 12,//指定每页显示的条数
                        limits: [5, 10, 15, 20, 25, 30, 35, 40, 45, 50],//每页条数的选择项
                    }, //开启分页 
                    //id: "tbEmployee"
                });
                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();
                });
            });
        });
</script>

以上就是渲染方法，下面来详细介绍步骤，
首先是声明全局变量layuitable ，
然后elem就是表格的样式绑定，
url 数据接口，把刚才写的查询方法查询出的数据，连接起来，
cols 二维数组，可以设置表头和绑定数据库的数据，使其显示到layui表格中，
cols格式比较特别，需要两个中括号包含，cols里面的title就是设置表头名称，
在这里插入图片描述
field是绑定数据库ID显示数据，
page是设置页码显示数据条数与分页
limit是指定每页显示数据的条数
limits页码显示数据条数的选择