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也打上钩。
