两个客户端操作TreeView节点CheckBox的小例子

原创 2004年06月13日 15:56:00

最近在论坛上回答了一些关于客户端操作TreeView节点选中的问题,在网友提供的代码基础上做了两个例子。可惜原贴已经丢失了,整理一下写成文档吧
为了书写方便,这两个例子没有采用codebehind方式,复制即可运行

第一个例子是当取消或选中节点选中状态时,子节点也做相应的取消或选中变化
需要注意的是如果要初始设置TreeNode为选中状态,只能在客户端设置。如果在服务器端设置TreeNode为选中状态,则在客户端使用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">
<!--
//初始化选中节点
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);
}
//设置子节点选中
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);
  }
 }
}
//获取所有节点状态
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);
  }
 }
}
//添加选中节点
function AddChecked(node) {
 document.all.checked.value += node.getAttribute("NodeData");
 document.all.checked.value += ',';
}
//添加未选中节点
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>

 

第二个例子是关于如何在服务器端得到客户端设置后的节点选中状态

<%@ 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>

关于TreeView中CheckBox的使用

      项目设计中要使用TreeView中CheckBox(在TreeView的属性中的CheckBoxes设为ture)。想达到一个这样的效果:            1、选中一个节点,则子节点...
  • fan_xiaohu
  • fan_xiaohu
  • 2009年05月08日 15:06
  • 20986

TreeView CheckBox勾选联动

在C# Winform项目中用到了TreeView控件,并且需要勾选的功能,父子节点联动,需要实现如下:      1.当选中父节点的时候,如果它的子节点有没有选中的,则选中。      ...
  • esunshine1985
  • esunshine1985
  • 2015年10月30日 11:46
  • 1302

C#treeView控件单击事件选中节点的问题

问题描述:在treeView的Click事件中,选中的节点SelectedNode并不是您刚才点击的节点,总是上一次选中的节点,节点选中滞后的问题。 解决方案:在treeView的MouseDown事...
  • esunshine1985
  • esunshine1985
  • 2014年03月21日 22:07
  • 4583

.NET-TreeView控件扩展功能:CheckBoxs父子选中状态同步和自动调整

  • 2017年03月28日 23:16
  • 23KB
  • 下载

VS2005 TreeView 的 CheckBox 被点击时的引发页面回发事件

本文参照于:VS2005 TreeView的checkBox的父子节点级联状态非常感谢原作者--------解决原有TreeView 的 CheckBox 被点击时不能引发服务器端事件实现当Tre...
  • freeliver54
  • freeliver54
  • 2007年01月05日 14:04
  • 627

TreeView单击选中复选框

本篇如何实现动态生成TreeView;如何实现TreeView单击选中复选框;如何实现TreeView复选框单选其中涉及:TreeNodeCheckChanged,SelectedNodeChange...
  • jjjjj10231023
  • jjjjj10231023
  • 2008年01月24日 16:09
  • 397

C# treeview控件部分节点添加checkbox

转自:http://www.cnblogs.com/xiaolifeidao/p/3178569.html 一、先初始化treeview this.treeView...
  • ainixiaozhuzi
  • ainixiaozhuzi
  • 2014年03月10日 23:14
  • 2133

带 checkBox 多选框的 Treeview 控件

{ *********************************************************************** }{                        ...
  • dingrj
  • dingrj
  • 2006年03月09日 21:05
  • 3428

C#TreeView控件控制某些节点的checkbox不显示

private void form_Load(object sender, EventArgs e) {             this.tvCheck.CheckBoxes = true;    ...
  • thanks_hck
  • thanks_hck
  • 2017年09月19日 10:08
  • 354

c# winform 遍历TreeView控件(属性为checkbox时)中,所有被选中的节点

当我们要将TreeView控件的节点进行选择性的保存时,我们会选择
  • u013485584
  • u013485584
  • 2014年10月09日 12:04
  • 2398
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:两个客户端操作TreeView节点CheckBox的小例子
举报原因:
原因补充:

(最多只允许输入30个字)