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

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

今天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>
publicclassXTreeView:TreeView
{
/**////<summary>
///为checkbox添加客户端事件click处理程序。
///<remarks>
///
///默认TreeView节点呈现为
///<inputtype="checkbox"name="TreeView1n2CheckBox"id="TreeView1n2CheckBox"title="1.1.1"/>
///<aclass="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方法之后呈现为
///<inputtype="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"/>
///<aclass="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>
///<paramname="writer"></param>
protectedoverridevoidRender(HtmlTextWriterwriter)
{
if(DesignMode){//设计时，不做处理
base.Render(writer);
return;
}

//
StringWritersw=newStringWriter();
HtmlTextWriterhtmlWriter=newHtmlTextWriter(sw);
//输出TreeView的html源码
base.Render(htmlWriter);
//
sw.Flush();
stringtreeHtml=sw.ToString();

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

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

/**////<summary>
///正则替换回调方法。
///</summary>
///<paramname="match"></param>
///<returns></returns>
privatestaticstringReplaceTextCallback(Matchmatch)
{
intpos=match.Value.IndexOf(match.Groups[1].Value)+match.Groups[1].Value.Length+1;
returnmatch.Value.Insert(pos,String.Format(@"onclick=""{0};{1}""",match.Groups[3].Value.Replace("this","this.nextSibling"),match.Groups[2].Value));
}
}
}

测试页面

<% @PageLanguage="C#" %>
<% @RegisterTagPrefix="ddntest"Namespace="Digdotnet.Test" %>

<! DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >

< script runat ="server" >

protectedvoidTreeView1_TreeNodeCheckChanged(objectsender,TreeNodeEventArgse)
{
Label1.Text=String.Format("Youcheckthenodewhose<fontcolor='red'>Text={0}andValuePath={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 似乎大家都敬而远之，是否需要此功能，还是看个人应用实际需求了。