js操作TreeView
来源:互联网 发布:免费洗车软件排行 编辑:程序博客网 时间:2024/05/16 16:03
最近在论坛上回答了一些关于客户端操作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>
- js操作TreeView
- js操作TreeView的checkbox
- Visual studio2005 通过JS操作TreeView控件
- js操作telerik mvc treeview控件
- asp.net TreeView 一些操作(js)
- treeView.js
- TreeView操作
- TreeView 操作
- Treeview 操作
- js----treeview实例
- treeview单选js
- jquery.treeview.js 插件
- TreeView的操作
- TreeView的操作
- TreeView的有关操作
- TreeView的有关操作
- TreeView的有关操作
- TreeView的操作
- getutent 读取utmp和wtmp,获得login account
- GridView 19例
- MFC-设备坐标和逻辑坐标
- 使用 PHP 的 Phing 项目部署工具
- two or more data types in declaration of `函数名'的报错
- js操作TreeView
- 试试
- javascript继承总结(1)
- fastreport的学习书籍
- [TOJ]1151. Task Sequences [zoj]3332.Strange Country II --竞赛图的哈密顿路
- Flex(ActionScript)中拷贝/克隆对象的通用代码
- ActionScript 绑定 resourceManager
- 用VideoView和SurfaceView播放视频
- Javascript 控制 CheckBox 的全选与取消全选