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基础知识入门级的总结与笔记. 其中介绍 ...
随机推荐
- Linux嵌入式学习-网络配置-ping外网、主机和域名
之前用的nfs挂载的文件系统,今天用yaffs2制作的文件系统并写入到nandflash中.但是网络却无法使用了. 首先,我们配置网卡. ifconfig eth0 192.168.1.230 bro ...
- webpack相关的问题
随着现代前端开发的复杂度和规模越来越庞大,已经不能抛开工程化来独立开发了,如react的jsx代码必须编译后才能在浏览器中使用:又如sass和less的代码浏览器也是不支持的. 而如果摒弃了这些开发框 ...
- 自动化运维工具-Ansible之6-Jinja2模板
自动化运维工具-Ansible之6-Jinja2模板 目录 自动化运维工具-Ansible之6-Jinja2模板 Ansible Jinja2模板概述 Ansible Jinja2模板使用 Ansib ...
- Codefroces 1328E Tree Querie(dfs序)
Codefroces 1328E Tree Querie 题目 给出一棵1为根,n个节点的树,每次询问\(k_i\) 个节点,问是否存在这样一条路径: 从根出发,且每个节点在这条路径上或者距离路径的距 ...
- 【C++】《C++ Primer 》第八章
第八章 IO库 一.IO类 1. 标准库定义的IO类型 头文件 作用 类型 iostream 从标准流中读写数据 istream, wistream 从流读取数据 ostream, wostream ...
- 关于使用jq跨域请求的实现
今天算是把js跨域请求搞定了,想实现跨越,首先想到的是JSONP,但是具体去做的时候,发现有很多坑.在本地测试好之后又发现目标网站做了https证书认证,也就是实用的jsonp请求地址必须是https ...
- linux网关服务器
问题 多台服务器在内网网段,其中只有一台有公网ip可以上外网,需要让所有服务器都能连接外网 解决思路 使用路由转发的方式,将拥有公网ip的服务器搭建为网关服务器,即作为统一的公网出口 所谓转发即当主机 ...
- java锁的对象引用
当访问共享的可变数据时,通常需要同步.一种避免使用同步的方式就是不共享数据. 如果数据仅在单线程内访问,就不需要同步,这种技术称为"线程封闭",它是实现线程安全性最简单方式之一. ...
- ctfhub技能树—信息泄露—git泄露—Log
什么是git泄露? 当前大量开发人员使用git进行版本控制,对站点自动部署.如果配置不当,可能会将.git文件夹直接部署到线上环境.这就引起了git泄露漏洞. 打开靶机环境 查看网页内容 使用dirs ...
- Kubernetes 开船记-脚踏两只船:用 master 服务器镜像克隆出新集群
自从2020年2月23日 园子全站登船 之后,我们一边感叹"不上船不知道,一上船吓一跳" -- kubernetes 比 docker swarm 强大太多,一边有一个杞人忧天的担 ...