Layui复杂表格

谁借莪１个温暖的怀抱￠ 2022-01-21 03:51 828阅读 0赞

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

常见的表格只有一行表头的，但我们今天做一个复杂表格，先看看单表头的效果，等一会写完复杂表格再看复杂的表格。  
![在这里插入图片描述][20190608012130354.png]  
把控制器搭建好了就开始写页面的代码，这里要把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>

效果图：  
![在这里插入图片描述][20190608012232266.png]  
因为我们只是给它一个容器，还没有往容器里面装东西，现在开始往容器里装东西。声明一个变量接收表格数据，声明一个变量用于表格初始化。这里会用到两属性，一个是一行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>

看看效果：  
![在这里插入图片描述][20190608012403739.png]  
复杂表格初始就这样完成了，最后搞清楚rowspan和colspan这两个类，这复杂表格也就不复杂了。

[20190608012130354.png]: /images/20220121/69120004f1e647bd88553af3e1c5c844.png
[20190608012232266.png]: /images/20220121/d107250043cb4eaa92042a0d97cdc26e.png
[20190608012403739.png]: /images/20220121/9450f72355a74576b3f86f67289ffd46.png

发表评论取消回复

表情：

评论列表（有 0 条评论，828人围观）

还没有评论，来说两句吧...

相关阅读

相关 LayUi 之数据表格

我们在平常做项目的过程中，如果想使用数据表格的话，一般都是动态数据的处理，而且一般如果我们数据表格不加分页的话，还是很容易做的，但是加了数据表格的话，如果是前端分页，那也好说，

￡神魔★判官ぃ/ 2022年05月20日 04:27/ 0 赞/ 340 阅读

相关 layui——表格问题

搜索问题： $("searchBtn").click(function () { //这里以搜索为例 tableIns.reload(

ゞ浴缸里的玫瑰/ 2022年05月12日 13:28/ 0 赞/ 320 阅读

相关 Layui的表格应用

众所周知，在html中，应用table表单十分麻烦的，tr，td，的什么要很多，像我们数据里有几千条数据，我们不可能去一条一条的输入，十分的麻烦和费时间，那么有没有自动引入生成

﹏ヽ暗。殇╰゛Y/ 2022年04月24日 06:00/ 0 赞/ 336 阅读

相关《layUI 的数据表格》

1.Action private t_book_vo bookvo = new t_book_vo(); private bookDao_vo bdv =

亦凉/ 2022年04月18日 05:24/ 0 赞/ 497 阅读

相关 LATEX复杂表格范例

转载自[https://blog.csdn.net/appleml/article/details/80412339][https_blog.csdn.net_appleml_

ゞ浴缸里的玫瑰/ 2022年02月25日 03:16/ 0 赞/ 592 阅读

相关 Layui表格渲染

开发工具与关键技术： Visual Studio 2015 – Layui表格渲染作者：廖亚星撰写时间：2019年5 月15 日下面我用Layui插件来渲染代码

缺乏、安全感/ 2022年01月31日 05:49/ 0 赞/ 545 阅读

相关 Layui复杂表格

开发工具与关键技术：MVC 作者：文泽钦撰写时间：2019年5月3日星期一常见的表格只有一行表头的，但我们今天做一个复杂表格，先看看单表头的效果，等一会写完复杂表

谁借莪１个温暖的怀抱￠/ 2022年01月21日 03:51/ 0 赞/ 829 阅读

相关编辑layui表格

开发工具与关键技术：SQL Server 2014与jquery 作者：戴怡斌撰写时间：2019年7月26日在学习jquer

爱被打了一巴掌/ 2021年11月23日 23:26/ 0 赞/ 524 阅读

相关 Layui表格的修改

Layui表格的修改开发工具与关键技术： Visual Studio 2015 – jQuery 作者：廖亚星撰写时间：2019年 7 月 20日当

- 日理万妓/ 2021年11月23日 10:32/ 0 赞/ 921 阅读

相关 layui数据表格

快速使用创建一个table实例最简单的方式是，在页面放置一个元素 `<table id="demo"></table>`，然后通过 table.render() 方法指

约定不等于承诺〃/ 2021年06月24日 16:11/ 0 赞/ 804 阅读