关于树节点巨多时获取用户选中（可多选）节点的优化

前端开发时，单从性能上考虑，对dom的遍历越少性能越好，最好是能不去遍历dom树；下面事例中用户可以多选，一个没有保存用户选中的项，一个保存了用户选中的项，下面看实例代码：

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);// 给每个文件一个唯一的idif(!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，这样代码会少很多，但原理是一样的。

转载于:https://www.cnblogs.com/cqiliang/archive/2013/06/05/3120097.html

关于树节点巨多时获取用户选中（可多选）节点的优化相关推荐

c# webbrowser 获取用户选中文字
c# webbrowser 获取用户选中文字原文:c# webbrowser 获取用户选中文字最近一直被一个问题困扰,有一个文本框,一个webbrowser控件,一个上下文菜单, 用户用鼠标左 ...
vue el-tree 同时向后台传递选中和半选节点数据 (回显数据勾选问题已解决)
vue el-tree 同时向后台传递选中和半选节点数据 (回显数据勾选问题已解决) 参考文章: (1)vue el-tree 同时向后台传递选中和半选节点数据 (回显数据勾选问题已解决) (2)ht ...
jquery获取所有选中的复选框
jquery获取所有选中的复选框提示:在列表中总有一些需求会在表头用到复选框进行批量操作,在此我介绍一下怎么获取到已选中的复选框值示例:如下所示,获取到数组之后1,通过ajax传给后台进行处理就好 ...
微信小程序-侧边栏-获取用户选中的值
侧边栏是APP中很常见的一种功能,最近公司的微信小程序项目刚好需要侧边栏这个功能,抱着能自己写就自己写的工作态度,所以决定用基础一些技术来完成此功能. 一.WXML <view class='b ...
Jquery获取被选中的复选框的value值
以下为使用JQuery获取input checkbox被选中的值代码: <html><head><meta charset="gbk">< ...
js获取所有选中的复选框的值
//需要引入jquery或easyui的js var serialNos = $("input[name='serialNo']:checked").map(function () ...
获取所有选中的复选框
$("input[class='chboxse']:checked")
js获取用户在input标签中输入的值，然后改变html下各个标签的值或者属性
2019独角兽企业重金招聘Python工程师标准>>> <!DOCTYPE html> <html lang="en"> <head ...
jQuery操作复选框checkbox技巧总结 ---- 设置选中、取消选中、获取被选中的值、判断是否选中等
jQuery操作复选框checkbox技巧总结 --- 设置选中.取消选中.获取被选中的值.判断是否选中等一.checked属性定义先了解下input标签的checked属性: 1.HTML &l ...
第十二讲 dom对象（DOM对象、document对象的常用方法、节点、查找结点、查看/修改/删除属性节点、创建和增加节点）
一.查看节点 getElementById( ) 元素的ID名称来访问,返回对拥有指定id的第一个对象的引用 getElementsByName( ) 按元素的name名称来访问,返回带有指定名称的 ...

关于树节点巨多时获取用户选中（可多选）节点的优化

关于树节点巨多时获取用户选中（可多选）节点的优化相关推荐

最新文章

热门文章