bootstrap 树形表格渲染慢_layUI之树状表格异步加载组件treetableAsync.js(基于treetable.js)...
概述
后台框架中使用树状表格是非常常用的操作,layUI本身并没有这种组件。 第三方的treetable.js做到了完美的实现,但是不能实现在双击时异步加载数据,本文就是站在了巨人的肩膀上实现的异步加载的树状表格~
1. 使用说明
本组件基于treetable.js组件进行编写,最大的区别在treetable.js无法进行异步加载,而本组件则使用异步加载树状表格。 因此,若无异步加载需求,建议直接使用treetable.js,有异步加载需求时,可使用本组件。
由于treetable.js的源码进行过修改,因此不能使用官方下载的原版本(如需使用,可私聊作者获取)
2. 使用需知
2.1 本组件依赖于treetable.js【重中之重】
由于本组件依赖于treetable.js,因此使用本组件时,需首先引入treetable.js,方可使用。 但由于treetable.js的源码进行过修改,因此不能使用官方下载的原版本(如需使用,可私聊作者获取)。 代码示例:
layui.config({base: '../../common/'
}).extend({index: 'lib/index',treetable: "../lib/extend/treetable", // 使用异步加载treetableAsync,必须先引入treetabletreetableAsync : '../lib/extend/treetableAsync'
})
2.2 本组件基于layUIAdmin进行使用
本组件使用中的Ajax请求,基于layUIAdmin的admin.req()进行。 如果不使用layUIAdmin,需要自行调整源码。
2.3 本组件的方法支持treetable.js的所有方法;
本组件中所用的所有方法,均基于支持treetable.js中所使用的方法,因此在treetable.js中可以调用的方法,均可使用treetableAsync调用。 例如:
treetableAsync.expandAll('#dataList');
// 等同于
treetable.expandAll('#dataList');
2.4 本组件不支持的其他方法,均可使用layui-table组件的方法。
本组件及treetable.js所不支持的方法,均可使用layUI原生的数据表格组件的相应方法。 本组件不支持列表的toolbar操作,则可以使用table原生的事件监听:
//列表操作
table.on('tool(dataList)', function (obj) {
})
2.4 组件源码
本组件源码附上,大家有疑问可以评论留言。
layui.define(['index','form','treetable','jquery','treetable'],function(exports){var treetable = layui.treetable,table = layui.table,form = layui.form,$ = layui.jquery,setter = layui.setter,view = layui.view,admin = layui.admin;var tableData = [];var treetableAsync = {render : function(param){var provincesUrl = param.url;function init(id){admin.req({url: provincesUrl + id,type:"get",success:function(r){param.data = tableData = r.data;tableInit();}});}init(param.treeSpid);// 渲染表格function tableInit(){treetable.render(param);}$("body").on('dblclick','.layui-table-body .layui-table tr',function(){var top = $('.layui-table-body').scrollTop();var pid = $(this).find('div[class$="'+param.treeIdName+'"]').text();var index = $(this).index();admin.req({url: provincesUrl + pid,type:"get",success:function(r){var isInit = false;for(var i=0; i<r.data.length; i++){var isPush = true;for(var j=0; j<tableData.length; j++){if(r.data[i][param.treeIdName] == tableData[j][param.treeIdName]){isPush = false;}}if(isPush){tableData.push(r.data[i]);isInit = true;}}if(isInit){param.data = tableData;tableInit();expandSelfAndParent(index);$('.layui-table-body').scrollTop(top);}}});});function expandSelfAndParent(index){treetable.toggleRows($('.layui-table-body .layui-table tr').eq(index).find('.treeTable-icon'));var tpid = $('.layui-table-body .layui-table tr').eq(index).find('.treeTable-icon').attr('lay-tpid');var trs = $('.layui-table-body .layui-table tr');var j = -1;for(var i=0; i<trs.length; i++){if($(trs[i]).find('.treeTable-icon').attr('lay-tid') == tpid){treetable.toggleRows($('.layui-table-body .layui-table tr').eq(i).find('.treeTable-icon'));if($(trs[i]).find('.treeTable-icon').attr('lay-tpid') != 0){j=i}break;}}if(j != -1){init(j)}}},toggleRows:function($dom, linkage){treetable.toggleRows($dom, linkage);},getEmptyNum:function(pid, data){treetable.getEmptyNum(pid, data);},checkParam:function(param){treetable.checkParam(param);},expandAll:function(dom){treetable.expandAll(dom);},foldAll:function(dom){treetable.foldAll(dom);}}exports('treetableAsync', treetableAsync);})
初次之外,本组件所有方法属性,均与treetable.js完全相同,请熟读treetable.js的帮助文档。
【附】 非异步加载的treetable.js使用方式
实现layui的树形表格treeTable
1.简介
在layui数据表格之上进行扩展实现。
- 演示地址:https://whvse.gitee.io/treetable-lay/
还有一个BOM表结构的树形表格,树形表格2,欢迎查看。
2.使用方法
2.1.引入模块
下载module/treetable-lay整个文件夹,放在你的项目里面,然后使用模块加载的方式使用:
layui.config({base: 'module/'
}).extend({treetable: 'treetable-lay/treetable'
}).use(['treetable'], function () {var treetable = layui.treetable;});
2.2.渲染表格
<table id="table1" class="layui-table" lay-filter="table1"></table><script>
layui.use(['treetable'], function () {var treetable = layui.treetable;// 渲染表格treetable.render({treeColIndex: 2, // treetable新增参数treeSpid: -1, // treetable新增参数treeIdName: 'd_id', // treetable新增参数treePidName: 'd_pid', // treetable新增参数treeDefaultClose: true, // treetable新增参数treeLinkage: true, // treetable新增参数elem: '#table1',url: 'json/data1.json',cols: [[{type: 'numbers'},{field: 'id', title: 'id'},{field: 'name', title: 'name'},{field: 'sex', title: 'sex'},{field: 'pid', title: 'pid'},]]});
});
</script>
注意: 可以使用url传递数据,也可以使用data传递数据,如果使用url传递数据,参数是where字段, 跟layui数据表格的使用方式一致。
数据格式
总而言之就是以id、pid的形式,不是以subMenus的形式,当然id、pid这两个字段的名称可以自定义:
{"code": 0,"msg": "ok","data": [{"id": 1,"name": "xx","sex": "male","pid": -1},{"id": 2,"name": "xx","sex": "male","pid": 1}]
}
2.3.参数说明
layui数据表格的所有参数都可以用,除此之外treetable新增的参数有:
参数类型是否必填描述treeColIndexint是树形图标显示在第几列treeSpidobject是最上级的父级idtreeIdNamestring否id字段的名称treePidNamestring否pid字段的名称treeDefaultCloseboolean否是否默认折叠treeLinkageboolean否父级展开时是否自动展开所有子级
treeColIndex
树形图标(箭头和文件夹、文件的图标)显示在第几列, 索引值是cols数组的下标。
treeSpid
最上级的父级id,比如你可以规定pid为0或-1的是最顶级的目录。
treeIdName
treetable是以id和pid字段来渲染树形结构的,如果你的数据没有id和pid字段,你可以指定id和pid字段的名称。
treePidName
pid在你的数据字段中的名称。
treeDefaultClose
默认是全部展开的,如果需要默认全部关闭,加上treeDefaultClose:true即可。
treeLinkage
父级展开时是否自动展开所有子级
2.4.注意事项
- 不能使用分页功能,即使写了page:true,也会忽略该参数。
- 不能使用排序功能,不要开启排序功能。
- table.reload()不能实现刷新,请参考demo的刷新。
- 除了文档上写的http://treetable.xxx的方法之外,其他数据表格的方法都使用http://table.xxx。
- 建议删除和修改请求完后台之后请刷新(重新渲染)表格,最好不要使用obj.delete方式删除。
2.5.其他方法
全部展开
treetable.expandAll('#table1');
全部折叠 javascript treetable.foldAll('#table1');
2.6.如何修改图标
通过css来修改图标,content是图标的unicode字符。
修改文件夹图标:
/** 未展开 */
.treeTable-icon .layui-icon-layer:before {content: "e638";
}/** 展开 */
.treeTable-icon.open .layui-icon-layer:before {content: "e638";
}
修改文件图标:
.treeTable-icon .layui-icon-file:before {content: "e621";
}
修改箭头的图标:
/** 未展开 */
.treeTable-icon .layui-icon-triangle-d:before {content: "e623";
}/** 展开 */
.treeTable-icon.open .layui-icon-triangle-d:before {content: "e625";
}
如何获取content:
2.7.截图
树形表格1:
树形表格2:
bootstrap 树形表格渲染慢_layUI之树状表格异步加载组件treetableAsync.js(基于treetable.js)...相关推荐
- SAP Spartacus B2B Org Unit树状结构的加载机制
list.service.ts里的pagination作为出发点: 我在unit list service里设置一个断点,停下来就行了? 事实证明不行,看来要在effect里设置断点才行.在load里 ...
- vue+element实现树状表格的增删改查;使用el-table树形数据与懒加载实现树状表格增删改查
以下代码可以直接复制使用 一.情景: 列表是一个树状表格,可以无限添加下级,以及对列表的某一行进行增删改查(目前查没有写). 原博链接 二.本篇是在原博主的代码基础上添加了部分功能. 功能1: 给树状 ...
- layui树形懒加载_layui树形表格支持非异步和异步加载
layui树形表格支持非异步和异步加载. 使用示例如下: 展开全部 展开一层 折叠全部 折叠一层 layui.config({ base: '/uui/treetable-lay/module/' } ...
- 递归展示树状图/树状表格
递归展示树状图 一.数据库表设计 二.后端java递归代码 三.前端展示树状表格 四.效果展示 一.数据库表设计 这里我们采用自关联的设计,通过id和pid的对应来确认数据的上下级关系 建表语句,我这 ...
- JAVA_树状表格分页(layUI、treeTable.js)
效果图展示(PS:本人很懒,刚开始想在网上随意找一个就用,后来发现好像PHP的不少,JAVA的树状表格大多数跟我开始写的一样没有分页,导致数据量过大后加载过于缓慢被客户吐糟,最后没找到合适的就自己写了 ...
- jQuery制作树状表格
使用jQuery制作树状表格.若需要改为动态页面,所需要修改的js以标注. 采用递归的方法对已展现的部分进行缓存. 表格内容采用html拼接,方便修改. 代码基本最简.没有做封装. <!DOCT ...
- vue-iview异步加载渲染树
<Tree v-show="curType=='archive'" :data="archiveTree" :load-data="loadDa ...
- 浏览器渲染阻塞与优化-详解推迟加载、异步加载。
我认为一个前端工程师是否优秀,很大程度上取决于对前端性能上优化的功力.所以性能优化对前端真的很重要!!! 本文介绍了什么是阻塞.为什么会阻塞?阻塞优化常用的5种方式以及他们的注意事项. 浏览器渲染阻塞 ...
- Jquery Ztree异步加载树
1. 下载jquery的JS文件/ztree的CSS文件和JS文件 https://jquery.com/download/ https://gitee.com/zTree/zTree_v3/tree ...
最新文章
- IDE神器intellij idea的基本使用
- UOJ.386.[UNR #3]鸽子固定器(贪心 链表)
- Mac 技术篇-Geany编辑器批量设置制表符为空格,geany设置默认制表符替换为空格
- oracle导入初始数据死机,Sqoop导入Oracle数据至hive卡死在hive.HiveImport: Connecting to jdbc:hive2不执行...
- 购物车中 商品的选中状态之后的一些业务逻辑操作
- vs2010中使用Nunit测试c#代码结果的正确性
- deepfake ai智能换脸_AI换脸朱茵变杨幂,人工智能时代的“细思恐极”
- 预防 Android Dex 64k Method Size Limit
- 大数据时代的医学公共数据库与数据挖掘技术简介
- ASPUpLoad 文件上传
- 【电蜂优选科普】USB数据线接口有哪些类型呢?
- 内存优化-service优化
- 语音增强算法研究系列笔记 - 语音噪声分类及特点
- forEach() map()— —更新数组 filter()、includes()、find()、findIndex()— —筛选(删除)数组 some()、every()— 判断数组 reduce
- EasyAR涂涂乐代码分析
- 互联网夜高峰,无人应答
- js提示“未结束的字符串常量”
- 将一个字符串逆序输出
- 视频监控方面部分基础知识
- Word中孤行控制解释
热门文章
- JavaWeb无限级分销结构分析
- 【LeetCode】053. Maximum Subarray
- codevs-2235
- tomcat GET 编码疑惑
- VC 6中使用不同调用规范的函数在符号文件里的表示方式
- Redis源码分析之工具类util
- 【漫画】25岁程序员 VS 35岁程序员,塑造自己的不可替代性,才能让自己更有价值 ​...
- 看printk引发的一点思考
- android fragment 底部菜单栏,一句话搞定Android底部导航栏,一键绑定Fragment、ViewPager...
- STM32F7xx —— CAN通信