需求:点击父级菜单展示子级菜单

难点:某个父级菜单下面有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扩展组件的更多相关文章

  1. easyui基于 layui.laydate日期扩展组件

    本人后端开发码农一个,公司前端忙的一逼,项目使用的是easyui组件,其自带的datebox组件使用起来非常不爽,主要表现在 1.自定义显示格式很麻烦 2.选择年份和月份用户体验也不好 网上有关于和M ...

  2. easyUI扩展组件

    $.parser.plugins.push("aa"); //注册扩展组件 $.fn.aa= function (options, param) {//定义扩展组件 //当opti ...

  3. MEF(Managed Extensibility Framework)有选择性地使用扩展组件

    在"MEF(Managed Extensibility Framework)使用全部扩展组件"中,客户端应用程序调用了所有的扩展组件,而且如果有新的扩展组件加入,必须先关闭程序,再 ...

  4. MEF(Managed Extensibility Framework)使用全部扩展组件

    MEF(Managed Extensibility Framework),所在命名空间是System.ComponentModel.Composition.dll.简单来说,MEF是将符合约定(一般是 ...

  5. 【Android】10.1 扩展组件库和其他视图--本章示例主界面

    分类:C#.Android.VS2015: 创建日期:2016-02-18 1.主界面运行截图 2.MainActivity.cs文件中对应的代码 chItems.Add(new Chapter() ...

  6. Layui 弹出层组件——layer的模块化开发实例应用

    Layui 弹出层组件——layer的模块化开发实例应用 1.首先在package.json中引入layer组件依赖 2.在源码中应用这个依赖 3.在源码中编写代码应用此组件 4.效果验证:点击日历上 ...

  7. layui上传文件组件(前后端代码实现)

    我个人博客系统上传特色图片功能就是用layui上传文件组件做的.另外采用某个生态框架,尽量都统一用该生态框架对应的解决方案,因为这样一来,有这么几个好处?1.统一而不杂糅,有利于制定相应的编码规范,方 ...

  8. 微信小程序使用weui扩展组件踩坑

    最近在做微信小程序,引入weui的时候踩坑了好久,这里记录一下遇到的问题. 微信官方文档给了两种weui引入方式: 通过 useExtendedLib 扩展库 的方式引入,这种方式引入的组件将不会计入 ...

  9. Vue基础语法-数据绑定、事件处理和扩展组件等知识详解(案例分析,简单易懂,附源码)

    前言: 本篇文章主要讲解了Vue实例对象的创建.常用内置指令的使用.自定义组件的创建.生命周期(钩子函数)等.以及个人的心得体会,汇集成本篇文章,作为自己对Vue基础知识入门级的总结与笔记. 其中介绍 ...

随机推荐

  1. FeignClient spi 调用 短路异常 & 线程池配置

    FeignClient spi 调用 短路异常 & 线程池配置 默认配置见:HystrixThreadPoolProperties 线程池对象:com.netflix.hystrix.Hyst ...

  2. ArrayList的删除姿势你都知道了吗

    引言 前几天有个读者由于看了<ArrayList哪种遍历效率最好,你真的弄明白了吗?>问了个问题普通for循环ArrayList为什么不能删除连续重复的两个元素?其实这个描述是不正确的.正 ...

  3. 【探索之路】机器人篇(5)-Gazebo物理仿真环境搭建_让机器人运动起来

    如果完成了前两步,那么其实我们已经可以去连接我们的现实中的机器人了. 但是,做机器人所需要的材料还没有到,所以我们这里先在电脑平台上仿真一下.这里我们用到的就算gazebo物理仿真环境,他能很好的和R ...

  4. SpringBoot 2.X以上集成redis

    在网上看到的教程和资料大多数都是2.X以下的版本.使用起来会出现各种问题,通过百度,最后终于弄好了. 2.x以上使用的是 spring-boot-starter-data-redis 2.x一下使用的 ...

  5. 粉丝投稿!从2月份的面试被拒到如今的阿里P7,说一说自己学java以来的经验!

    个人近期面试情况 今年二月以来,我的面试除了一个用友的,基本其他都被毙了,可以说是非常残酷的.其中有很多自己觉得还面的不错的岗位,比如百度.跟谁学.好未来等公司.说实话,打击比较大. 情况基本上是从三 ...

  6. java线程与内核线程的关系,及怎么定义ThreadPoolExecutor相关参数

    p.p1 { margin: 0; font: 12px Menlo } p.p1 { margin: 0; font: 12px Menlo } p.p2 { margin: 0; font: 12 ...

  7. Android ADB原理及常用命令

    Android调试桥(ADB, Android Debug Bridge)是一个Android命令行工具,包含在SDK 平台工具包中,adb可以用于连接Android设备,或者模拟器,实现对设备的控制 ...

  8. idea生成UML

    原文链接http://zhhll.icu/2020/12/18/idea/%E7%94%9F%E6%88%90UML/ 使用idea直接生成UML类图 然后点击所要生成的类即可生成 由于本身的博客百度 ...

  9. 浅谈localStorage的使用场景和优劣势,以及sessionStorage和cookie

    一.localStorage,sessionStorage,cookie的简单介绍 localStorage:仅在客户端存储不参与服务器通信,存储大小一般为5M,如果不是人为清除,那么即使是关闭浏览器 ...

  10. tensorflow安装使用过程错误及解决方法

    tensorflow2.x 使用过程中常见错误(持续更新) 安装配置,使用tensorflow训练模型,转换为tflite模型,并部署与移动端过程中,虽然不难,但是也常出现一些莫名其妙的问题,下面简单 ...