怎麼用指令碼實現TreeView的父子節點聯動功能? 由於Firefox本身的特點,在實現時分別在IE下用指令碼實現,在Firefox下用.cs代碼實現。由於這兩種瀏覽器安全色性實在不怎麼好,艾!
OK,廢話少說,現在首先給出實現TreeView父子節點聯動選種的指令碼方法:
function ChcekFuncNodes(e)
{
var i=e.clickedNodeIndex;
var node=e.getTreeNode(i);
var NodeArray=node.getChildren();
if(NodeArray.length>0)
{
if(node.getAttribute("Checked") == true)
{
for(var i=0;i<NodeArray.length;i++)
{
CheckTreeNode(NodeArray[i],true,false);
GetSelectedFunctionPointID(NodeArray[i]);
}
GetSelectedFunctionID(node);
}
else
{
for(var i=0;i<NodeArray.length;i++)
{
CheckTreeNode(NodeArray[i],false,false);
}
}
}
else
{
var ParentNode=node.getParent();
if(ParentNode!=null)
{
if(node.getAttribute("Checked") == true)
{
GetSelectedFunctionPointID(node);
CheckTreeNode(ParentNode,true,false);
GetSelectedFunctionID(ParentNode);
}
else
{
if(AllChildTreeNodeSameCheck(ParentNode,false))
{
CheckTreeNode(ParentNode,false,false);
}
}
}
else
{
CheckTreeNode(node,true,false);
GetSelectedFunctionID(node);
}
}
}function CheckTreeNode(chilNode,isCheck,atuoSetChilTreeNode)
{
if(chilNode!=null)
{
//alert(chilNode);
chilNode.setAttribute('checked',isCheck);
if(atuoSetChilTreeNode)
{
CheckChildTreeNode(chilNode,isCheck)
}
}
} function CheckChildTreeNode(Pnode,isCheck)
{
if(Pnode!=null)
{
var arr=Pnode.getChildren();
for(var i=0;i<arr.length;i++)
{
arr[i].setAttribute('checked',isCheck);
}
}
} function AllChildTreeNodeSameCheck(PareNode, value)
{
if(PareNode!=null)
{
var chids=PareNode.getChildren();
for(var i=0;i<chids.length;i++)
{
if(chids[i].getAttribute("Checked")!=value)
{
return false;
}
}
}
return true;
}
大家都知道,不用多講,下面兩個方法是紀錄使用者選中的FunctionID和FunctionPointID,通過隱藏控制項傳遞給.cs檔案使用,補充一下就是為什麼我用document.getElementById('<%=hidenFunID.ClientID%>')而不用document.getElementById('hidenFunID')?原因是我的指令碼是放在ascx檔案中的(即UserControl中的)所以只能通過這種方式來找控制項,否則就找不到喲!算是個小技巧吧
function GetSelectedFunctionID(nodes)
{
var hideFun = document.getElementById('<%=hidenFunID.ClientID%>');
var checkFun = hideFun.value;
checkFun += nodes.getAttribute("ID")+";";
hideFun.value =checkFun;
// alert(hideFun.value);
} function GetSelectedFunctionPointID(nodes)
{
var hideFunPoint = document.getElementById('<%=txtPointId.ClientID%>');
var checkFun = hideFunPoint.value;
checkFun += nodes.getAttribute("ID")+";";
hideFunPoint.value =checkFun;
//alert(hideFunPoint.value);
}
最後一步,讓TreeView父子節點聯動產生真正的效果,哈哈.................private void Page_Load(object sender, System.EventArgs e)
{
if(!Page.IsPostBack )
{
tvRoleFunctions.Attributes.Add("oncheck","ChcekFuncNodes(this)");
}
}
下次寫作預告:
怎麼實現Select All TreeView全部節點的功能?怎麼實現展開和摺疊自如?