Layui使用treetable复杂表头以及样式错乱、标题过长

项目数据展示与操作：多表格联动查询与管理
原创 已于 2022-05-13 19:56:23 修改 · 置顶 · 1.5k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#layui #javascript #css

于 2022-05-13 19:55:31 首次发布
本文档展示了如何使用layui插件实现两张表格的动态数据管理和搜索功能，包括数据导入、查看、编辑及删除操作。通过树状表格结构，清晰展示房地产开发用地的数据详情和统计。 
<%@ page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/common/taglibs.jsp" %>
<!DOCTYPE html>
<html>
<head>
    <%@ include file="/common/meta.jsp"%>
    <link href="${ctx}/static/css/plugins/dataTables/dataTables.bootstrap.css" rel="stylesheet">
    <link href="${ctx}/static/css/plugins/datapicker/datepicker3.css" rel="stylesheet">
    <link
            href="${ctx}/static/css/plugins/dataTables/dataTables.bootstrap.css"
            rel="stylesheet">
    <link href="${ctx}/static/jqueyViewer/fileupload/css/iconfont.css" rel="stylesheet" type="text/css"/>
    <link href="${ctx}/static/jqueyViewer/fileupload/css/fileUpload.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" type="text/css" href="${ctx}/static/treeTable/layui/css/layui.css"/>
    <link rel="stylesheet" type="text/css" href="${ctx}/static/treeTable/layui/css/common.css"/>
    <style>
        /** 箭头未展开 */
        #table1 + .treeTable .treeTable-icon .layui-icon-triangle-d:before {
            content: "\e602";
        }
        /** 箭头展开 */
        #table1 + .treeTable .treeTable-icon.open .layui-icon-triangle-d:before {
            content: "\e61a";
        }
        /** 文件图标 */
        #table1 + .treeTable .treeTable-icon .layui-icon-file:before {
            content: "";
        }
        /** 文件夹未展开（默认有图标我改为空了） */
        #table1 + .treeTable .treeTable-icon .layui-icon-layer:before {
            content: "";
        }
        /** 文件夹展开（默认有图标我改为空了） */
        #table1 + .treeTable .treeTable-icon.open .layui-icon-layer:before {
            content: "";
        }

        /** 箭头未展开 */
        #table3 + .treeTable .treeTable-icon .layui-icon-triangle-d:before {
            content: "\e602";
        }
        /** 箭头展开 */
        #table3 + .treeTable .treeTable-icon.open .layui-icon-triangle-d:before {
            content: "\e61a";
        }
        /** 文件图标 */
        #table3 + .treeTable .treeTable-icon .layui-icon-file:before {
            content: "";
        }
        /** 文件夹未展开（默认有图标我改为空了） */
        #table3 + .treeTable .treeTable-icon .layui-icon-layer:before {
            content: "";
        }
        /** 文件夹展开（默认有图标我改为空了） */
        #table3 + .treeTable .treeTable-icon.open .layui-icon-layer:before {
            content: "";
        }
        .layui-table-cell {
            padding:0 4px;
            height:auto;
            overflow:visible;
            text-overflow:inherit;
            white-space:normal;
            word-break: break-all;
            text-align: center;
        }
    </style>
</head>

<body class="gray-bg" style="background-color: white;">
<div class="wrapper wrapper-content animated fadeIn padd0">
    <div class="row">
        <div class="col-xs-12">
            <div class="ibox float-e-margins">
                <div class="ibox-content padding0">
                    <form action="#" method="post" id="queryForm">
                        <div class="dataTables_top">
                            <span class="Search_reset_box">
	                            <button type="button" class="btn btn-primary btn-sm" onclick="searchProjectinfo()">搜索</button>
	                            <button type="button" class="btn btn-danger btn-sm" onclick="conditionReset()">重置</button>
                        </span>
                        </div>
                    </form>

        <div class="Table_title_box" style="background-color: white;">
            <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief" >
                
                <ul class="layui-tab-title" style="margin-top: 80px;margin-right: 150px;">
                    <li class="layui-this">*****展示</li>
                    <li>*****展示</li>
                </ul>
                <div class="layui-tab-content" >
                    <div class="layui-tab-item layui-show">
                        <div class="col-xs-12">
                            <table id="table1" class="layui-table" style="margin-top: -10px;" lay-filter="table1"></table>
                            <input id="btn-refresh" style="display: none" >
                        </div>
                    </div>
                    <div class="layui-tab-item">
                        <div class="col-xs-12">
                            <table id="table3" class="layui-table" style="margin-top: -10px;" lay-filter="table3"></table>
                            <input id="btn-refresh3" style="display: none" >
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<br/>
<br/>
<br/>
<script src="${ctx}/static/js/bootstrap.min.js?v=3.3.6"></script>
<script src="${ctx}/static/js/plugins/dataTables/jquery.d.js"></script>
<script src="${ctx}/static/js/plugins/dataTables/dataTables.b.js"></script>
<script src="${ctx}/static/js/plugins/datapicker/bootstrap-datepicker.js"></script>
<script src="${ctx}/static/treeTable/layui/layui.js"></script>
<script type="text/javascript">
    layui.use('element', function(){
        var element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块
    });


    var treetable ="";
    var table
    //初始化table
    layui.config({
        base: '${ctx}/static/treeTable/module/',  /* 修改为你module文件夹地址*/
    }).extend({
        treetable: 'treetable-lay/treetable'
    }).use(['table', 'treetable'], function () {
        //var $ = layui.jquery;
        table = layui.table;
        treetable = layui.treetable;
        // 渲染表格
        var renderTable = function () {
            //layer.load(2);
            treetable.render({
                //size: 'lg', //尺寸-----标题过长去掉此属性
                treeColIndex: 0, //设置下拉箭头在第几列
                treeSpid: "0",   //最上级的父级id
                treeIdName: 'deptId', //id字段的名称(自己的id)
                treePidName: 'parentId', //pid字段的名称（父亲的id）
                treeDefaultClose: true, //是否默认折叠
                //treeLinkage: false, //父级展开时是否自动展开所有子级
                //smartReloadModel:true,
                elem: '#table1', //表格的id
                url: '接口地址?year='+encodeURIComponent($("#year").val())+'&importbatch='+encodeURIComponent($("#importbatch").val()), //数据请求地址，返回json格式数据（映射路径）
                page: false,
                cols: [   //列数和列名可根据需要更改
                    [
                        {field: 'bttype',align: 'center',rowspan:2,title: ''},
                        {align: 'center',colspan:3 ,title: ''},
                        {align: 'center',colspan:4 ,title: '总计'},
                        {align: 'center',colspan:4 ,title: '居住用地'},
                        {align: 'center',colspan:4 ,title: '商业用地'},
                        {align: 'center',colspan:3 ,title: '非房地产开发用地'},
                        {templet: complain, align:'center',rowspan:2, title: '操作'}
                    ],
                    [
                        {field: 'importbatchzwn', align:'center' , title: '导入批次/县区'},
                        {field: 'year', align:'center' , title: '年度'},
                        {field: 'expdata', align:'center' , title: '导入时间'},
                        {field: 'con1', align:'center' , title: '地块数'},
                        {field: 'con5', align:'center' , title: '开工数'},
                        {field: 'con4', align:'center' , title: '开工率'},
                        {field: 'con2', align:'center' , title: '开发计划填报进度'},
                        {field: 'zcon1', align:'center' , title: '地块数'},
                        {field: 'zcon5', align:'center' , title: '开工数'},
                        {field: 'zcon4', align:'center' , title: '开工率'},
                        {field: 'zcon2', align:'center' , title: '开发计划填报进度'},
                        {field: 'scon1', align:'center' , title: '地块数'},
                        {field: 'scon5', align:'center' , title: '开工数'},
                        {field: 'scon4', align:'center' , title: '开工率'},
                        {field: 'scon2', align:'center' , title: '开发计划填报进度'},
                        {field: 'qcon1', align:'center' , title: '地块数'},
                        {field: 'qcon5', align:'center' , title: '开工数'},
                        {field: 'qcon4', align:'center' , title: '开工率'}
                    ]
                ],
                done: function () {
                    $('table').width('100%');
                    layer.closeAll('loading');
                }
            });
        };
        renderTable();
        function complain(d){//操作中显示的内容
            if('${isqx}'!=01 ){
                return [
                    '<button  type="button" class="layui-btn layui-btn-xs layui-bg-blue" style="margin-top:10px;" onclick="LOOK(\''+d.expdata+'\',\''+d.year+'\',\''+d.importbatch+'\')">查看</button>',
                ].join('');
            } else if(d.importbatch !=null && d.importbatch !='' && d.expdata !=null && d.expdata !=''){
                return [
                    '<button  type="button" class="layui-btn layui-btn-xs layui-bg-blue" style="margin-top:10px;" onclick="LOOK(\''+d.expdata+'\',\''+d.year+'\',\''+d.importbatch+'\')">查看</button>',
                    '<button  type="button" class="layui-btn layui-btn-xs layui-bg-blue" style="margin-top:10px;" onclick="importExcel(\''+d.expdata+'\',\''+d.importbatch+'\')">重新导入</button>',
                    '<button  type="button" class="layui-btn layui-btn-xs layui-bg-blue" style="margin-top:10px;" onclick="del(\''+d.expdata+'\',\''+d.importbatch+'\')">删除</button>'
                ].join('');
            }else if(d.importbatchtt !=null && d.importbatchtt !='' ){
                return [
                    '<button  type="button" class="layui-btn layui-btn-xs layui-bg-blue" style="margin-top:10px;" onclick="LOOK(\''+d.expdata+'\',\''+d.year1+'\',\''+d.importbatchtt+'\',\''+d.importbatch+'\')">查看</button>',
                ].join('');
            } else{
                return [
                    '<button  type="button" class="layui-btn layui-btn-xs layui-bg-blue" style="margin-top:10px;" onclick="LOOK(\''+d.expdata+'\',\''+d.year+'\',\''+d.importbatch+'\')">查看</button>',
                ].join('');
            }
        }
        $('#btn-refresh').click(function () {
            renderTable();
        });
        //监听工具条
        table.on('tool(table1)', function(obj){ //注：tool是工具条事件名，table1是table表格的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的DOM对象

            if(layEvent === 'del'){ //删除
                layer.confirm('真的删除行么', function(index){
                    obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                    layer.close(index);
                    //向服务端发送删除指令
                });
            } else if(layEvent === 'edit'){ //编辑
                //do something

            }
        });
    });

    var treetable3 ="";
    var table3
    //初始化table
    layui.config({
        base: '${ctx}/static/treeTable/module/',  /* 修改为你module文件夹地址*/
    }).extend({
        treetable3: 'treetable-lay/treetable'
    }).use(['table', 'treetable'], function () {
        //var $ = layui.jquery;
        table3 = layui.table;
        treetable3 = layui.treetable;
        // 渲染表格
        var renderTable1 = function () {
            //layer.load(2);
            treetable3.render({
                //size: 'lg', //尺寸
                treeColIndex: 0, //设置下拉箭头在第几列
                treeSpid: "0",   //最上级的父级id
                treeIdName: 'deptId3', //id字段的名称(自己的id)
                treePidName: 'parentId3', //pid字段的名称（父亲的id）
                treeDefaultClose: true, //是否默认折叠
                //treeLinkage: false, //父级展开时是否自动展开所有子级
                //smartReloadModel:true,
                elem: '#table3', //表格的id
                url: '后台接口?year='+encodeURIComponent($("#year").val())+'&importbatch='+encodeURIComponent($("#importbatch").val()), //数据请求地址，返回json格式数据（映射路径）
                page: false,
                cols: [   //列数和列名可根据需要更改
                    [
                        {field: 'bttype3',align: 'center',rowspan:2,title: ''},
                        {field: 'importbatch3',align: 'center',rowspan:2,title: '县区'},
                        {align: 'center',colspan:4 ,title: '总计'},
                        {align: 'center',colspan:4 ,title: '居住用地'},
                        {align: 'center',colspan:4 ,title: '商业用地'},
                        {align: 'center',colspan:3 ,title: '非房地产开发用地'},
                        {templet: complain, align:'center',rowspan:2, title: '操作'}
                    ],
                    [
                        {field: 'con13', align:'center' , title: '地块数'},
                        {field: 'con53', align:'center' , title: '开工数'},
                        {field: 'con43', align:'center' , title: '开工率'},
                        {field: 'con23', align:'center' , title: '开发计划填报进度'},
                        {field: 'zcon13', align:'center' , title: '地块数'},
                        {field: 'zcon53', align:'center' , title: '开工数'},
                        {field: 'zcon43', align:'center' , title: '开工率'},
                        {field: 'zcon23', align:'center' , title: '开发计划填报进度'},
                        {field: 'scon13', align:'center' , title: '地块数'},
                        {field: 'scon53', align:'center' , title: '开工数'},
                        {field: 'scon43', align:'center' , title: '开工率'},
                        {field: 'scon23', align:'center' , title: '开发计划填报进度'},
                        {field: 'qcon13', align:'center' , title: '地块数'},
                        {field: 'qcon53', align:'center' , title: '开工数'},
                        {field: 'qcon43', align:'center' , title: '开工率'}
                    ]
                ],
                done: function () {
                    $('table').width('100%');
                    layer.closeAll('loading');
                }
            });
        };
        renderTable1();
        function complain(d){//操作中显示的内容
            if('${isqx}'!=01 ){
                return [
                    '<button  type="button" class="layui-btn layui-btn-xs layui-bg-blue" style="margin-top:10px;" onclick="LOOK(\''+d.expdata3+'\',\''+d.year3+'\',\''+d.importbatch3+'\')">查看</button>',
                ].join('');
            } else if(d.importbatch !=null && d.importbatch !='' && d.expdata3 !=null && d.expdata3 !=''){
                return [
                    '<button  type="button" class="layui-btn layui-btn-xs layui-bg-blue" style="margin-top:10px;" onclick="LOOK(\''+d.expdata3+'\',\''+d.year3+'\',\''+d.importbatch3+'\')">查看</button>',
                    '<button  type="button" class="layui-btn layui-btn-xs layui-bg-blue" style="margin-top:10px;" onclick="importExcel(\''+d.expdata3+'\',\''+d.importbatch3+'\')">重新导入</button>',
                    '<button  type="button" class="layui-btn layui-btn-xs layui-bg-blue" style="margin-top:10px;" onclick="del(\''+d.expdata3+'\',\''+d.importbatch3+'\')">删除</button>'
                ].join('');
            } else{
                return [
                    '<button  type="button" class="layui-btn layui-btn-xs layui-bg-blue" style="margin-top:10px;" onclick="LOOK(\''+d.expdata3+'\',\''+d.year3+'\',\''+d.importbatchtt3+'\',\''+d.importbatch3+'\')">查看</button>',
                ].join('');
            }
        }
        $('#btn-refresh3').click(function () {
            renderTable1();
        });
        //监听工具条
        table3.on('tool(table3)', function(obj){ //注：tool是工具条事件名，table1是table表格的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的DOM对象

            if(layEvent === 'del'){ //删除
                layer.confirm('真的删除行么', function(index){
                    obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                    layer.close(index);
                    //向服务端发送删除指令
                });
            } else if(layEvent === 'edit'){ //编辑
                //do something
            }
        });
    });

    function searchProjectinfo() {
        $("#btn-refresh").click();
        $("#btn-refresh3").click();
    }
    function refresh(){
        $("#btn-refresh").click();
        $("#btn-refresh3").click();
    }
    
   

</script>
</body>
</html>

layui使用treeTable实现树形表格
向宇
01-12 2995
1.地址 https://fly.layui.com/extend/treeTable/#doc
Layui(十三) Layui treeTable的表格嵌套树形数据+时间控件与layer控件互斥
qq_42142258的博客
03-13 1871
目的：
Layui Tree组件使用setChecked设置默认选中项多的情况下加载速度过慢的问题
kun112136的博客
05-29 4286
前阵子做一个项目,用layui做的后台,其中有一个功能是,省市联动选择,当设置的选中项很多的时候,这时候加载就会十分的缓慢,慢到不能忍的地步,加载一个页面可能要10秒以上. 经过检查后发现，之所以加载慢的罪魁祸首是使用了 reInput.click();方法来设置checkbox选中，这样数据很多的时候，会执行很多的click事件，导致加载很慢。 下面是加载速度测试，以全国省市（不包括区）共372项全部选中作为测试 这是修改前的测试 ...
Layui树形表格完整实现与实战应用
最新发布
weixin_32047493的博客
10-21 596
Layui树形表格是基于Layui框架的table模块扩展而来的一种特殊数据展示形式，通过嵌套的children字段实现层级递归渲染。其核心在于支持父子节点的展开/折叠交互，并以缩进结构可视化呈现数据隶属关系，适用于组织架构、权限系统等场景。"id": 1,"name": "部门A","id": 2,"name": "子部门A-1",该结构通过tree: true配置开启树形模式，结合treeIdtreeUpId和treeSpread。
layui自定义导出过程(自定义标题)
星银色飞行船的博客
02-23 1825
目录 源代码修改 JS一句话导出 自定义导出的好处 一、 源代码修改 源代码修改如下：为了支持自定义导出excel的标题 找到layui.all.js文件 搜索exportFile 将d.exportFile=function(e,t,i)修改为d.exportFile=function(e,t,i,name) name这个参数就是标题名称 搜索download 将s.download=(l.title||“table_”+(l.index||"")) 修改为s.download=(name||l.t
layui设置表格表头字体_layui中table表头样式修改方法
weixin_39657521的博客
12-20 2805
layui.use('table', function () {var table = layui.table;table.render({elem: '#desTable', url: '${ctx}/alarm/queryEventShowScatter', even: true, page: { //支持传入 laypage 组件的所有参数(某些参数除外，如：jump/elem) - 详见文...
Layui复杂表格
weixin_44540251的博客
06-08 5923
开发工具与关键技术：MVC 作者：文泽钦 撰写时间：2019年5月3日星期一 常见的表格只有一行表头的，但我们今天做一个复杂表格，先看看单表头的效果，等一会写完复杂表格再看复杂的表格。 把控制器搭建好了就开始写页面的代码，这里要把layui表格用到的css、js插件拷贝到项目，然后显示所有里，然后引入进来。 <link href="~/Plugins/layui/css/layui.cs...
LayUI树形表格treetable使用详解
08-07
LayUI树形表格treetable使用详解
Layui的树形表格treeTable
06-20
下面我们将深入探讨Layui的treeTable，以及如何实现无限层级的树形表格。 1. **Layui TreeTable的基本概念** - **TreeTable结构**：在Layui中，树形表格是由普通的表格扩展而来，每个单元格可以展开或折叠，展示其...
layui-treetable
03-01
在压缩包"layui-treetable"中，通常会包含layui-treetable的JavaScript文件、CSS样式文件以及示例HTML文件。开发者可以通过查看示例文件来学习如何在项目中引入和使用这个组件。同时，需要注意的是，layui-treetable...
layui动态加载多表头的实例
01-19
后台动态拼接数组，返回数组后把两个数组push到一个空数组中就可以组成一个动态的多级表头 var header= []; var header1= [{field: 'merchantName', title: '商户名称', width: 140, rowspan: 2},{field: '...
layui中table表头样式修改方法
12-10
如下所示： layui.use('table', function () { var table = layui.table; table.render({ elem: '#desTable' , url: '${ctx}/alarm/queryEventShowScatter' , even: true , page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档 layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局 //
layui表头样式_layui表格的样式设置
weixin_28761983的博客
02-17 2169
该楼层疑似违规已被系统折叠隐藏此楼查看此楼layui表格的样式设置~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~开发工具与关键技术：Visual Studio 2015、作者：梁柏源撰写时间：2019/7/17~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~...
layui表格文字超出，鼠标悬停显示
qq_41137858的博客
12-14 5874
layui数据表格显示文字过长，超出表格宽度会默认显示省略号，并出现一个小按钮，点击按钮就可以看到全部内容。 但是新需求是要求鼠标悬停到上面就显示全部内容。直接上代码，复制到js里面就能用。 //超出部分用鼠标悬停时，tooltip显示完整内容 $(document).on('mouseenter', "tbody td", function () { try { var range = document.createRang.
layui复杂表格-行合并
Shuttengr的博客
04-27 4202
var renderTable = function (respData) { table.render({ elem: '#table_name', // 分页 page: false, limit: 999999, data: respData, toolbar: '#tableListToolbar', // 通过多个数组, 并...
新人--使用layui做的表格，复杂表头，固定列，操作单元格数据计算，点击查询重载表格,可以选择部分或者全部导出...
weixin_30411819的博客
10-27 753
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"/> <title>总合计</title> <meta content="width=device-width, initial-scale=1, maximum...
layui 复杂表头多层表头的表格数据非后台导出excel
热门推荐
诗语待马
08-28 1万+
用过layui table的都了解，layui的表格自带导出功能，只要在属性toolbar里配置即可。 如果嫌toolbar里的导出按钮不够美观，layui也友好的提供了自行定义按钮后调用导出页面数据的方法，详见：[官方文档] `遗憾的`是该方法暂时并不支持对多层表头的导出。 而多层复杂表头在很多系统中都有体现，而若不想通过后台代码去做导出，只在前端页面上该如何做呢？
Layui表格渲染错位
weixin_43858776的博客
05-25 1648
检查自己是不是多了","。
layui 使用treeTable 展开隐藏
06-14
要在 layui 中使用 treeTable 进行展开和隐藏，你需要做以下几步： 1. 在 HTML 中定义一个 table 元素，并为其添加一个 id 属性，例如：`<table id="demo"></table>` 2. 引入 layui 的 treeTable 模块：`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值