首先说一下基本的情况。
TreeView的基本形式是这样的：该树总共有四层。第一层为根节点；第二层为单位；第三层为单位的部门；第四层为部门下的人员。在部门层(第三层)和人员层(第四层)需要有CheckBox。点击部门层的CheckBox选中其下所有的人员(这点要由JS实现)。
树形图如下：
JS主要是操作解析后的TreeView。解析后的TreeView有它的特点，下面分析一下解析后的HTML中的TreeView。下面是一个TreeView解析成HTML后的代码图。
（图）
我们来分析一下：TreeView经过解析后主要是以Table和Div的形式呈现到页面上的。Table中存放的是该节点的值，Div中存放的是该节点下的所有子节点的值(如果Div存在)，当然如果Div不存在则证明该节点下不存在任何的字节点。还有一点要知道的是解析后的TreeView也有它的规则。大家应该在图中看到id为tvOrgann0Nodes的Div节点了吧，这就是TreeView控件解析后的命名规则，从中我们可以看到一些命名的规律，但是以它自身的命名规律不能满足我们的业务逻辑要求，唯一可以利用的是id=tvOrgann0Nodes的根子节点元素。之后，再逐层分析Tag标签的父子关系和标签的类别，来实现我们要求的业务逻辑。
我的思路是创建一个JS的三维数组，第一维存放单位，第二维存放部门，第三维存放人员。之后给第二维部门添加onclick事件，只要点击了该部门则查找其下的所有人员节点，给所有人员节点打钩；再次点击则取消打钩。
以下为JS代码，稍微有些混乱，只要明白大体意思即可
代码 var tripleArra = new Array(); // 声明三维数组，第一维存放单位，第二维存放对应部门，第三维存放部门对应人员 var doubleArra = new Array(); window.onload = init; function init() { var div = document.getElementById( " tvOrgann0Nodes " ); // <%-- 获得根节点，树的形式如有变动，可能需要修改--%> var organTableNum = 0 ; var organDivNum = 0 ; var organArray = new Array(); var organDeptTwo = new Array(); // 处理单位节点 for ( var i = 0 ; i < div.childNodes.length; i ++ ) { if (div.childNodes[i].tagName == " TABLE " ) // <%-- 为单位节点的TABLE节点--%> { tripleArra[organTableNum] = div.childNodes[i]; // 三维数组第一维初始化完成 organDeptTwo[organTableNum] = div.childNodes[i]; doubleArra[organTableNum] = div.childNodes[i]; organTableNum ++ ; } else if (div.childNodes[i].tagName == " DIV " ) // <%-- 为部门节点的DIV节点--%> { organArray[organDivNum] = div.childNodes[i]; // organArray保存的是div organDivNum ++ ; } } var deptTableNum = 0 ; var deptDivNum = 0 ; // 处理部门节点 for ( var i = 0 ; i < organArray.length; i ++ ) { tripleArra[i] = new Array(); organDeptTwo[i] = new Array(); doubleArra[i] = new Array(); for ( var j = 0 ; j < organArray[i].childNodes.length; j ++ ) { if (organArray[i].childNodes[j].tagName == " TABLE " ) { if (organArray[i].childNodes[j].nextSibling != null && organArray[i].childNodes[j].nextSibling.tagName == " TABLE " ) { organDeptTwo[i][deptDivNum] = null ; deptDivNum ++ ; } else if (j == organArray[i].childNodes.length - 1 ) { organDeptTwo[i][deptDivNum] = null ; deptDivNum ++ ; } var tempDept = organArray[i].childNodes[j].getElementsByTagName( " input " ); for ( var k = 0 ; k < tempDept.length; k ++ ) { if (tempDept[k].type == " checkbox " ) { tripleArra[i][deptTableNum] = tempDept[k]; doubleArra[i][deptTableNum] = tempDept[k]; deptTableNum ++ ; } } } else if (organArray[i].childNodes[j].tagName == " DIV " ) { organDeptTwo[i][deptDivNum] = organArray[i].childNodes[j]; deptDivNum ++ ; } } deptTableNum = 0 ; // Table计数器制零 deptDivNum = 0 ; // Div计数器制零 } var userNum = 0 ; // 处理人员 for ( var i = 0 ; i < organDeptTwo.length; i ++ ) { for ( var j = 0 ; j < organDeptTwo[i].length; j ++ ) { if (organDeptTwo[i][j] != null ) { tripleArra[i][j] = new Array(); var tempUser = organDeptTwo[i][j].getElementsByTagName( " input " ); for ( var k = 0 ; k < tempUser.length; k ++ ) { if (tempUser[k].type == " checkbox " ) { tripleArra[i][j][userNum] = tempUser[k]; userNum ++ ; } } userNum = 0 ; // 计数器制零 } } } // 更新状态时，如果某部门下人员全选了，则选择该部门 var flagNum = 0 ; for ( var i = 0 ; i < tripleArra.length; i ++ ) { for ( var j = 0 ; j < tripleArra[i].length; j ++ ) { for ( var k = 0 ; k < tripleArra[i][j].length; k ++ ) { if (tripleArra[i][j][k].checked == true ) { flagNum ++ ; } } if (flagNum == tripleArra[i][j].length) { doubleArra[i][j].checked = true ; } flagNum = 0 ; } } // 三维数组已经组合好，操作三维数组 for ( var i = 0 ; i < tripleArra.length; i ++ ) { for ( var j = 0 ; j < tripleArra[i].length; j ++ ) { doubleArra[i][j].onclick = addClick; function addClick() { for ( var i = 0 ; i < tripleArra.length; i ++ ) { for ( var j = 0 ; j < tripleArra[i].length; j ++ ) { if ( this .id == doubleArra[i][j].id) { if ( this .checked == true ) { for ( var k = 0 ; k < tripleArra[i][j].length; k ++ ) { tripleArra[i][j][k].checked = true ; } } else { for ( var k = 0 ; k < tripleArra[i][j].length; k ++ ) { tripleArra[i][j][k].checked = false ; } } } } } } } }}
遇到的问题：因为三维数组是动态建立的，当给第三维附上值后，想使用第二维的值，即类似array[][]。但是，发现无法找到该对象了，所以只能又用了一个二维数组，把那个三维数组的前两维又存储了一遍(貌似数组的概念没掌握牢固)；还有一点没有考虑到的，就是当选择了一个部门下的所有人并保存后，第二次加载此树应该把该部门的CheckBox也打上钩。
以上就是我的全部思路和做法，如有不足请指正。
posted on 2010-11-08 14:44 Johnny_Z 阅读( ...) 评论( ...) 编辑 收藏转载于:https://www.cnblogs.com/Johnny_Z/archive/2010/11/08/1871755.html
相关资源：数据结构—成绩单生成器