Asp.Net 2.0 TreeView的Checkbox级联操作
2010-11-09 22:27
423 查看
1.前言
用.Net 做Web应用, 有一个很大的苦恼就是没有太趁手的TreeView可
用。微软的TreeView仅用作数据显示还行,但服务器控件不停的刷新太影响客户体验。商业化的TreeView(obout
treeview / FlyTreeView / Infragistics NetAdvantage Treeview)
都不错,特别是obout treeview短小精干讨人喜欢,但许可证是一个大障碍(公司一般不
会花钱买的)。我一般而言,在TreeView上做事情,用checkbox的
时候较多,特别是父子节点的关联,因此,对Microsoft TreeView改造就从父子节点
的关联开始。
2.ASP.Net 2.0
Treeview 简要分析
ASP.Net 2.0 Treeview吹的很不错,但客户端操作几乎为零。微软实现了一些客户端用的JavaScriptTreeView.js,还不公开,藏在system.web.dll中,
以资源的方式通过WebResource.axd来向客户端释放。仔细分析一下TreeView.js,
会发现微软为TreeView自动生成的Html脚
本结构如下:
<div> //树
<table/> //节点
<div/> //节
点的子节点,里面的内容是一个或多个<table/><div/>
</div>
因此,准确的说是<table/><div/>构成一
个节点,但很难明确的在DOM中确定一个节点,原因如下:
1. 其ID或Name是
顺序排列的,命名规则如下: 树ID + “n” + 节点序号,例如
MyTreen0
商业的TreeView一般在ID中
包含层次信息,如: MyTreeNode1_1_2 表示树的1.1.2那个节点,分析起来很容易
2. 上面描述的节点命名的ID,
是分配给<table/>里的<A/>也
就是显示 加号 减号的那个链接元素,由于该元素在<table/>中,
因此给分析带来了难度
3. 叶子节点没有上面所描述的<table/>里
的那个<A/>, 无法分析(因此我自己JavaScript才
会里出现A节点和Input节点,A节
点就是有“树ID + “n” + 节点序号”为ID的
链接元素,Input节点是<table/>里
的Checkbox,命名规则为: 树ID
+ “n” + 节点序号 + “CheckBox”)
3.自己写JavaScript
没办法,只有自己写JS函数来处理CheckBox的级联操作,其中用到了微软的TreeView.js 和 WebForm.js,
下载链接: TreeView2.rar
加入方法如下:
*为TreeView加
入OnClick事件
直接在TreeView的属性上加入:OnClick="OnTreeNodeChecked()"
或者:MyTree.Attributes.Add("OnClick", "OnTreeNodeChecked(event)");
*这样写OnClick事件动作
<
script language
=
javascript type
=
"
text/javascript
"
>
function
OnTreeNodeChecked()
{
var
element
=
window.event.srcElement;
if
(
!
IsCheckBox(element))
return
;
var
isChecked
=
element.checked;
var
tree
=
TV2_GetTreeById(
<%=
SubSysTree.ClientID
%>
);
var
node
=
TV2_GetNode(tree,element);
TV2_SetChildNodesCheckStatus(node,isChecked);
var
parent
=
TV2_GetParentNode(tree,node);
TV2_NodeOnChildNodeCheckedChanged(tree,parent,isChecked);
}
<
/
script>
TreeView2.js 也包含了一些对节点访问函数,可做其他用
途。随着我自己需求的增加,我也会逐渐加入其他的一些功能进去。
Update:
有朋友问到:在客户端如何取节点值?
整个树的数据都作为XML放在ViewState中,节点的Value也就放在
ViewState中,要分析它还有些麻烦。
不过,可
以看看这个工具(ViewStatueDecoder):
http://www.pluralsight.com/tools.aspx
,会有些启发
Update 20060624:
针对shenghualuo
实验不通的情况,我贴一个例子:
http://files.cnblogs.com/itrust/index.rar
注意:由于例子源于我一个基于MonoRail的项目,因此Save不能使用
相关文章推荐
- 最简单的Asp.Net 2.0 TreeView的Checkbox级联操作
- Asp.Net 2.0 TreeView的Checkbox级联操作
- Asp.Net 2.0 TreeView的Checkbox级联操作
- Asp.Net 2.0 TreeView的Checkbox级联操作
- Asp.net 2.0 Treeview确无刷新示例
- Display Hierarchical Data with TreeView in ASP.NET 2.0
- 使用 asp.net 2.0 自带的TreeView控件显示内联表数据(树状数据)
- ASP.NET 2.0构建动态导航的Web应用程序(TreeView和Menu )
- ASP.NET 2.0 Treeview Checkboxes - Check All - Javascript
- asp.net 2.0中treeview中动态增加结点
- TreeView 控件与Vs2005(Asp.Net 2.0)
- ASP.NET 2.0 TreeView部署问题
- ASP.NET 2.0 中实现 Treeview 与数据库的绑定(含代码)
- ASP.NET 2.0构建动态导航的Web应用程序(TreeView和Menu )
- [ASP.Net 2.0] TreeView只能用XML資料的解決之道
- asp.net 2.0 TreeView客户端个性化控制
- Asp.net 2.0 Treeview 无限级无刷新示例
- Asp.net 2.0 Treeview 无限级无刷新示例
- asp.net 2.0 treeview 复选框全选或全不选(兼容IE和FireFox)
- Asp.net 2.0 中的TreeView的右键菜单(Context Menus on the TReeView - IE Specific)