bootstrap 树形表格渲染慢_layUI之树状表格异步加载组件treetableAsync.js(基于treetable.js)...

2c38225c4f4cae01f2c66990766c723f.png

概述

后台框架中使用树状表格是非常常用的操作,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:

dd7bdc4bf07e05170ab78de6d4e73821.png

2.7.截图

树形表格1:

3b4380fd291c6c87b9f13af8b35f7dec.png

树形表格2:

57ca64a428b25bc88470f68ce17b88cc.png

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/475401.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

EchoServer

using System;using System.Net.Sockets;using System.IO;using System.Net; namespace ConsoleApplication1{ class EchoServer { public static void Main11() { // TcpListener监听端口1234 IPAddress ipAd IPAddress.Parse(&qu…

hive - 解析 json

内置函数&#xff1a;get_json_object(json串,解析路径) 解析路径说明&#xff1a; $ :跟对象 . :子对象 [] :数组下标 * :所有 举例&#xff1a; 数据样例&#xff1a; {"movie":"1190","rate":"4.8","timestamp":…

[scikit-learn 机器学习] 6. 逻辑回归

文章目录1. 逻辑回归二分类2. 垃圾邮件过滤2.1 性能指标2.2 准确率2.3 精准率、召回率2.4 F1值2.5 ROC、AUC3. 网格搜索调参4. 多类别分类5. 多标签分类5.1 多标签分类性能指标本文为 scikit-learn机器学习&#xff08;第2版&#xff09;学习笔记逻辑回归常用于分类任务 1. 逻…

libsvm回归参数寻优cgp_【lightgbm/xgboost/nn代码整理二】xgboost做二分类,多分类以及回归任务...

1.简介该部分是代码整理的第二部分&#xff0c;为了方便一些初学者调试代码&#xff0c;作者已将该部分代码打包成一个工程文件&#xff0c;包含简单的数据处理、xgboost配置、五折交叉训练和模型特征重要性打印四个部分。数据处理部分参考&#xff1a;代码整理一&#xff0c;这…

hive - 可优化的 10 个地方及详解

1.合理选择排序 排序算法比较耗资源&#xff0c;应根据业务需要选择 order by :全局排序&#xff0c;大数据集会消耗太过漫长的时间sort by&#xff1a;局部排序&#xff0c;只能保证每个reducer的输出数据都是有序的distribute by&#xff1a;分桶不排序&#xff0c;控制map…

[scikit-learn 机器学习] 7. 朴素贝叶斯

文章目录1. 朴素贝叶斯2. NB 与 逻辑回归对比本文为 scikit-learn机器学习&#xff08;第2版&#xff09;学习笔记相关知识参考&#xff1a;《统计学习方法》朴素贝叶斯法&#xff08;Naive Bayes&#xff0c;NB&#xff09; 1. 朴素贝叶斯 通过最大概率来预测类&#xff1a…

堕落的时候看看——清华大学老师的一席话

一双鞋&#xff0c;耐克的6百多&#xff1b;李宁的4百多&#xff1b;特步的3百多&#xff1b;361的2百多&#xff1b;所以&#xff0c;你毕业于一个什么样的大学很重要。 一双鞋&#xff0c;在地摊不过几十元&#xff0c;到了商场、专卖店&#xff0c;会涨到一百甚至几百。所以…

塔菲克蓝牙适配器驱动_小身材,大功能,biaze毕亚兹USB蓝牙适配器开箱体验

在日常生活中&#xff0c;我们平时使用的台式电脑或是笔记本电脑&#xff0c;想要传输数据或者音频的时候&#xff0c;都是需要借助数据传输线或是U盘等传输设备&#xff0c;使用过程可想而知&#xff0c;有点麻烦。我们都知道&#xff0c;手机是有蓝牙传输功能的&#xff0c;只…

MySQL - cast()函数

日常建表习惯用 create tabel tb_name as select......&#xff0c;这种建表方式的其中一个缺点就是&#xff1a;系统会根据查询出的字段&#xff0c;定义字段类型。有时候会把 %Y-%m-%d 格式的日期字段定义为 varchar 。建模的时候苦不堪言。 那么怎么在建表过程中自己定义每…

HDU1003——MAX SUM

简单DP&#xff0c;状态转移公式&#xff1a;num[j].data max{num[j].data, num[j].datanum[j-1].data}&#xff0c;也就是保证加上前一个数不失自己的值减小。 View Code #include <stdio.h>#define N 100010#define inf 9999999struct _num{int data;int pre;int nex…

[scikit-learn 机器学习] 8. 非线性分类和决策树

文章目录1. 特征选择标准2. 网页广告预测2.1 数量处理2.2 网格搜索模型参数3. 决策树优缺点本文为 scikit-learn机器学习&#xff08;第2版&#xff09;学习笔记相关知识&#xff1a;《统计学习方法》决策树&#xff08;Decision Tree&#xff0c;DT&#xff09; 1. 特征选择…

智慧新泰时空大数据与云平台_智慧警务大数据云平台开发情报研判系统解决方案...

智慧公安作为公安信息化开展到高级阶段的一种警务形态&#xff0c;“智慧公安”主要采用物联网、云计算、无线通讯、智能动态感知分析等新一代信息技术,将公安工作IT根底设备与物理设备、人际环境等高度交融,以提供智能化公安决策与效劳。智慧警务大数据云平台开发情报研判系统…

RGB颜色查询对照表#FFFFFF

大致是下图这样的&#xff0c;有需要的可以点击下面的连接复制使用&#xff1a; https://www.114la.com/other/rgb.htm

ikbc机械键盘打字出现重复_超小无线机械键盘,绝佳移动打字体验

NuType筹资信息产品名称NuType上线平台Kickstarter发起团队NUPHY发起地区中国香港目标金额80,000HKD筹集金额1,301,212HKD完全进度1,627%支持人数1,612最低价格697HKD上线时间2019/11/13-2019/12/28创次方/制表时间&#xff1a;2019年12月28日文/大智笔电键盘的打字体验远不及桌…

英语语法之形容词从句:定语从句

形容词从句:定语从句 限制和非限制性定语从句 ----------------------------------------------------------------------------- 限制和非限制性定语从句: 限制性定语从句是名词词组不可缺少的一个组成部分,去掉了会造成病句或意义不明确; 非限制性定语从句属于补充说明性质…

MySQL - 定时任务(每天凌晨1点、每小时、每分钟、某一时间点)

常用的一定要写在前面 # 从2019-10-11开始&#xff0c;每天的00:30:00执行定时任务 ON SCHEDULE EVERY 1 DAY STARTS 2019-10-11 00:30:00 # 每天的凌晨1点执行定时任务 ON SCHEDULE EVERY 1 DAY STARTS DATE_ADD(DATE_ADD(CURDATE(), INTERVAL 1 DAY), INTERVAL 1 HOUR)# 特…

数据库中的null和c#中的null

再向数据库中插入数据时&#xff0c;如果插入c#中的null会报错&#xff0c;需要转换成SQl中的DBNull.Value public static object ToDbNull(object value) { if (value null || value.ToString() DateTime.MinValue.ToString()) { …

极光无限渗透测试面经_认识工业以太网及线缆测试

工业以太网由于其固有的可靠性、高性能和互操作性&#xff0c;已经渗透到工厂车间&#xff0c;成为自动化和控制系统的首选通信协议。近年&#xff0c;工业以太网的市场份额已经超过了传统的现场总线协议&#xff0c;总线协议通常需要多个独立和专有的布线设施。为了满足工业环…

mysql_根据身份证号识别性别、年龄、所在省份

1.性别&#xff1a; IF(mod(SUBSTR(c.reciver_idcard_num,17,1),2),man,woman) 性别, 2. 年龄&#xff1a; CASE WHEN c.reciver_idcard_num <> THEN (YEAR(CURDATE()) - SUBSTRING(c.reciver_idcard_num,7,4)) ELSE NULL END AS 年龄, 3. 所属省份&#xff1a; CAS…

LeetCode 286. 墙与门(BFS)

文章目录1. 题目2. 解题2.1 BFS 超时解2.2 从门开始逆向BFS1. 题目 你被给定一个 m n 的二维网格&#xff0c;网格中有以下三种可能的初始化值&#xff1a; -1 表示墙或是障碍物0 表示一扇门INF 无限表示一个空的房间。然后&#xff0c;我们用 231 - 1 2147483647 代表 INF…