LigerUI —— 表格树的使用

这几天做公司的项目，有个模块功能需求是要做成表格树，自己在网上找了好多例子，但是都没有符合项目需求的，最后看到了ligerui框架里的表格功能下面的树表格，在此基础上改了一下，大家有需要的可以借鉴一下，或者有更好的办法可以留言。

LigerUI 官网地址： http://www.ligerui.com/

表格树地址：http://www.ligerui.com/demo.html ，截图如下：

下图为根据自己项目的需求，最后修改完的截图：

引入的文件：

下面为所做功能的代码：

html：

<div id="maingrid"></div>

css：

        #maingrid{width: 100% !important;margin-bottom:10px;}/* 让文字垂直居中 */.l-grid-row-cell-inner{line-height: 28px;}/* 加号按钮 */.l-grid-tree-link-close{margin-top: 3px;}/* 减号按钮 */.l-grid-tree-link-open{margin-top: 3px;}

js：

var manager;
var TreeDeptData = {Rows: [{name: "A组",  children: [{                    name: "组一",   ssss: '',pzz: '',zws: '',bzc: '',byxs: '',Maximum: '',Minimum: '' ,children: [{                           name: "组一第一队",                                ssss: '111',pzz: '222',zws: '333',bzc: '444',byxs: '555',Maximum: '666',Minimum: '777'                            },{name: "组一第二队",                             ssss: '111',pzz: '222',zws: '333',bzc: '444',byxs: '555',Maximum: '666',Minimum: '777'        },{                         name: "组一第三队",                                ssss: '111',pzz: '222',zws: '333',bzc: '444',byxs: '555',Maximum: '666',Minimum: '777'                            },{name: "组一第四队",                             ssss: '111',pzz: '222',zws: '333',bzc: '444',byxs: '555',Maximum: '666',Minimum: '777'        }]},{                   name: "组二",   ssss: '',pzz: '',zws: '',bzc: '',byxs: '',Maximum: '',Minimum: '' ,children: [{                           name: "组一第一队",                                ssss: '111',pzz: '222',zws: '333',bzc: '444',byxs: '555',Maximum: '666',Minimum: '777'                            },{name: "组一第二队",                             ssss: '111',pzz: '222',zws: '333',bzc: '444',byxs: '555',Maximum: '666',Minimum: '777'        },{                         name: "组一第三队",                                ssss: '111',pzz: '222',zws: '333',bzc: '444',byxs: '555',Maximum: '666',Minimum: '777'                            },{name: "组一第四队",                             ssss: '111',pzz: '222',zws: '333',bzc: '444',byxs: '555',Maximum: '666',Minimum: '777'        }]},{                   name: "组三",   ssss: '',pzz: '',zws: '',bzc: '',byxs: '',Maximum: '',Minimum: '' ,children: [{                           name: "组一第一队",                                ssss: '111',pzz: '222',zws: '333',bzc: '444',byxs: '555',Maximum: '666',Minimum: '777'                            },{name: "组一第二队",                             ssss: '111',pzz: '222',zws: '333',bzc: '444',byxs: '555',Maximum: '666',Minimum: '777'        },{                         name: "组一第三队",                                ssss: '111',pzz: '222',zws: '333',bzc: '444',byxs: '555',Maximum: '666',Minimum: '777'                            },{name: "组一第四队",                             ssss: '111',pzz: '222',zws: '333',bzc: '444',byxs: '555',Maximum: '666',Minimum: '777'        }]},{                   name: "组四",   ssss: '',pzz: '',zws: '',bzc: '',byxs: '',Maximum: '',Minimum: '' ,children: [{                           name: "组一第一队",                                ssss: '111',pzz: '222',zws: '333',bzc: '444',byxs: '555',Maximum: '666',Minimum: '777'                            },{name: "组一第二队",                             ssss: '111',pzz: '222',zws: '333',bzc: '444',byxs: '555',Maximum: '666',Minimum: '777'        },{                         name: "组一第三队",                                ssss: '111',pzz: '222',zws: '333',bzc: '444',byxs: '555',Maximum: '666',Minimum: '777'                            },{name: "组一第四队",                             ssss: '111',pzz: '222',zws: '333',bzc: '444',byxs: '555',Maximum: '666',Minimum: '777'        }]},{                   name: "组五",   ssss: '',pzz: '',zws: '',bzc: '',byxs: '',Maximum: '',Minimum: '' ,children: [{                           name: "组一第一队",                                ssss: '111',pzz: '222',zws: '333',bzc: '444',byxs: '555',Maximum: '666',Minimum: '777'                            },{name: "组一第二队",                             ssss: '111',pzz: '222',zws: '333',bzc: '444',byxs: '555',Maximum: '666',Minimum: '777'        },{                         name: "组一第三队",                                ssss: '111',pzz: '222',zws: '333',bzc: '444',byxs: '555',Maximum: '666',Minimum: '777'                            },{name: "组一第四队",                             ssss: '111',pzz: '222',zws: '333',bzc: '444',byxs: '555',Maximum: '666',Minimum: '777'        }]}]},{name: "B组",    children: [{                    name: "组一",   ssss: '',pzz: '',zws: '',bzc: '',byxs: '',Maximum: '',Minimum: '' ,children: [{                           name: "组一第一队",                                ssss: '111',pzz: '222',zws: '333',bzc: '444',byxs: '555',Maximum: '666',Minimum: '777'                            },{name: "组一第二队",                             ssss: '111',pzz: '222',zws: '333',bzc: '444',byxs: '555',Maximum: '666',Minimum: '777'        },{                         name: "组一第三队",                                ssss: '111',pzz: '222',zws: '333',bzc: '444',byxs: '555',Maximum: '666',Minimum: '777'                            },{name: "组一第四队",                             ssss: '111',pzz: '222',zws: '333',bzc: '444',byxs: '555',Maximum: '666',Minimum: '777'        }]},{                   name: "组二",   ssss: '',pzz: '',zws: '',bzc: '',byxs: '',Maximum: '',Minimum: '' ,children: [{                           name: "组一第一队",                                ssss: '111',pzz: '222',zws: '333',bzc: '444',byxs: '555',Maximum: '666',Minimum: '777'                            },{name: "组一第二队",                             ssss: '111',pzz: '222',zws: '333',bzc: '444',byxs: '555',Maximum: '666',Minimum: '777'        },{                         name: "组一第三队",                                ssss: '111',pzz: '222',zws: '333',bzc: '444',byxs: '555',Maximum: '666',Minimum: '777'                            },{name: "组一第四队",                             ssss: '111',pzz: '222',zws: '333',bzc: '444',byxs: '555',Maximum: '666',Minimum: '777'        }]},{                   name: "组三",   ssss: '',pzz: '',zws: '',bzc: '',byxs: '',Maximum: '',Minimum: '' ,children: [{                           name: "组一第一队",                                ssss: '111',pzz: '222',zws: '333',bzc: '444',byxs: '555',Maximum: '666',Minimum: '777'                            },{name: "组一第二队",                             ssss: '111',pzz: '222',zws: '333',bzc: '444',byxs: '555',Maximum: '666',Minimum: '777'        },{                         name: "组一第三队",                                ssss: '111',pzz: '222',zws: '333',bzc: '444',byxs: '555',Maximum: '666',Minimum: '777'                            },{name: "组一第四队",                             ssss: '111',pzz: '222',zws: '333',bzc: '444',byxs: '555',Maximum: '666',Minimum: '777'        }]},{                   name: "组四",   ssss: '',pzz: '',zws: '',bzc: '',byxs: '',Maximum: '',Minimum: '' ,children: [{                           name: "组一第一队",                                ssss: '111',pzz: '222',zws: '333',bzc: '444',byxs: '555',Maximum: '666',Minimum: '777'                            },{name: "组一第二队",                             ssss: '111',pzz: '222',zws: '333',bzc: '444',byxs: '555',Maximum: '666',Minimum: '777'        },{                         name: "组一第三队",                                ssss: '111',pzz: '222',zws: '333',bzc: '444',byxs: '555',Maximum: '666',Minimum: '777'                            },{name: "组一第四队",                             ssss: '111',pzz: '222',zws: '333',bzc: '444',byxs: '555',Maximum: '666',Minimum: '777'        }]},{                   name: "组五",   ssss: '',pzz: '',zws: '',bzc: '',byxs: '',Maximum: '',Minimum: '' ,children: [{                           name: "组一第一队",                                ssss: '111',pzz: '222',zws: '333',bzc: '444',byxs: '555',Maximum: '666',Minimum: '777'                            },{name: "组一第二队",                             ssss: '111',pzz: '222',zws: '333',bzc: '444',byxs: '555',Maximum: '666',Minimum: '777'        },{                         name: "组一第三队",                                ssss: '111',pzz: '222',zws: '333',bzc: '444',byxs: '555',Maximum: '666',Minimum: '777'                            },{name: "组一第四队",                             ssss: '111',pzz: '222',zws: '333',bzc: '444',byxs: '555',Maximum: '666',Minimum: '777'        }]}]},{name: "C组",    children: [{                    name: "组一",   ssss: '',pzz: '',zws: '',bzc: '',byxs: '',Maximum: '',Minimum: '' ,children: [{                           name: "组一第一队",                                ssss: '111',pzz: '222',zws: '333',bzc: '444',byxs: '555',Maximum: '666',Minimum: '777'                            },{name: "组一第二队",                             ssss: '111',pzz: '222',zws: '333',bzc: '444',byxs: '555',Maximum: '666',Minimum: '777'        },{                         name: "组一第三队",                                ssss: '111',pzz: '222',zws: '333',bzc: '444',byxs: '555',Maximum: '666',Minimum: '777'                            },{name: "组一第四队",                             ssss: '111',pzz: '222',zws: '333',bzc: '444',byxs: '555',Maximum: '666',Minimum: '777'        }]},{                   name: "组二",   ssss: '',pzz: '',zws: '',bzc: '',byxs: '',Maximum: '',Minimum: '' ,children: [{                           name: "组一第一队",                                ssss: '111',pzz: '222',zws: '333',bzc: '444',byxs: '555',Maximum: '666',Minimum: '777'                            },{name: "组一第二队",                             ssss: '111',pzz: '222',zws: '333',bzc: '444',byxs: '555',Maximum: '666',Minimum: '777'        },{                         name: "组一第三队",                                ssss: '111',pzz: '222',zws: '333',bzc: '444',byxs: '555',Maximum: '666',Minimum: '777'                            },{name: "组一第四队",                             ssss: '111',pzz: '222',zws: '333',bzc: '444',byxs: '555',Maximum: '666',Minimum: '777'        }]},{                   name: "组三",   ssss: '',pzz: '',zws: '',bzc: '',byxs: '',Maximum: '',Minimum: '' ,children: [{                           name: "组一第一队",                                ssss: '111',pzz: '222',zws: '333',bzc: '444',byxs: '555',Maximum: '666',Minimum: '777'                            },{name: "组一第二队",                             ssss: '111',pzz: '222',zws: '333',bzc: '444',byxs: '555',Maximum: '666',Minimum: '777'        },{                         name: "组一第三队",                                ssss: '111',pzz: '222',zws: '333',bzc: '444',byxs: '555',Maximum: '666',Minimum: '777'                            },{name: "组一第四队",                             ssss: '111',pzz: '222',zws: '333',bzc: '444',byxs: '555',Maximum: '666',Minimum: '777'        }]},{                   name: "组四",   ssss: '',pzz: '',zws: '',bzc: '',byxs: '',Maximum: '',Minimum: '' ,children: [{                           name: "组一第一队",                                ssss: '111',pzz: '222',zws: '333',bzc: '444',byxs: '555',Maximum: '666',Minimum: '777'                            },{name: "组一第二队",                             ssss: '111',pzz: '222',zws: '333',bzc: '444',byxs: '555',Maximum: '666',Minimum: '777'        },{                         name: "组一第三队",                                ssss: '111',pzz: '222',zws: '333',bzc: '444',byxs: '555',Maximum: '666',Minimum: '777'                            },{name: "组一第四队",                             ssss: '111',pzz: '222',zws: '333',bzc: '444',byxs: '555',Maximum: '666',Minimum: '777'        }]},{                   name: "组五",   ssss: '',pzz: '',zws: '',bzc: '',byxs: '',Maximum: '',Minimum: '' ,children: [{                           name: "组一第一队",                                ssss: '111',pzz: '222',zws: '333',bzc: '444',byxs: '555',Maximum: '666',Minimum: '777'                            },{name: "组一第二队",                             ssss: '111',pzz: '222',zws: '333',bzc: '444',byxs: '555',Maximum: '666',Minimum: '777'        },{                         name: "组一第三队",                                ssss: '111',pzz: '222',zws: '333',bzc: '444',byxs: '555',Maximum: '666',Minimum: '777'                            },{name: "组一第四队",                             ssss: '111',pzz: '222',zws: '333',bzc: '444',byxs: '555',Maximum: '666',Minimum: '777'        }]}]}]
};$(function() {manager = $("#maingrid").ligerGrid({columns: [{display: '组',name: 'name',id: 'zu',width: 500,minWidth :500, //表格列最小允许宽度(调整大小时将不允许小于这个值)align: 'left'},{display: '一',name: 'ssss',width: 100,type: 'int', //排序类型,包括string、int、float、datealign: 'left'},{display: '二',name: 'pzz',width: 100,type: 'float', //排序类型,包括string、int、float、datealign: 'left'},{display: '三',name: 'zws',width: 100,type: 'float', //排序类型,包括string、int、float、datealign: 'left'},{display: '四',name: 'bzc',width: 100,type: 'float', //排序类型,包括string、int、float、datealign: 'left'},{display: '五',name: 'byxs',width: 100,minWidth :100,type: 'float', //排序类型,包括string、int、float、datealign: 'left'},{display: '六',name: 'Maximum',width: 100,type: 'float', //排序类型,包括string、int、float、datealign: 'left'},{display: '七',name: 'Minimum',width: 100,type: 'float', //排序类型,包括string、int、float、datealign: 'left'}],width: '100%',height: '95%',title: '标题',usePager:false, //是否分页enabledSort:false, //是否允许排序      data: TreeDeptData,alternatingRow: false, //是否附加奇偶行效果行,allowHideColumn:false, //是否显示'切换列层'按钮tree: { //树模式columnId: 'zu', //以树形显示的字段id ,或者name值也可以//columnName:'name', //要显示为树形的字段name}});     manager.collapseAll(); //初始化把所有树收缩          //为第一级所有的行修改样式$('.l-grid-body-table > tbody > tr:visible').each(function(i,n){$(n).children('td').css('border-right','0'); //让所有的td右边框为0$(n).children('td:last-child').css('border-right','1px solid #A3C0E8'); //给最后一个td加上border   $(n).css("background","#EAF3FF"); //设置第一级整行的样式      });     //为第二级所有的行修改样式$('.l-grid-body-table > tbody > tr:hidden').each(function(i,e){var html = $(e).children('td').next().find('div').html();     if(html == ''){$(e).children('td').css('border-right','0'); //让所有的td右边框为0$(e).children('td:last-child').css('border-right','1px solid #A3C0E8');    //给最后一个td加上border   $(e).css("background","#EAF3FF"); //设置第二级整行的样式}     }); });

LigerUI —— 表格树的使用相关推荐

asp.net DataGridTree表格树控件下拉树 DropTree c# .net
1.下拉树 DropTree c# .net 下拉树实现原理输出json到客户端客户端实现动态加载中间不会和服务端交互数据量支持上经测试几千还是很快的本下拉树控件是用c#+js树实现 ...
树形选择变成表格树选择
需求:在接口不改动的情况下由树形结构改成表格树结构,如下图原图调整后 1.这里使用的是antdesign框架,首先将a-tree改为a-table <!-- <a-tree check ...
ng-zorro中表格树的动态添加、修改、删除节点操作
在开发中,有时需要以表格树的形式加载数据,但是数据量特别大时,可能只是先加载一层,如果有子节点就在名称前显示一个"+"号或其它图标,然后点击"+"再展示子节点. ...
element-ui 表格树数据显示
1.使用表格树,element-ui比较新的版本开始支持,最新的版本却在报错,不识别树结构的几个属性 <script src="https://cdn.bootcss.com/elem ...
element表格多列排序_vue表格树状结构的实现
这绝对是我最后一次写树状结构,我非常的确定一定以及肯定! 上一篇文章总结了vue树状目录组件,忘记的可以点击传送门回顾一下: vue目录树组件还是这个目录树,改版成表格树状结构 . 我这里采用的U ...
基于iview2/3组件的Table表格树展开/折叠
基本iview2/3组件的Table表格树折叠展开,其实就是展开的时候插入行,收缩的时候删除行 {title: '名称',key: 'name',minWidth: 200,ellipsis: tru ...
java表格树_Java程序员值得拥有的TreeMap指南
吃饭间隙,迷上了<吐槽大会>,一集一集地刷啊,觉得这些嘉宾真的挺有勇气的,敢于直面自己的惨淡槽点.于是,同学们看到了,我作为一个技术博主,也受到了"传染",不,受到了& ...
antd 表格树如何展开_如何分析工作，找出规律，使用excel大幅度提高工作效率...
在职场中,掌握一定的excel知识,有时候可以极大的提高工作效率,减少加班次数. 但是有的人可能不知道如何去做,下面我使用一个我前几天遇到的工作场景,一步一步的来给大家展示一下,如何使用excel提高 ...
antd 表格树如何展开_元件区域 -- 菜单 | 表格 | 流程图 | 图标
树很少使用的东西,因为样式太过于粗糙.有兴趣的可以自行研究. 表格表格比较常用,在表格中支持表格单个,单行,单列的背景颜色.边框颜色等调整, 水平菜单.垂直菜单不是很常用的功能,,但是在网页端做 ...

LigerUI —— 表格树的使用

LigerUI —— 表格树的使用相关推荐

最新文章

热门文章