关于树节点巨多时获取用户选中(可多选)节点的优化
2013-06-05 22:50
330 查看
前端开发时,单从性能上考虑,对dom的遍历越少性能越好,最好是能不去遍历dom树;下面事例中用户可以多选,一个没有保存用户选中的项,一个保存了用户选中的项,下面看实例代码:
html:
优化前的javascript:
优化后javascript:
说明:看起来优化后的代码多了,但是如果html嵌套的dom节点很多的话(比如一个企业的联系人树形结构,可能有上万个),要获取用户已经选中的项时,那么优化后的javascript的性能将充分体现出来,优化前只能通过jQuery("li.selected")获取到用户选中项(意味着javascript要在浩瀚的联系人树中查找),但优化后的代码只需要通过self.selectedFile即可获取选中项,根本就不用去遍历dom树。如果是单选的话就不需要guid了,从而不需要给元素加guid,这样代码会少很多,但原理是一样的。
html:
<ul> <li> <ul> <li> ... </li> </ul> </li> </ul>
优化前的javascript:
jQuery("body").on("click","li",function(){ currentItem= jQuery(this); // 用户可以取消选中状态 currentItem.toggleClass("selected"); });
优化后javascript:
var self = {guid:1,selectedFile:{}}; jQuery("body").on("click","li",function(){ currentItem= jQuery(this); // 给每个文件一个唯一的id if(!currentItem.data("id")){ currentItem.data("id",self.guid++); } // 用户可以取消选中状态 currentItem.toggleClass("selected"); if(currentItem.hasClass("selected")){ // 选中文件保存到选中对象列表中 self.selectedFile[currentItem.data("id")] = currentItem; } else{ // 否则从选中对象列表中删除 delete self.selectedFile[currentItem.data("id")]; } });
说明:看起来优化后的代码多了,但是如果html嵌套的dom节点很多的话(比如一个企业的联系人树形结构,可能有上万个),要获取用户已经选中的项时,那么优化后的javascript的性能将充分体现出来,优化前只能通过jQuery("li.selected")获取到用户选中项(意味着javascript要在浩瀚的联系人树中查找),但优化后的代码只需要通过self.selectedFile即可获取选中项,根本就不用去遍历dom树。如果是单选的话就不需要guid了,从而不需要给元素加guid,这样代码会少很多,但原理是一样的。
相关文章推荐
- 关于页面上如何获取用户选中的多个checkbox所传递的值
- zTree实现获取当前选中的第一个节点在同级节点中的序号
- 关于UIHelper的两个自动递归获取节点的函数
- 关于BCB 的Treeview 选中节点高亮有关问题
- 关于Spring Security 3获取用户信息的问题
- jstree的一个坑 关于恢复选中的节点
- 关于.net中获取用户控件的值的问题
- asp.net 获取TreeView中第一个选中的节点
- ztree获取当前选中节点子节点id集合的方法(转载)
- [总结]关于Winform下,获取Treeview中CheckBox选中项的技巧
- easyui的tree节点的获取和选中
- EasyUI 获取未全部选中子节点的父节点
- [Flex] 组件Tree系列 —— 阻止用户点击选中Tree中分支节点
- zTree实现获取当前选中的第一个节点在同级节点中的序号
- 关于程序进入包含EditText控件的界面会自动获取焦点并弹出软键盘影响用户体验的问题
- 关于Android中listView的复用及优化问题详解,应用开发者应多多使用,是app更顺畅,让用户更好体验!
- js获取TreeView控件选中节点的Text和Value值的方法
- 关于html5获取用户地理位置
- 后台获取ZTREE选中节点的方法
- easyUI 多选tree点击节点即选中的方法