JS操作TreeView

JS操作TreeView

首先说一下基本的情况。

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