Asp.Net 2.0 TreeView的Checkbox级联操作

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吹的很不错，但客户端操作几乎为零。微软实现了一些客户端用的JavaScript TreeView.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不能使用