首先说一下基本的情况。
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也打上钩。
以上就是我的全部思路和做法，如有不足请指正。
