ztree在onCheck()方法中防止因触发联动关系导致页面多次渲染而卡死的问题
这几天在项目中遇到了要使用树形选择框, 而且要求比较复杂,具体叙述如下:
首先是有个选择框,左边选择是适用的商品,右边显示已经选择的商品.也就是说,左边每次勾选操作,都要触发一个事件去刷新右边的页面, 而且,左边商品如果选择大类,则右边显示大类,其下小类都不显示
也就是说有父子联动的关系. 刚开始的时候, 选择了使用bootStrap的tree_view这个插件,一开始还好,基本成型,后来测试时才发现问题,,当数据量很大的时候,,这个插件用起来很卡很卡,,而且又加了个带搜索功能,这个插件就显得有点鸡肋,这时才发现了ztree.
ztree虽然没有tree_view界面好看,但是其拥有强大的api,和渲染速度,,比前者好用多了.后面在数据渲染的时候遇到了一个问题,当时设置了父子级关联,然后再oncheck里面刷新右侧的显示界面.刚开始没啥问题,,后面当商品加到8000个的时候,,之前的问题又出现了,当我点击父级的时候,页面直接无响应.打上断点跟着,才发现ztree内部会由于关联关系,多次触发onchek事件,导致页面直接卡死.苦思良久都没得办法..直到无意中看到一个方法
beforeCheck,对就是这个方法,在oncheck触发之前的回调,,于是我想到了办法
1 var temp=""; 2 var setting = { 3 check: { 4 enable: true, 5 autoCheckTrigger: true 6 }, 7 data: { 8 simpleData: { 9 enable: true 10 } 11 }, 12 callback: { 13 onCheck: zTreeOnCheck, 14 beforeCheck: zTreeBeforeCheck 15 } 16 }; 17 18 function zTreeBeforeCheck(treeId, treeNode){ 19 temp=treeNode; 20 } 21 function zTreeOnCheck(event, treeId, treeNode) { 22 //debugger 23 if(treeNode.name!=temp.name){ 24 return; 25 } 26 refresh(treeNode); 27 }
用一个temp去存储将要触发oncheck()的节点对象, 然后再在oncheck()方法中判断触发这个方法的是不是你当前所勾选的节点,如果不是就直接pass,这样一来,下面的刷新页面方法就不会因为父子联动而多次触发了,
页面的响应速度也是杠杠的.现在真的发现,ztree真的是个强大的工具,速度快,功能全,有很多你想不到的方法.
最后附上ztree地址:http://www.treejs.cn/v3/api.php
转载于:https://www.cnblogs.com/xQlover/p/11215404.html
ztree在onCheck()方法中防止因触发联动关系导致页面多次渲染而卡死的问题相关推荐
- js初化加载页面时ajax会调用两次的原因_在前端开发中,有哪些因素会导致页面卡顿
前端开发不像后端那样,很少出现有大量算法的场景,但是前端性能也是需要优化的.好的代码是保证网页平稳高性能运行的基础,结合以往开发中遇到的场景,本文对前端网页卡顿的原因进行了梳理和分析,并给出了对应的解 ...
- 不要在viewWillDisappear:方法中移除通知
都知道viewWillAppear:方法是在控制器的view将要显示的时候调用的,而viewWillDisappear:方法是在控制器的view将要隐藏的时候调用. 这看上去没什么问题,键盘的显示和隐 ...
- 尽量不要在viewWillDisappear:方法中移除通知
本文转自CocoaChina 在了解控制器的生命周期之后,我们都知道viewWillAppear:方法是在控制器的view将要显示的时候调用的,而viewWillDisappear:方法是在控制器的v ...
- ztree autoCheckTrigger=true时 子节点复选框选中 导致父节点onCheck触发多次问题处理
ztree实现复选框功能,并且子节点选中时,父节点自动选中,子节点取消选中(若所有子节点都没有选中)则父节点也会自动取消选中,check配置如下: check: {enable: true,chk ...
- Spring中的AOP在Advice方法中获取目标方法的参
参考:http://my.oschina.net/itblog/blog/211693 http://christang.iteye.com/blog/2037919 http://blog.csdn ...
- Hystrix降级逻辑中如何获取触发的异常?
通过之前Spring Cloud系列教程中的<Spring Cloud构建微服务架构:服务容错保护(Hystrix服务降级)>一文,我们已经知道如何通过Hystrix来保护自己的服务不被外 ...
- Hystrix降级逻辑中如何获取触发的异常
通过之前Spring Cloud系列教程中的<Spring Cloud构建微服务架构:服务容错保护(Hystrix服务降级)>一文,我们已经知道如何通过Hystrix来保护自己的服务不被外 ...
- Spring中的AOP——在Advice方法中获取目标方法的参数(转)
获取目标方法的信息 访问目标方法最简单的做法是定义增强处理方法时,将第一个参数定义为JoinPoint类型,当该增强处理方法被调用时,该JoinPoint参数就代表了织入增强处理的连接点.JoinPo ...
- java命令行参数工具_Java方法中的参数太多,第8部分:工具
java命令行参数工具 在我的系列文章的前七篇文章中,有关处理Java方法中期望的参数过多的内容集中在减少方法或构造函数期望的参数数量的替代方法上. 在本系列的第八篇文章中,我将介绍一些工具,这些工具 ...
最新文章
- Alpha阶段事后分析
- linux无效家目录,Linux 家目录下文件夹消失?
- 倒影问题(reflect:below)
- 新安装和已安装nginx如何添加未编译安装模块/补丁
- 徐波 博士 计算机,徐波教授:医工联合促进智能肿瘤学发展——探秘肿瘤精准治疗中的AI技术...
- w3c html5 客户端缓存数据格式,Html5应用程序缓存(Cache manifest)
- linux中部分命令及快捷键
- python之堡垒机(第九天)
- raster | 多图层栅格对象的一些处理方法
- Illustrator 教程,如何在 Illustrator 中创建颜色渐变?
- 【WP开发】JSON数据的读与写
- 编写安全代码:小心使用浮点数
- Mysql 数据库操作系统 官网 安装教程
- C# RSA2048 公钥加密,私钥解密
- 【游戏客户端】制作节奏大师Like音游(上)
- XINS Web服务框架
- 【微信朋友圈,如何测】
- Golang--Go语言 五百行后台代码实现一简约的个人博客网站-TinyBlog
- 一直无缝滚动的轮播图模板
- 20135306-信息安全系统设计基础第一周学习总结
热门文章
- c语言输出随机数switch,在Switch语句案例中使用随机数
- java absolute_Java Path isAbsolute()用法及代码示例
- mysql表空间_浅谈mysql中各种表空间(tablespaces)的概念
- neo4j 约束(CONSTRAINT)
- D3 scaleOrdinal
- 16 The Terminal and Job Control
- VMware ESXi 环境备份与还原处理案例
- 【华为解决方案】 华为云架构解决方案
- VMware vCenter Server Appliance Photon OS安全修补程序
- outlook 2013 卡在正在加载配置文件