asp.net2.0的TreeView对checkbox的操作
2009-09-27 16:26
225 查看
大家会在ASP.NET 2.0使用TreeView控件时发现带有CheckBox控件的TreeNode对象(TreeView节点),选择CheckBox无法回发页面。在MSDN中对于TreeView.TreeNodeCheckChanged事件有一段备注:“当 TreeView 控件的复选框在两次向服务器发送之间更改状态时,会引发 TreeNodeCheckChanged 事件。这使您可以提供一个这样的事件处理方法,即每次发生此事件时执行一个自定义例程(如更新数据库或显示的内容)。尽管 TreeNodeCheckChanged 事件在回发时激发,但更改复选框不会导致回发。”说明框架本身并不能提供一个CheckBox回发的机制,为了实现集联的选择,笔者实现了一种使用JavaScript去回发的方法,变相的解决了这个问题,尽管这样的方法看上去很不美,但是一定程度上能解决我们的实际问题。
大致思路,TreeNode对象输出的是一个附和的HTML对象(包括TD,A,InputCheckBox……),本身没有办法增加客户端脚本,所以为TreeView控件客户端的onclick事件中加入脚本,脚本目的:对于引发事件的对象都做判断,如果是InputCheckBox对象导致的事件,则直接调用__doPostBack来回发页面。至于后台代码就思路就简单了,递归选择相关节点,设置其Checked属性就好了。
下面的实例实现了,集联选择当前选中节点的所有子节点功能。
代码部分:
服务器端的方法:
treeview.js
1 <script>
2
3 function postBackByObject()
4
5 {
6
7 var o = window.event.srcElement;
8
9 if (o.tagName == "INPUT" && o.type == "checkbox")
10
11 {
12
13 __doPostBack("","");
14
15 }
16
17 }
18
19</script>
treeview.aspx.cs
1 protected void TreeView1_TreeNodeCheckChanged(object sender, TreeNodeEventArgs e)
2 {
3 if (e.Node.ChildNodes.Count > 0)
4 {
5 for (int i = 0; i < e.Node.ChildNodes.Count; i++)
6 {
7 e.Node.ChildNodes[i].Checked = e.Node.Checked;
8 if (e.Node.ChildNodes[i].ChildNodes.Count > 0)
9 {
10 for (int j = 0; j < e.Node.ChildNodes[i].ChildNodes.Count; j++)
11 {
12 e.Node.ChildNodes[i].ChildNodes[j].Checked = e.Node.ChildNodes[i].Checked;
13 }
14 }
15 }
16 }
17 }
客户端判断实现选中父节点同时选中子节点:
客户端的在treeview里加onclick="javascript: OnTreeNodeChecked() ;"
客户端的方法:
treeview.js
1 <script type="text/javascript" language="javascript">
2 function OnTreeNodeChecked()
3 {
4 var ele = window.event.srcElement;
5 if(ele.type=='checkbox')
6 {
7 var childrenDivID = ele.id.replace('CheckBox','Nodes');
8 var div = document.getElementById(childrenDivID);
9 if(div==null)return;
10 var checkBoxs = div.getElementsByTagName('INPUT');
11 for(var i=0;i<checkBoxs.length;i++)
12 {
13 if(checkBoxs[i].type=='checkbox')
14 checkBoxs[i].checked=ele.checked;
15 }
16 }
17 }
大致思路,TreeNode对象输出的是一个附和的HTML对象(包括TD,A,InputCheckBox……),本身没有办法增加客户端脚本,所以为TreeView控件客户端的onclick事件中加入脚本,脚本目的:对于引发事件的对象都做判断,如果是InputCheckBox对象导致的事件,则直接调用__doPostBack来回发页面。至于后台代码就思路就简单了,递归选择相关节点,设置其Checked属性就好了。
下面的实例实现了,集联选择当前选中节点的所有子节点功能。
代码部分:
服务器端的方法:
treeview.js
1 <script>
2
3 function postBackByObject()
4
5 {
6
7 var o = window.event.srcElement;
8
9 if (o.tagName == "INPUT" && o.type == "checkbox")
10
11 {
12
13 __doPostBack("","");
14
15 }
16
17 }
18
19</script>
treeview.aspx.cs
1 protected void TreeView1_TreeNodeCheckChanged(object sender, TreeNodeEventArgs e)
2 {
3 if (e.Node.ChildNodes.Count > 0)
4 {
5 for (int i = 0; i < e.Node.ChildNodes.Count; i++)
6 {
7 e.Node.ChildNodes[i].Checked = e.Node.Checked;
8 if (e.Node.ChildNodes[i].ChildNodes.Count > 0)
9 {
10 for (int j = 0; j < e.Node.ChildNodes[i].ChildNodes.Count; j++)
11 {
12 e.Node.ChildNodes[i].ChildNodes[j].Checked = e.Node.ChildNodes[i].Checked;
13 }
14 }
15 }
16 }
17 }
客户端判断实现选中父节点同时选中子节点:
客户端的在treeview里加onclick="javascript: OnTreeNodeChecked() ;"
客户端的方法:
treeview.js
1 <script type="text/javascript" language="javascript">
2 function OnTreeNodeChecked()
3 {
4 var ele = window.event.srcElement;
5 if(ele.type=='checkbox')
6 {
7 var childrenDivID = ele.id.replace('CheckBox','Nodes');
8 var div = document.getElementById(childrenDivID);
9 if(div==null)return;
10 var checkBoxs = div.getElementsByTagName('INPUT');
11 for(var i=0;i<checkBoxs.length;i++)
12 {
13 if(checkBoxs[i].type=='checkbox')
14 checkBoxs[i].checked=ele.checked;
15 }
16 }
17 }
相关文章推荐
- asp.net2.0的TreeView对checkbox的操作
- asp.net2.0的TreeView对checkbox的操作
- asp.net2.0的TreeView对checkbox的操作
- 两个客户端操作TreeView节点CheckBox的小例子
- javascript 操作treeview的checkbox加载、全选、全不选、以及光标回焦问题
- 【原】TreeView+Checkbox级联操作(IE/FireFox测试通过)
- 两个客户端操作TreeView节点CheckBox的小例子(转)
- 最简单的Asp.Net 2.0 TreeView的Checkbox级联操作
- Asp.Net2.0权限树中Checkbox的操作
- 对微软那棵TreeView进行试用,主要是对CheckBox进行操作
- 两个客户端操作TreeView节点CheckBox的小例子
- asp.net TreeView安装、使用(如何将TreeView打包发布)(带CheckBox选择框的TreeView的初始化,TreeView客户端操作:选择父节点后自动选择所有子节点,子节点选择后自动选择父节点)(TreeView节点精确定位)
- Asp.Net2.0权限树中Checkbox的操作
- Asp.Net2.0权限树中Checkbox的操作
- 难道是BUG?为什么ASP.NET2.0下的TreeView中的checkbox无法PostBack和自动关联!
- 在TreeView中操作节点CheckBox需要注意的
- ASP.NET2.0下利用javascript实现TreeView中的checkbox全选!
- 【原】TreeView+Checkbox级联操作(IE/FireFox测试通过)
- .Net 的 Web 项目中 关于TreeView 的 checkBox 的操作……
- ASP.NET2.0下利用javascript实现TreeView中的checkbox全选