javascript-TreeView父子联动效果保持节点状态一致

2024-09-06 12:41:49

字体：大中小

来源：转载

供稿：网友

我们大部分都用过TreeView控件，对这个控件的评价也是各式各样的，但是我觉得不论如何它是一个免费的开源的控件，所以我还是在用它。在刚接触ASP.NET的时候，记得需要做一个分配权限的权限树，当时只知道有这个树，经过一天的研究对其服务器端的行为基本以及搞清楚了，但是由于当时的js水平有限，所以对客户端的代码很畏惧，基本没有看过。
当时有这样一个要求：如果一个节点被选中则该节点的所有子节点都要选中，如果该节点的所有子节点取消选择则该节点也要取消选择（节点一致性），相反一样。
还有一个要求就是：如果可以实现三态树则更好（这个有点难，本文中不予讨论）。本文将详细介绍前面要求1。
        首先我们要庆幸微软的这个TreeView控件是开源的，不论是客户端代码还是服务器端代码您都可以轻松获得，可以去微软的网站上下载。在网上也见过一些讲述该问题的文章，他们大多是使用一个TreeView之外的js实现，我个人认为从面向对象的观点，该功能属于TreeView，所以没有理由将它分离出去，因此今天我将修改TreeView.htc来实现上面的功能。要想获得该文件（TreeView.htc）可以去微软的网站上下载之。
说实在的该功能曾经也困扰了我很久，一直想解决这个问题，但是一直没有时间来研究TreeView.htc中的代码，今天终于下决心搞定它。
        我们知道在TreeView的oncheck中需要激发该事件处理函数，这个函数很容易找到，可以在TreeView生成的客户度脚本中找到，代码片断如下：
oncheck="javascript: if (this.clickedNodeIndex != null) this.queueEvent('oncheck', this.clickedNodeIndex)"
        由此我们可以去htc（以后说的htc都指的是TreeView.htc），找到doCheckboxClick方法，只要看名字就知道它是干什么的（命名实在太重要了，否则在3000行代码中找某个函数真的很累）。
        该方法是当用户点击CheckBox的使用要处理的函数，函数如下所示：
        function doCheckboxClick(el){
            var checked = private_getAttribute(el,"checked")
            el.checked = !checked;
            var evt = createEventObject();
            evt.treeNodeIndex = getNodeIndex(el);
            g_nodeClicked = el;

上一篇：javascript下给元素添加事件的方法与代码

下一篇：javascript引用对象的方法代码

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注