今天 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。
看来此路暂时不通![icon18.gif](https://www.cnblogs.com/Emoticons/QQ/icon18.gif)
3. 扩展 TreeView,重写 Render,通过 HtmlTextWriter 获取呈现的 html 代码,并想办法遍历其中的 <input type=checkbox /> 为其添加 οnclick=_doPostBack
经测试此法,我看行 ![14.gif](https://www.cnblogs.com/Emoticons/QQ/14.gif)
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;
![None.gif](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
namespace
Digdotnet.Test
![ExpandedBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
{
![ExpandedSubBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
/**//// <summary>
/// XTreeView 的摘要说明
/// </summary>
public class XTreeView : TreeView
![ExpandedSubBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
![ExpandedSubBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
/**//// <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')" οnclick="TreeView_SelectNode(TreeView1_Data, this,'TreeView1t2');" id="TreeView1t2">1.1.1</a>
///
/// 重写 Render 方法之后呈现为
/// <input type="checkbox" name="TreeView1n2CheckBox" id="TreeView1n2CheckBox" οnclick="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')" οnclick="TreeView_SelectNode(TreeView1_Data, this,'TreeView1t2');" id="TreeView1t2">1.1.1</a>
///
/// </remarks>
/// </summary>
/// <param name="writer"></param>
protected override void Render(HtmlTextWriter writer)
![ExpandedSubBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
![ExpandedSubBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if (DesignMode)
{ // 设计时,不做处理
base.Render(writer);
return;
}
![InBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
//
StringWriter sw = new StringWriter();
HtmlTextWriter htmlWriter = new HtmlTextWriter(sw);
// 输出 TreeView 的 html 源码
base.Render(htmlWriter);
//
sw.Flush();
string treeHtml = sw.ToString();
![InBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
// 从节点的 <a/> 标记中分析 href 和 onclick 属性中的两个 js 函数,
// 并插入 checkbox 的 onclick 事件
string pattern = @"<input.* (id=.*) title=.*/>[\n\r\s]*<a.* href=.*(__doPostBack.*)"".* οnclick=.*(TreeView_SelectNode.*);"".* id=.*"">";
Match match = Regex.Match(treeHtml, pattern);
// 正则替换
treeHtml = Regex.Replace(treeHtml, pattern, new MatchEvaluator(ReplaceTextCallback));
![InBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
// 呈现经过处理的 TreeView
writer = new HtmlTextWriter(Context.Response.Output);
writer.Write(treeHtml);
}
![InBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![ExpandedSubBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
/**//// <summary>
/// 正则替换回调方法。
/// </summary>
/// <param name="match"></param>
/// <returns></returns>
private static string ReplaceTextCallback(Match match)
![ExpandedSubBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
int pos = match.Value.IndexOf(match.Groups[1].Value) + match.Groups[1].Value.Length + 1;
return match.Value.Insert(pos, String.Format(@"οnclick=""{0};{1}"" ", match.Groups[3].Value.Replace("this", "this.nextSibling"), match.Groups[2].Value));
}
}
}
测试页面
<%
@ Page Language="C#"
%>
![ExpandedBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
<%
@ Register TagPrefix="ddntest" Namespace="Digdotnet.Test"
%>
![None.gif](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
<!
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>
![None.gif](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![ExpandedBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
<
script
runat
="server"
>
![InBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
protected void TreeView1_TreeNodeCheckChanged(object sender, TreeNodeEventArgs e)
![ExpandedSubBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
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
>
![None.gif](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
<
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
>
测试效果
![](https://i-blog.csdnimg.cn/blog_migrate/df84259bced1e496c6f581d258e08838.jpeg)
BTW,对于 AJAX 大肆流行的今天, PostBack 似乎大家都敬而远之,是否需要此功能,还是看个人应用实际需求了。
源码下载