?
最近在論壇上回答了一些關(guān)于客戶端操作TreeView節(jié)點選中的問題，在網(wǎng)友提供的代碼基礎(chǔ)上做了兩個例子。可惜原貼已經(jīng)丟失了，整理一下寫成文檔吧
為了書寫方便，這兩個例子沒有采用codebehind方式，復制即可運行
第一個例子是當取消或選中節(jié)點選中狀態(tài)時，子節(jié)點也做相應的取消或選中變化
需要注意的是如果要初始設(shè)置TreeNode為選中狀態(tài)，只能在客戶端設(shè)置。如果在服務器端設(shè)置TreeNode為選中狀態(tài)，則在客戶端使用getAttribute("Checked")，得到的值永遠是true。
<%@ Register TagPrefix="iewc" Namespace="Microsoft.Web.UI.WebControls" Assembly="Microsoft.Web.UI.WebControls, Version=1.0.2.226, Culture=neutral, PublicKeyToken=31bf3856ad364e35" %>
<HTML>
?<HEAD>
??<script language="C#" runat="server">
???private void Page_Load(object sender, System.EventArgs e)
???{???
????TreeView1.Attributes.Add("oncheck","tree_oncheck(this)");
???}
??</script>
??<script language="javascript">
<!--
//初始化選中節(jié)點
function initchecknode()
{
?var node=TreeView1.getTreeNode("1");
?node.setAttribute("Checked","true");
?setcheck(node,"true");?
?FindCheckedFromNode(TreeView1);
}
//oncheck事件
function tree_oncheck(tree)
{
?var node=tree.getTreeNode(tree.clickedNodeIndex);
?var Pchecked=tree.getTreeNode(tree.clickedNodeIndex).getAttribute("checked");
?setcheck(node,Pchecked);
?document.all.checked.value="";
?document.all.unchecked.value="";
?FindCheckedFromNode(TreeView1);
}
//設(shè)置子節(jié)點選中
function setcheck(node,Pc)
{
?var i;
?var ChildNode=new Array();
?ChildNode=node.getChildren();
?
?if(parseInt(ChildNode.length)==0)
??return;
?else
?{
??for(i=0;i<ChildNode.length;i++)
??{
???var cNode;
???cNode=ChildNode[i];
???if(parseInt(cNode.getChildren().length)!=0)
????setcheck(cNode,Pc);
???cNode.setAttribute("Checked",Pc);
??}
?}
}
//獲取所有節(jié)點狀態(tài)
function FindCheckedFromNode(node) {
?var i = 0;
?var nodes = new Array();
?nodes = node.getChildren();
?
?for (i = 0; i < nodes.length; i++) {
??var cNode;
??cNode=nodes[i];
??if (cNode.getAttribute("Checked"))
???AddChecked(cNode);
??else
????? AddUnChecked(cNode);
??
??if (parseInt(cNode.getChildren().length) != 0 ) {
???FindCheckedFromNode(cNode);
??}
?}
}
//添加選中節(jié)點
function AddChecked(node) {
?document.all.checked.value += node.getAttribute("NodeData");
?document.all.checked.value += ',';
}
//添加未選中節(jié)點
function AddUnChecked(node) {
?document.all.unchecked.value += node.getAttribute("NodeData");
?document.all.unchecked.value += ',';
}
//-->
??</script>
?</HEAD>
?<body onload="initchecknode()">
??<iewc:TreeView id="TreeView1" runat="server" ExpandLevel="5">
???<iewc:TreeNode NodeData="0" CheckBox="True" Text="Node0" Expanded="True">
????<iewc:TreeNode NodeData="1" CheckBox="True" Text="Node1" Expanded="True"></iewc:TreeNode>
????<iewc:TreeNode NodeData="2" CheckBox="True" Text="Node2" Expanded="True">
?????<iewc:TreeNode NodeData="3" CheckBox="True" Text="Node3" Expanded="True">
??????<iewc:TreeNode NodeData="4" CheckBox="True" Text="Node4"
Expanded="True"></iewc:TreeNode>
?????</iewc:TreeNode>
????</iewc:TreeNode>
???</iewc:TreeNode>
???<iewc:TreeNode NodeData="5" CheckBox="True" Text="Node5" Expanded="True">
????<iewc:TreeNode NodeData="6" CheckBox="True" Text="Node6" Expanded="True"></iewc:TreeNode>
???</iewc:TreeNode>
???<iewc:TreeNode NodeData="7" CheckBox="True" Text="Node7" Expanded="True">
????<iewc:TreeNode NodeData="8" CheckBox="True" Text="Node8" Expanded="True">
?????<iewc:TreeNode NodeData="9" CheckBox="True" Text="Node9"
Expanded="True"></iewc:TreeNode>
????</iewc:TreeNode>
???</iewc:TreeNode>
??</iewc:TreeView><P>
???<TABLE id="Table1" cellSpacing="1" cellPadding="1" width="300" border="1">
????<TR>
?????<TD>
??????<asp:Label id="Label1" runat="server">checked</asp:Label></TD>
?????<TD>
??????<INPUT id="checked" type="text" size="32"></TD>
????</TR>
????<TR>
?????<TD>
??????<asp:Label id="Label2" runat="server">unchecked</asp:Label></TD>
?????<TD><INPUT id="unchecked" type="text" size="32"></TD>
????</TR>
???</TABLE>
???<br>
??</P>
?</body>
</HTML>
?
第二個例子是關(guān)于如何在服務器端得到客戶端設(shè)置后的節(jié)點選中狀態(tài)
<%@ Register TagPrefix="iewc" Namespace="Microsoft.Web.UI.WebControls" Assembly="Microsoft.Web.UI.WebControls,
Version=1.0.2.226, Culture=neutral, PublicKeyToken=31bf3856ad364e35" %>
<HTML>
?<HEAD>
??<script language="C#" runat="server">
???private void Button1_Click(object sender, System.EventArgs e)
???{
????Response.Write(TreeView1.Nodes[0].Checked);
???}
??</script>
??<script language="javascript">
???function set_check()
???{
????var nodeindex = "0";
????var node=TreeView1.getTreeNode(nodeindex);
????node.setAttribute("Checked","True");
????TreeView1.queueEvent('oncheck', nodeindex);
???}
??</script>
?</HEAD>
?<body>
??<form id="TestTree" method="post" runat="server">
???<iewc:TreeView id="TreeView1" runat="server">
????<iewc:TreeNode CheckBox="True" Text="Node0"></iewc:TreeNode>
???</iewc:TreeView>
???<br>
???<input type="button" value="set check" onclick="set_check()">
???<br>
???<asp:Button id="Button1" runat="server" Text="submit" OnClick="Button1_Click"></asp:Button>
??</form>
?</body>
</HTML>
posted on 2006-12-12 00:05
曾科 閱讀(336)
評論(0) 編輯 收藏 所屬分類:
JavaScript