layui的tabletree扩展组件
需求:点击父级菜单展示子级菜单
难点:某个父级菜单下面有5000条子级菜单(有点坑),当我想把这5000条子级菜单塞到父级菜单下面的时候完蛋了,页面卡死了...
解决:tabletree这组件我发现用的人是真的少,没办法只能硬着头皮去看这么low的组件js源码。下面是解决步骤,希望能帮助到和我遇到一样困惑的小盆友。
步骤一:下图一是我页面上的代码,思路其实就是先判断子级菜单的数量,如果子级菜单少于200条的话就直接用组件的obj.async(数组);把子级菜单数组塞给父级菜单,这个方法会自动局部刷新(还是比较好用的,layui官方文档没有讲到这个方法,自己开源码找到的,真坑);如果子级菜单多于200条的话就把查询到的子级菜单按200条一批分批塞给父级菜单,这里还有个小问题,我这一批塞成功后这个obj.async()方法没有返回值,日了狗了还得看图二tableTree.js源码,发现每当这个obj.async()方法执行完后能获取obj.data.treeList,这样就有实现思路了,我先定义了一个临时变量dataList = [],当obj.async()方法执行完一批后给dataList = obj.data.treeList赋值,判断dataList是否大于0,大于0说明这批数据塞成功了,然后dataList = []赋值空,去塞下一批数据。
图一:(我本地页面)

图2:(tableTree源码)

步骤二:功能是实现了,问题又来了,5000条数据要耗时十几分钟去塞,什么鬼,我代码没有这么烂啊,还得看源码,发现在塞数据的时候这个组件会自动去重,就下图我标出来的方法,因为我数据后台查询的时候已经去重,所以果断注释掉了这个方法,效率大大提高了,只能这样先凑合用了

结论:论技术选型和选择组件的重要性,个人感觉一个好的选择大于一切,如果是我的话绝对不会选择tabletree这个组件,这里是没办法有强制要求...
layui的tabletree扩展组件的更多相关文章
- easyui基于 layui.laydate日期扩展组件
本人后端开发码农一个,公司前端忙的一逼,项目使用的是easyui组件,其自带的datebox组件使用起来非常不爽,主要表现在 1.自定义显示格式很麻烦 2.选择年份和月份用户体验也不好 网上有关于和M ...
- easyUI扩展组件
$.parser.plugins.push("aa"); //注册扩展组件 $.fn.aa= function (options, param) {//定义扩展组件 //当opti ...
- MEF(Managed Extensibility Framework)有选择性地使用扩展组件
在"MEF(Managed Extensibility Framework)使用全部扩展组件"中,客户端应用程序调用了所有的扩展组件,而且如果有新的扩展组件加入,必须先关闭程序,再 ...
- MEF(Managed Extensibility Framework)使用全部扩展组件
MEF(Managed Extensibility Framework),所在命名空间是System.ComponentModel.Composition.dll.简单来说,MEF是将符合约定(一般是 ...
- 【Android】10.1 扩展组件库和其他视图--本章示例主界面
分类:C#.Android.VS2015: 创建日期:2016-02-18 1.主界面运行截图 2.MainActivity.cs文件中对应的代码 chItems.Add(new Chapter() ...
- Layui 弹出层组件——layer的模块化开发实例应用
Layui 弹出层组件——layer的模块化开发实例应用 1.首先在package.json中引入layer组件依赖 2.在源码中应用这个依赖 3.在源码中编写代码应用此组件 4.效果验证:点击日历上 ...
- layui上传文件组件(前后端代码实现)
我个人博客系统上传特色图片功能就是用layui上传文件组件做的.另外采用某个生态框架,尽量都统一用该生态框架对应的解决方案,因为这样一来,有这么几个好处?1.统一而不杂糅,有利于制定相应的编码规范,方 ...
- 微信小程序使用weui扩展组件踩坑
最近在做微信小程序,引入weui的时候踩坑了好久,这里记录一下遇到的问题. 微信官方文档给了两种weui引入方式: 通过 useExtendedLib 扩展库 的方式引入,这种方式引入的组件将不会计入 ...
- Vue基础语法-数据绑定、事件处理和扩展组件等知识详解(案例分析,简单易懂,附源码)
前言: 本篇文章主要讲解了Vue实例对象的创建.常用内置指令的使用.自定义组件的创建.生命周期(钩子函数)等.以及个人的心得体会,汇集成本篇文章,作为自己对Vue基础知识入门级的总结与笔记. 其中介绍 ...
随机推荐
- JAR-使用JAVA命令编译打包一个可执行jar包
一.开发一个演示项目 项目源代码开发 项目名称叫jar-package-example(其实只是一个文件夹, 用以将演示的所有文件夹和文件存放在其中, 没啥其它作用), 为了方便, 后文统一叫jar- ...
- Elasticsearch索引生命周期管理方案
一.前言 在 Elasticsearch 的日常中,有很多如存储 系统日志.行为数据等方面的应用场景,这些场景的特点是数据量非常大,并且随着时间的增长 索引 的数量也会持续增长,然而这些场景基本上只有 ...
- 开源编解码项目FFmpeg迎来20周年生日 凭一己之力养活全球无数播放器!
近日,开源编解码库项目FFmpeg迎来20周年生日. 2000.12.20-2020.12.20 可能很多人对于FFmpeg不是特别了解,那么以下几个名字是否大家或多或少都用过呢? 暴风影音.PotP ...
- CI持续集成理论知识
(1)什么是CI What is CI? CI就是持续集成,持续集成是一种软件开发实践,即团队开发成员经常集成他们的工作,通常每个成员每天至少集成一次,也就意味着每天可能会发生多次集成.每次集成都通过 ...
- WebService 适用场合
适用场合 1.跨防火墙通信 如果应用程序有成千上万的用户,而且分布在世界各地,那么客户端和服务器之间的通信将是一个棘手的问题.因为客户端和服务器之间通常会有防火墙或者代理服 务器.在这种情况下,使用D ...
- spark提交至yarn的的动态资源分配
1.为什么开启动态资源分配 ⽤户提交Spark应⽤到Yarn上时,可以通过spark-submit的num-executors参数显示地指定executor 个数,随后,ApplicationMast ...
- 动态方法拦截(AOP)的N种解决方案
AOP的本质是方法拦截(将针对目标方法调用劫持下来,进而执行执行的操作),置于方法拦截的实现方案,不外乎两种代码注入类型,即编译时的静态注入和运行时的动态注入,本篇文章列出了几种常用的动态注入方案.这 ...
- ContactCollections Design Report
通讯录的设计采用了分层+接口+面向对象+文件操作+方法实现 分三层实现,共使用了四个包,实现业务数据访问和界面的分离 contactaccess包实现对文件的访问 包括数据访问 ...
- Faceto_object_programdesign
一面向对象程序设计思想 1 和面向过程关注点不同 过程: 程序执行流程和逻辑 (局部功能) 对象: 程序中的对象 (程序结构) 2 对象 现实世界中的实体和事物 可以看成是一种具有自身属性和功能的构件 ...
- keycloak集群化的思考
目录 简介 keycloak中的集群 load balancing负载均衡 暴露客户端IP地址 sticky sessions 和 非sticky sessions shared databases ...