[导入]TreeView级联选择（后续）

做完了才想起来，应该把这个功能附加在一个TreeView中，不用做大的改动，就把那一堆脚本给加进去就Ok了。

做一个Web控件工程，让类继承自TreeView，重写Render方法，在工程中添加一个资源文件，在资源文件中添加一个文件资源，将那些JavaScript脚本方法作为文件添加进资源。

具体内容：

1.MyTreeView.cs

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Text;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace com.xaccp
{
    [DefaultProperty("Text")]
    [ToolboxData("<{0}:MyTreeView runat=server></{0}:MyTreeView>")]
    public class MyTreeView : TreeView
    {
        bool autoSelect=false;
        /// <summary>
        /// 自动选择，默认为false
        /// </summary>
        public bool AutoSelect
        {
            get { return autoSelect; }
            set
            {
                autoSelect = value;
                this.ShowCheckBoxes = TreeNodeTypes.All;
            }
        }

        protected override void Render(HtmlTextWriter writer)
        {
            base.Render(writer);
            string ss = global::com.xaccp.Resource1.MyTreeViewJs;
            ss = "<script type='text/javascript' language='javascript'>" + ss;
            ss += "AutoSelectHandle(\"" + this.ClientID + "\");";
            ss += "</script>";
            if (this.ShowCheckBoxes==TreeNodeTypes.All && autoSelect)
            {
                writer.Write(ss);
            }
           
        }
    }
}

 

2.资源文件中包含的js脚本MyTreeViewJS.js：

function SelectAllParent(obj,x)
        {
            //如果传过来的CheckBox选中了
            if(obj.checked==true)
            {
                //获得某个CheckBox所在的div
                var parentDiv=obj.parentElement.parentElement.parentElement.parentElement.parentElement;
                //如果没有这个div，那么意味着到根节点了。
                if(parentDiv==null)
                {
                    return;
                }
                //获得这个div的父节点的CheckBox的id
                var parentId=parentDiv.id.replace("Nodes","CheckBox");
                //获得父节点的CheckBox
                var temp=document.getElementById(parentId);
                //如果有父节点，那么不是根节点
                if(temp!=null)
                {
                    //设置父节点的CheckBox为选中
                    document.getElementById(parentId).checked=true;
                    //继续以这个父节点找爷爷节点。
                    SelectAllParent(document.getElementById(parentId),x);
                }
            }
            else
            {
                //设置一个变量
                var result=false;
                //还是获取这个CheckBox的父div
                var parentDiv=obj.parentElement.parentElement.parentElement.parentElement.parentElement;
                if(parentDiv==null)
                {
                    return;
                }
                var items=parentDiv.childNodes;
                //遍历div中的每个table
                for(var i=0;i<items.length;i++)
                {
                    if(items[i].tagName=='TABLE')
                    {
                        //找到装有CheckBox的tr
                        var tr=items[i].childNodes[0].childNodes[parseInt(x)];
                        //找到td集合
                        var tds=tr.childNodes;
                        //找到最后一个td
                        var lastTd=tds[tds.length-1];
                        //获得最后一个td中的第一个元素，就是checkbox
                        if(lastTd.childNodes.length==0)
                        {
                            break;
                        }
                        var input=lastTd.childNodes[0].id;
                        //如果其中有一个兄弟节点选中了
                        if(document.getElementById(input).checked==true)
                        {
                            //那么结果为真
                            result=true;
                            //那么以这个CheckBox继续向上遍历
                            SelectAllParent(document.getElementById(input),x);
                            return;
                        }
                    }
                }
                //如果循环都跑完了，result依然false，
                //意味着这个节点的父节点的选中状态应该为false
                document.getElementById(parentDiv.id.replace("Nodes","CheckBox")).checked=result;
                //接着用这个父节点，去找爷爷节点。
                SelectAllParent(document.getElementById(parentDiv.id.replace("Nodes","CheckBox")),x);
              
            }
        }
  
  //看是否应用了样式
  //如果没有应用样式，table中应该只有1行
  //如果应用了样式，table中应该有3行
  //CheckBox一般会在第二行中出现
        function HasStyle(tree)
        {
            var x=document.getElementById(tree).childNodes[0].childNodes[0].childNodes.length;
            return parseInt(x-1);
        }
      
        //选中子节点
        //obj为某个点中的CheckBox
        //x为0：没有应用样式，1：应用了样式
        function SelectAllChild(obj,x)
        {
            //获得子节点的id
            var childrenId=obj.id.replace("CheckBox","Nodes");
            //获得子节点
            var temp=document.getElementById(childrenId);
            //如果有子节点
            if(temp!=null)
            {
                //获取其中的子节点，目的是找那些TABLE
                //因为在Table中有CheckBox
                var items=document.getElementById(childrenId).childNodes;
                var count=items.length;
              
                for(var i=0;i<count;i++)
                {
                    if(items[i].tagName=='TABLE')
                    {
                        //找到tr
                        var tr=items[i].childNodes[0].childNodes[parseInt(x)];
                        //找到td集合
                        var tds=tr.childNodes;
                        //找到最后一个td
                        var lastTd=tds[tds.length-1];
                        //获得最后一个td中的第一个元素，就是checkbox
                        var input=lastTd.childNodes[0].id;
                        //设置这个checkbox的状态为父节点的状态
                        document.getElementById(input).checked=obj.checked;
                        //接着看这个子节点还有没有孙子节点。
                        SelectAllChild(document.getElementById(input),parseInt(x));
                    }
                }
            }
        }
        //遍历每个CheckBox，给它们加上onclick处理过程
        function AutoSelectHandle(treeID)
        {
            var x=HasStyle(treeID);
            //获得所有的input标记
            var objs = document.getElementsByTagName("input");
            //遍历
            for(var i=0;i<objs.length;i++)
            {
                //如果是CheckBox
                if(objs[i].type=='checkbox')
                {
                    var obj=objs[i];
                    //如果CheckBox的id中包括TreeView在客户端的id
                    //那么意味着这个CheckBox是TreeView中的CheckBox
                    if(obj.id.indexOf(treeID)!=-1)
                    {
                        //注册事件处理过程
                        objs[i].onclick=function()
                        {
                            //选中子节点
                            SelectAllChild(this,parseInt(x));
                            //选中父节点
                            SelectAllParent(this,x);
                        };
                    }
                }
            }
        }

将生成的程序集MyTreeView.dll添加到Web站点的Bin目录中，然后在工具箱中，点右键“选择项”，将这个dll添加进来。

下来就可以将工具箱中的MyTreeView拖入网页中，开始设计了，当然，如果要有这个效果，必须将ShowCheckBoxs选为All。

彻底解放土鳖。

 

文章来源:http://blog.sina.com.cn/s/blog_49458c270100c2so.html