Asp.Net 2.0 TreeView的Checkbox级联操作

转载 2006年05月25日 09:54:00
1       前言

.Net Web应用, 有一个很大的苦恼就是没有太趁手的TreeView可用。微软的TreeView仅用作数据显示还行,但服务器控件不停的刷新太影响客户体验。商业化的TreeViewobout 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.        IDName是顺序排列的,命名规则如下: 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 = element = window.event.srcElement;
        if (!IsCheckBox(element))
            return;

        var isChecked = element.checked;
        var tree = TV2_GetTreeById("SubSysTree");
        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,会有些启发

asp.net 2.0中TREEVIEW中动态增加结点

在asp.net 2.0中,要动态从数据库中取出内容,动态增加结点,其实不难,比如以SQL SERVER 2000的PUBS数据库为例子,要以树型列表方式,取出作者,做为根结点,然后取出每位作者写过什...

Asp.net 2.0 中的TreeView的右键菜单

@ Page Language="C#" %> html> head>     style>     --         .skin1 {             cursor:d...

ASP.NET 2.0/3.5中直接操作Gridview控件插入新记录

ASP.NET 2.0/3.5中直接操作Gridview控件插入新记录发表:admin   阅读:469次  关键字:   字体:[大 中 小] 一、简介 从ASP.NET 2.0起引入了一批新的功能...

Asp.net 2.0 关于Header/title/Meta tages/Style操作的一点小技巧

设置Title :this.Header.Title="这是个Title测试"; 如果用了MasterPage可以这样用:this.Page.Title = SiteMap.CurrentNode.T...

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

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

treeview for asp.net 2.0 - astreeview 1.5.6

  • 2010年02月22日 14:17
  • 1.33MB
  • 下载

ASP.NET 2.0 实现伪静态网页方法 3种方法

方法一:利用Httphandler实现URL重写(伪URL及伪静态) 我们有时候会见到这样的地址:“http://www.huoho.com/show-12-34.html”,你或许认为在站点服...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Asp.Net 2.0 TreeView的Checkbox级联操作
举报原因:
原因补充:

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