(转)对微软那棵TreeView进行试用,主要是对CheckBox进行操作
总结这次的工作,明白了几个关键的地方:
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 )
{
for( var 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());
}
}
SetTree(childNodes[j]);
}
}
else
{
for( i=0 ; i<strArray.length; i++ )
{
if( strArray[i] == node.getAttribute("ID") )
{
saveCheckState(node);
node.setAttribute("checked","true");
//saveCheckState(node.getNodeIndex());
}
}
}
}
//====================================================//
//保存节点状态(保证在回传时节点状态依然存在)
//====================================================//
function saveCheckState(el)
{
if(el.getNodeIndex())
{
document.getElementById("TreeView1").queueEvent("oncheck",el.getNodeIndex().toString());
}
}
//====================================================//
//点击保存按钮时对所选中的节点进行整理
//====================================================//
function FindChecked()
{
strList = "";
var ChildNodes = new Array();
ChildNodes = document.getElementById("TreeView1").getChildren();
for( var i=0; i<ChildNodes.length; i++ )
{
CheckedAll(ChildNodes[i]);
}
//alert(strList);
doSelect(strList);
}
function CheckedAll(node)
{
var i = 0;
var strID;
var childNodes = new Array();
childNodes = node.getChildren();
if( parseInt(childNodes.length) != 0 )
{
for( i=0; i<parseInt(childNodes.length); i++ )
{
CheckedAll(childNodes[i]);
}
}
else
{
if( node.getAttribute("checked") == true )
{
strID = node.getAttribute("id");
strList = strList + strID + ",";
}
}
}
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 )
{
for( var 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());
}
}
SetTree(childNodes[j]);
}
}
else
{
for( i=0 ; i<strArray.length; i++ )
{
if( strArray[i] == node.getAttribute("ID") )
{
saveCheckState(node);
node.setAttribute("checked","true");
//saveCheckState(node.getNodeIndex());
}
}
}
}
//====================================================//
//保存节点状态(保证在回传时节点状态依然存在)
//====================================================//
function saveCheckState(el)
{
if(el.getNodeIndex())
{
document.getElementById("TreeView1").queueEvent("oncheck",el.getNodeIndex().toString());
}
}
//====================================================//
//点击保存按钮时对所选中的节点进行整理
//====================================================//
function FindChecked()
{
strList = "";
var ChildNodes = new Array();
ChildNodes = document.getElementById("TreeView1").getChildren();
for( var i=0; i<ChildNodes.length; i++ )
{
CheckedAll(ChildNodes[i]);
}
//alert(strList);
doSelect(strList);
}
function CheckedAll(node)
{
var i = 0;
var strID;
var childNodes = new Array();
childNodes = node.getChildren();
if( parseInt(childNodes.length) != 0 )
{
for( i=0; i<parseInt(childNodes.length); i++ )
{
CheckedAll(childNodes[i]);
}
}
else
{
if( node.getAttribute("checked") == true )
{
strID = node.getAttribute("id");
strList = strList + strID + ",";
}
}
}