扩展 TreeView 实现选择 CheckBox 自动回发

原创 2007年09月27日 16:55:00
今天 CSDN 有一网友提出这样的需求:实现点击 TreeView 的 CheckBox 即自动 PostBack
http://community.csdn.net/Expert/TopicView3.asp?id=5708685

解决方案可以考虑:
1.  在客户端手动通过 js 捕获 checkbox 的 click 事件,然后显示的执行 __doPostBack 方法
     对于如何捕获事件,获取目标节点,与 类似 TreeView几个小技巧  提到的 父子节点CheckBox的级联选择 类似

2. 扩展 TreeNode(继承 System.Web.UI.WebControls.TreeNode)
然而 TreeNode 并未继承自 System.Web.UI.Control,故而无法访问 checkbox 自控件,其无 Render 之类的方法。虽然它对控件开发者提供了 RenderPreText RenderPostText  方法,分别在节点前、后添加自定义信息,但还是无法访问 CheckBox。

看来此路暂时不通

3.  扩展 TreeView,重写 Render,通过 HtmlTextWriter 获取呈现的 html 代码,并想办法遍历其中的 <input type=checkbox /> 为其添加 onclick=_doPostBack

经测试此法,我看行

XTreeView.cs
using System;
using System.Data;
using System.Configuration;
using System.IO;
using System.Text;
using System.Text.RegularExpressions;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Xml;

namespace Digdotnet.Test
{
    
/// <summary>
    
/// XTreeView 的摘要说明
    
/// </summary>

    public class XTreeView : TreeView
    
{
        
/// <summary>        
        
/// 为 checkbox 添加客户端事件 click 处理程序。
        
/// <remarks>
        
/// 
        
/// 默认 TreeView 节点呈现为
        
/// <input type="checkbox" name="TreeView1n2CheckBox" id="TreeView1n2CheckBox" title="1.1.1" />
        
/// <a class="TreeView1_0" href="javascript:__doPostBack('TreeView1','s1//1.1//1.1.1')" onclick="TreeView_SelectNode(TreeView1_Data, this,'TreeView1t2');" id="TreeView1t2">1.1.1</a>
        
/// 
        
/// 重写 Render 方法之后呈现为
        
/// <input type="checkbox" name="TreeView1n2CheckBox" id="TreeView1n2CheckBox" onclick="TreeView_SelectNode(TreeView1_Data, this.nextSibling,'TreeView1t2');__doPostBack('TreeView1','s1//1.1//1.1.1')" title="1.1.1" />
        
/// <a class="TreeView1_0" href="javascript:__doPostBack('TreeView1','s1//1.1//1.1.1')" onclick="TreeView_SelectNode(TreeView1_Data, this,'TreeView1t2');" id="TreeView1t2">1.1.1</a>        
        
/// 
        
/// </remarks>
        
/// </summary>
        
/// <param name="writer"></param>

        protected override void Render(HtmlTextWriter writer)
        
{
            
if (DesignMode) // 设计时,不做处理
                base.Render(writer);
                
return;
            }


            
//            
            StringWriter sw = new StringWriter();
            HtmlTextWriter htmlWriter 
= new HtmlTextWriter(sw);
            
// 输出 TreeView 的 html 源码
            base.Render(htmlWriter);
            
//
            sw.Flush();
            
string treeHtml = sw.ToString();

            
// 从节点的 <a/> 标记中分析 href 和 onclick 属性中的两个 js 函数,
            
// 并插入 checkbox 的 onclick 事件
            string pattern = @"<input.* (id=.*) title=.*/>[/n/r/s]*<a.* href=.*(__doPostBack.*)"".* onclick=.*(TreeView_SelectNode.*);"".* id=.*"">";
            Match match 
= Regex.Match(treeHtml, pattern);
            
// 正则替换
            treeHtml = Regex.Replace(treeHtml, pattern, new MatchEvaluator(ReplaceTextCallback));

            
// 呈现经过处理的 TreeView
            writer = new HtmlTextWriter(Context.Response.Output);
            writer.Write(treeHtml);
        }


        
/// <summary>
        
/// 正则替换回调方法。
        
/// </summary>
        
/// <param name="match"></param>
        
/// <returns></returns>

        private static string ReplaceTextCallback(Match match)
        
{
            
int pos = match.Value.IndexOf(match.Groups[1].Value) + match.Groups[1].Value.Length + 1;
            
return match.Value.Insert(pos, String.Format(@"onclick=""{0};{1}"" ", match.Groups[3].Value.Replace("this""this.nextSibling"), match.Groups[2].Value));
        }

    }

}


测试页面

<%@ Page Language="C#" %>
<%@ Register TagPrefix="ddntest" Namespace="Digdotnet.Test" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">

    protected 
void TreeView1_TreeNodeCheckChanged(object sender, TreeNodeEventArgs e)
    
{        
        Label1.Text 
= String.Format("You check the node whose <font color='red'>Text={0} and ValuePath={1}</font>", e.Node.Text, e.Node.ValuePath);        
    }

</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    
<title>扩展 TreeView 实现选择 CheckBox 自动回发</title>
</head>
<body>
    
<form id="form1" runat="server">
    
<div>
        
<h1>扩展 TreeView 实现选择 CheckBox 自动回发</h1>
        
<input type="button" value="Refresh" onclick="location.href=location.href" />
        
<ddntest:XTreeView id="TreeView1" runat="server" ShowCheckBoxes="All" OnTreeNodeCheckChanged="TreeView1_TreeNodeCheckChanged">
            
<Nodes>
                
<asp:TreeNode Text="1">
                    
<asp:TreeNode Text="1.1" >
                        
<asp:TreeNode Text="1.1.1" ></asp:TreeNode>
                    
</asp:TreeNode>
                
</asp:TreeNode>                
                
<asp:TreeNode Text="2">
                    
<asp:TreeNode Text="2.1" >
                        
<asp:TreeNode Text="2.2.1" ></asp:TreeNode>
                    
</asp:TreeNode>
                
</asp:TreeNode>      
            
</Nodes>
        
</ddntest:XTreeView>    
        
<asp:Label ID="Label1" runat="server"></asp:Label>    
    
</div>
    
</form>
</body>
</html>

测试效果


BTW,对于 AJAX 大肆流行的今天, PostBack 似乎大家都敬而远之,是否需要此功能,还是看个人应用实际需求了。

 
版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

实现当TreeView中父节点的CheckBox的点选状态改变时,回发服务器端,并且选中父节点,所有子节点全选中

实现当TreeView中父节点的CheckBox的点选状态改变时,回发服务器端,并且选中父节点,所有子节点全选中

TreeView 滚动条 子节点定位 页面回发刷新后,滚动条自动定位到被选择节点出,javascript库jQuery实现 兼容服务器端控件

jQuery实现 选择TreeView子节点,页面回送刷新后,滚动条自动回到TreeView顶部,而不是被选中节点处,对于数据量较大的系统而言是非常不方便操作的。 实现单击TreeView节点,页面...

C# 中TreeView 控件实现点击CheckBoX自动打钩的事件

自己想要做一个TreeView,点击节点的CheckBox能让其子节点及父节点做出相应的事件。也不知道是不是自己的搜索方式不对,只能找到个近似的框架,通过自己修改以达到自己的要求。现将自己的需求及代码...

C# TreeView+checkBox 自动加载

效果如下: C# 前台代码如下: 后台代码如下: 数据是java后台,通过json传递给C# TreeItem 为封装方法,用来设置父节点,子节...

TreeView的CheckBox实现

  • 2008-07-25 11:03
  • 56KB
  • 下载

Asp.net TreeView异步加载数据,并结合checkbox实现多选删除

JS:         void PopulateNode(Object sender, TreeNodeEventArgs e)    &#...

ASP.NET Treeview控件中对Checkbox的联级选择

/************************************************************************** ASP.NET 2.0 TreeView...

treeview checkbox选中的时候选择子节点 mvvm

摘要:需求是这样的:当前节点是横排的,但是搞了半天,发现它没有这个属性,也就索性用tk的控件了,不是那种特别正式的MVVM的方式,但是还好吧,可以使用的 有一个bug:当所有的子节点不选择的话,父节...

treeview checkbox选中的时候选择子节点 mvvm

摘要:需求是这样的:当前节点是横排的,但是搞了半天,发现它没有这个属性,也就索性用tk的控件了,不是那种特别正式的MVVM的方式,但是还好吧,可以使用的 有一个bug:当所有的子节点不选择的话,父节...

jquery treeview checkbox选中子目录,同时选中父目录,关联选择

jquery treeview 的选中子目录,同时选中父目录,关联选择 //wirted by qq:190988779 at 2010-1-5 9:52:08 /...
  • foart
  • foart
  • 2011-08-13 22:50
  • 4396
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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