Layui复杂表格

开发工具与关键技术:MVC
作者:文泽钦
撰写时间:2019年5月3日星期一

常见的表格只有一行表头的,但我们今天做一个复杂表格,先看看单表头的效果,等一会写完复杂表格再看复杂的表格。
在这里插入图片描述
把控制器搭建好了就开始写页面的代码,这里要把layui表格用到的css、js插件拷贝到项目,然后显示所有里,然后引入进来。

<link href="~/Plugins/layui/css/layui.css" rel="stylesheet" />
<script src="~/Plugins/jquery-3.2.1.min.js"></script>
<script src="~/Plugins/layui/layui.js"></script>

然后给装表格的一个容器,打了这个容器,页面上也是不会有内容显示的。

<div class="container-fluid">
        @*在超小(手机等移动端)上强制换行并设置边距*@
        <div class="w-100 mb-2 d-inline d-sm-none"></div>
        @*装表格的一个容器*@
        <div class="row">
            <div class="col-12">
                @* 表格id *@
                <table id="tabEmployee" lay-filter="tabEmployee"></table>
            </div>
        </div>
    </div>

效果图:
在这里插入图片描述
因为我们只是给它一个容器,还没有往容器里面装东西,现在开始往容器里装东西。声明一个变量接收表格数据,声明一个变量用于表格初始化。这里会用到两属性,一个是一行rowspan要占用两行或两行以上的类,一个是合并列colspan,就是一行占用两列或两列以上的类。
这两个类要咋样用呢,一个表头要占用两行时就用rowspan;表头再表头事就用colspan,colspan后面不用添加专属名称。

<script>
    var tabEmployee;//声明一个变量放表格数据
    var layer, layuiTable;
  $(function () {
            //加载layui模块
            layui.use(['layer', 'table'], function () {
                layer = layui.layer,
                layuiTable = layui.table;
                //初始化表格
                tabEmployee = layuiTable.render({
                    elem: '#tabEmployee',//表格id
                    url: "",//路径
                    cols: [[//表头
                        { type: "checkbox", rowspan: "2", fixed: "left" },//多选框,fixed:"left"固定在左边
                        { type: "numbers", rowspan: "2", title: "序号" },
                        { field: "EmployeeNumber", rowspan: "2", title: "编号", align: "center" },
                        { field: "EmployeeName", rowspan: "2", title: "姓名", width: 150, align: "center" },
                        { colspan: "3", title: "信息", align: "center" },
                        { colspan: "2", title: "工作", align: "center" },
                        { field: "Remark", rowspan: "2", title: "备注", align: "center" },
                    ], [
                        //对应{colspan: "3", title: "信息", align: "center"}表头
                        { field: "Phone",title: "电话", align: "center" },
                        { field: "Cellphone",title: "手机", align: "center" },
                        { field: "Address", title: "地址", align: "center" },
                        //{对应colspan: "2", title: "工作", align: "center"}表头
                        { field: "DeoartmentName", title: "部门", align: "center" },
                        { field: "PositionName", title: "职位", align: "center" },
                    ]],
                    page: {
                        limit: 10,//指定每页显示的条数
                        limits: [5, 10, 15, 20, 25, 30, 35, 40, 45, 50],//每页条数的选择项
                    },
                    data:[],//空数据原
                });
            });
  });
    </script>

看看效果:
在这里插入图片描述
复杂表格初始就这样完成了,最后搞清楚rowspan和colspan这两个类,这复杂表格也就不复杂了。

相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页