现在的位置: 首页 > 综合 > 正文

对微软那棵TreeView进行试用,主要是对CheckBox进行操作

2013年04月07日 ⁄ 综合 ⁄ 共 4636字 ⁄ 字号 评论关闭

总结这次的工作,明白了几个关键的地方:
    1.如果在服务器端进行CheckBox的初始化,这样操作就会导致在客户端进行node.getAttribute("checked")时总是得到True,这样就达不到客户端操作的目的.
    2.如果想在生成树的时候对某些节点进行CheckBox的初始化选中,就需要在客户端进行遍历树的操作(构造生成树的同时进行).
    3.在客户端对树的节点进行选中与取消选中的操作时,必须同时进行一个必要的操作:Tree.queueEvent('oncheck',node.getNodeIndex()),这样做的目的使你在客户端进行树操作的同时,能让服务器端也同时知道操作了哪些节点,以便在服务器端进行遍历的同时能知道哪些节点被选中.
    4.以及'checked'的大小写问题也会对树的状态改变有所影响.

之后又对代码进行了优化,我把生成树时的初始化操作,以及保存选中状态都放在了客户端进行!

第一次发表文章,请各位前辈多多指导,多多帮助

var strArray = new Array();
var strList = "";

function tree_oncheck()
{
    
var ChildNode = new Array();
    
var node = document.getElementById("TreeView1").getTreeNode(event.treeNodeIndex);
    
var Pchecked = node.getAttribute("checked");
    
    ChildNode 
=  node.getChildren();
    
if( parseInt( ChildNode.length ) != 0 )
    
{
       node.setAttribute(
"checked",!Pchecked);
       
return;
    }

    setParent(node,Pchecked);
    document.getElementById(
"TreeView1").queueEvent('oncheck',node.getNodeIndex());
}

//===============================================//
//
在点击子节点时,让父节点的状态也随子节点的状态而变化
//
===============================================//
function setParent(el,state)
{
    
var ParentNode = el.getParent();
    
if(ParentNode)
    
{
        
//检查el的兄弟节点状态
        if(!checkSiblingdNode(el))
        
{
            ParentNode.setAttribute('checked',state);
            setParent(ParentNode,state);
        }

    }

}


//===========================================//
//
检查兄弟节点状态
//
===========================================//
function checkSiblingdNode(el)
{
    
var parentNode = el.getParent();
    
var childNodes = new Array();
    childNodes 
= parentNode.getChildren();
            
    
for(var i=0;i< childNodes.length; i++)
    
{
        
if(el.getNodeIndex() != childNodes[i].getNodeIndex())
        
{
            
if(childNodes[i].getAttribute("Checked"))
            
{
                
return true;
            }

        }

    }

    
return false;
}

//=============================================//
//
点击父节点时,对其子节点状态进行同步改变
//
=============================================//
function setcheck(node,Pc)
{
    
var ChildNode = new Array();
    ChildNode 
= node.getChildren();
    
if( parseInt(ChildNode.length) != 0 )
    
{
        
forvar i=0; i<ChildNode.length;i++ )
        
{
            
var cNode = ChildNode[i];
            
if( cNode.getAttribute("checked"!= Pc )
            
{
                
if( parseInt( cNode.getChildren().length ) != 0 )
                    setcheck(cNode,Pc);
                cNode.setAttribute(
"checked",Pc);
                document.getElementById(
"TreeView1").queueEvent('oncheck',cNode.getNodeIndex());
            }

        }

    }

}

//==========================================//
//
需要对某些节点做初始化处理时
//
==========================================//
function onload()
{
    
var node 
    
var nextNode = 0;
    
var childNodes = new Array();
    
var childNodes = document.getElementById("TreeView1").getChildren();

    SetArray();
//把节点ID组合为一个数组
    for(var i=0;i<childNodes.length;i++)
    
{    
        SetTree(childNodes[i]);
    }

}

//============================================//
//
组合数组
//
============================================//
function SetArray()
{
    
var IndexStart = 0;
    
var IndexEnd = 0;
    
var ArrIndex = 0;
    
var SignStr = "";
    
//var SpanString = "0001,00010001,000100010001,";
    var SpanString = document.getElementById("H_IncomeCode").value;
    
var strLen = SpanString.length;
            
    
while( IndexEnd < strLen )
    
{
        SignStr 
= SpanString.substr(IndexEnd,1);
        
if( SignStr == "," )
        
{
            
var TempString = SpanString.substr(IndexStart,IndexEnd-IndexStart);
            strArray[ArrIndex] 
= TempString;
                    
            IndexStart 
= IndexEnd + 1;
            ArrIndex 
= ArrIndex + 1;
        }

        IndexEnd 
= IndexEnd + 1;
    }

}

//==============================================//
//
遍历整棵树,进行节点的Checked的初始化设置//
//
==============================================//
function SetTree(node)
{
    
var childNodes = new Array();
    childNodes 
= node.getChildren();
    
var i = 0;
    
var j = 0;
            
    
for( i=0 ; i<strArray.length; i++ )
    
{
        
if( strArray[i] == node.getAttribute("ID") )
        
{
            saveCheckState(node);
            node.setAttribute(
"checked","true");
                    
//saveCheckState(node.getNodeIndex());
        }

    }

    
if( parseInt(childNodes.length) != 0 )
    
{
        
for( j=0;j< parseInt(childNodes.length); j++)
        
{
            
for( i=0 ; i< parseInt(strArray.length); i++ )
            
{
                
if( strArray[i] == childNodes[j].getAttribute("ID") )
                
{
                    saveCheckState(childNodes[j]);
                    childNodes[j].setAttribute(
"checked","true");
                    
//saveCheckState(childNodes[j].getNodeIndex());

抱歉!评论已关闭.