以xml数据源作无限级联动下拉框

以xml数据源作无限级联动下拉框

1.当前要准备好js,下面的代码在网上下的,作者不可考,向这位IT工作者致敬! linkage.js (仅在changeLinkage方法中加入一个SetAssociatedDropDownListValue(element);) 此js库依赖于prototype.js而运行,网上到处有下的

var  Linkage  =  Class.create();
Linkage.prototype  =   ... {
    initialize : function(dataSrc, xmlFile) ...{
        this.dataSrc = dataSrc;
        this.xmlFile = xmlFile;
    },

    dataSrc : "" ,
    xmlFile : "" ,
    
    BLANK_SELECT : "-----Select-----" ,

    AllMenuArr : new Array() ,

    MenuIdArr : new Array() ,

    MenuInfoArr : new Array() ,

    iDepth : -1 ,

    tree : function(dataSrc, Element) ...{
        var node = "";
        if(Element.nodeType != 3) ...{
            node = Element;
            this.onElement(dataSrc, Element);
        }
        if(Element.hasChildNodes) ...{
            for(var i=0;i<Element.childNodes.length;i++) ...{
                if (Element.childNodes[i].nodeType != 3) ...{
                    this.iDepth++;
                    this.tree(dataSrc, Element.childNodes[i]);
                }
            }
        }
        if(node) ...{
            this.endElement();
        }
    } ,
    onElement : function(dataSrc, ele) ...{
        if ($V(ele, "Value") != null) ...{
            if (this.MenuInfoArr[dataSrc] == null) ...{
                this.MenuInfoArr[dataSrc] = new Array();
            }
            if (this.MenuInfoArr[dataSrc][this.iDepth] == null) ...{
                this.MenuInfoArr[dataSrc][this.iDepth] = new Array();
            }
            this.MenuInfoArr[dataSrc][this.iDepth].push(new MenuInfo($V(ele.parentNode, "Value") , $V(ele, "Value") , ($V(ele, "Desc")==null ? $V(ele, "Value") : $V(ele, "Desc"))));
        }
    } ,

    endElement : function() ...{
        this.iDepth--;
    } ,
    initBlank : function(element) ...{
        element.length = 0;
        element.options.add(new Option( this.BLANK_SELECT, "" ));
        element.selectedIndex = 0;
    } ,
    updateAllLast : function(dataSrc, nLevel) ...{
        for(i = nLevel+1; i < this.MenuIdArr[dataSrc].length; i++) ...{
            childNode = $(this.MenuIdArr[dataSrc][i]);
            this.initBlank(childNode);
            childNode.disabled = true;
        }
    } ,
    initLinkage : function(dataSrc, sValue, nLevel) ...{
        nLevel = Number(nLevel);

        if (nLevel > this.MenuIdArr[dataSrc].length || nLevel < 1) ...{
            return;
        }

        currNode = $(this.MenuIdArr[dataSrc][nLevel-1]);
        childNode = $(this.MenuIdArr[dataSrc][nLevel]);

        if (currNode.disabled) ...{
            return;
        }

        for (i=0; i<currNode.options.length; i++) ...{
            if  (currNode.options[i].value  ==  sValue) ...{
                currNode.selectedIndex = i;
                break;
            }
        }

        if (childNode != null) ...{
            currArr = this.AllMenuArr[dataSrc][nLevel];
            this.initBlank(childNode);
            for(i=0; i<currArr.length; i++) ...{
                if  (currArr[i].parentValue  ==  sValue) ...{
                    childNode.options.add(new Option(currArr[i].Desc, currArr[i].Value));
                }
            }
            if ((sValue != '') && (childNode.length > 1)) ...{
                childNode.disabled = false;
            } else ...{
                childNode.disabled = true;
            }
        }

        this.updateAllLast(dataSrc, nLevel);
    } ,

    changeLinkage : function(element) ...{
       SetAssociatedDropDownListValue(element);
        this.initLinkage($V(element , "USEDATA"), $F(element), $V(element , "SUBCLASS"));
    } ,

    setDataSrc : function(dataSrc) ...{
        this.dataSrc = dataSrc;
    } ,

    setXmlFile : function(xmlFile) ...{
        this.xmlFile = xmlFile;
    } ,
    init : function() ...{
        var rootEle = loadXML(this.dataSrc, this.xmlFile);
        this.tree(this.dataSrc, rootEle);

        this.iDepth = -1;

        for (i=0; i<this.MenuInfoArr[this.dataSrc].length; i++) ...{
            if (this.AllMenuArr[this.dataSrc] == null) ...{
                this.AllMenuArr[this.dataSrc] = new Array();
            }
            this.AllMenuArr[this.dataSrc].push(this.MenuInfoArr[this.dataSrc][i]);
        }

        var selectNodes = document.getElementsByTagName("select");
        for (i=0; i<selectNodes.length; i++) ...{
            if ($V(selectNodes[i] , "USEDATA") == this.dataSrc) ...{
                if (this.MenuIdArr[this.dataSrc] == null) ...{
                    this.MenuIdArr[this.dataSrc] = new Array();
                }
                var subClass = Number($V(selectNodes[i] , "SUBCLASS")) - 1;
                this.MenuIdArr[this.dataSrc][subClass] = $V(selectNodes[i] , "id");
                Event.observe(selectNodes[i], "change", this.changeLinkage.bind(this, selectNodes[i]));
            }
        }

        firstNode = $(this.MenuIdArr[this.dataSrc].first());
        this.initBlank(firstNode);
        for (i=0; i<this.AllMenuArr[this.dataSrc].first().length; i++) ...{
            firstNode.options.add(new Option(this.AllMenuArr[this.dataSrc].first()[i].Desc, this.AllMenuArr[this.dataSrc].first()[i].Value));
        }

        this.updateAllLast(this.dataSrc, 0);
    }
}


var  MenuInfo  =  Class.create();
MenuInfo.prototype  =   ... {
    initialize : function(sParentValue, sValue, sDesc) ...{
        this.parentValue = sParentValue;
        this.Value = sValue;
        this.Desc = sDesc;
    }
}

function  $V(ele, attr)  ... {
    return ele.getAttribute(attr);
}

function  createXMLDom()  ... {
    if (window.ActiveXObject)
        var xmldoc = new ActiveXObject("Microsoft.XMLDOM");
    else
        if (document.implementation&&document.implementation.createDocument)
            var xmldoc = document.implementation.createDocument("","doc",null);
    xmldoc.async = false;
    xmldoc.preserveWhiteSpace=true;
    return xmldoc;
}  

function  loadXML(dataSrc, xmlFile)  ... {
    if (xmlFile == null) ...{
        if (window.ActiveXObject) ...{
            return $(dataSrc).documentElement;
        } else ...{
            for (i=0; i<$(dataSrc).childNodes.length; i++) ...{
                if ($(dataSrc).childNodes[i].tagName != null) ...{
                    return $(dataSrc).childNodes[i];
                    break;
                }
            }
        }
    } else ...{
        var xmlDom = createXMLDom();
        try...{
            xmlDom.load(xmlFile);
        }catch(e)...{
            alert("lost xml File");
        }
        return xmlDom.documentElement;
    }
}  

2.简单的控件类 必须的属性有USEDATA和Xml,USEDATA可以随便指定,应该是为了页面上有多个联动而设计的,现在没有支持,另一个xml属性用于指定xml格式数据源 ,另外依赖于外部js /Script/linkage.js和/Script/prototype.js
.

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

namespace  Blackant.Controls
... {
    [DefaultProperty("Value")]
    public class AssociatedDropDownList : WebControl, IPostBackDataHandler
    ...{

        字段#region 字段
        private string _Xml="<root/>";
        private XmlDocument _XmlDoc;
        
        #endregion
        属性#region  属性
        [Bindable(true)]
        [Category("Appearance")]
        [DefaultValue("0")]
        [Localizable(true)]
        public string Value
        ...{
            get
            ...{
                return ViewState["Value"] == null ? "0" : ViewState["Value"].ToString();
            }
            set
            ...{
                ViewState["Value"] = value;

            }
        }

        public string USEDATA
        ...{
            get
            ...{
                if (ViewState["USEDATA"] != null)
                    return ViewState["USEDATA"].ToString();
                return String.Empty;
            }
            set ...{ ViewState["USEDATA"] = value; }
        }

        /**//// <summary>
        /// 字符串形式表达的xml格式文档
        /// </summary>
        public string Xml ...{
            get ...{ return _Xml; }
            set ...{ _Xml = value;
            
            }
        }
        #endregion

        私有方法#region 私有方法
        int GetMaxLevel(XmlNode parent, int CurLevel)
        ...{
            int MaxLevel = CurLevel;
            foreach (XmlNode xn in parent.ChildNodes)
            ...{
                if (xn.NodeType == XmlNodeType.Element)
                ...{
                    int tmpLevel = GetMaxLevel(xn, CurLevel + 1);
                    MaxLevel = MaxLevel > tmpLevel ? MaxLevel : tmpLevel;
                }
            }
            return MaxLevel;
        }
        #endregion
        重载事件#region 重载事件

        protected override void CreateChildControls()
        ...{
            _XmlDoc = new XmlDocument();
            _XmlDoc.LoadXml(_Xml);

            XmlElement root = _XmlDoc.DocumentElement;
            int maxLevel = GetMaxLevel(root, 1);
            for (int i = 1; i < maxLevel; i++)
            ...{
                DropDownList ddl = new DropDownList();
                ddl.Attributes.Add("USEDATA", USEDATA);
                ddl.Attributes.Add("SUBCLASS", i.ToString());
                ddl.ID = ddl.ClientID;
                Controls.Add(ddl);
            }


            base.CreateChildControls();
        }

        protected override void OnPreRender(EventArgs e)
        ...{
            Page.RegisterRequiresPostBack(this);
            Page.ClientScript.RegisterHiddenField(this.ClientID, Value);
            base.OnPreRender(e);
        }
        protected override void Render(HtmlTextWriter writer)
        ...{

           
            StringBuilder sb = new StringBuilder();
            sb.AppendFormat("<xml id="{0}" style="height:0px; width:0px; visibility:hidden;">", USEDATA);
            sb.Append(_Xml);
            sb.Append("</xml>");
            sb.Append(" <script charset="gb2312" type="text/javascript" src="/Script/prototype.js"></script> ");
            sb.Append("<script  charset="gb2312" type="text/javascript" src="/Script/linkage.js"></script> ");
            sb.Append("<script type='text/javascript'>");
            sb.AppendFormat("var linkage = new Linkage("{0}");", USEDATA);
            sb.Append("linkage.init();");
            XmlNode xn = _XmlDoc.DocumentElement.SelectSingleNode("//*[@Value='" + Value + "']");
            List<string> init = new List<string>();
            if (xn != null)
            ...{

                while (xn != _XmlDoc.DocumentElement)
                ...{
                    init.Insert(0, xn.Attributes["Value"].Value);
                    xn = xn.ParentNode;
                }
            }
            for (int i = 0; i < init.Count; i++)
            ...{
                sb.AppendFormat("linkage.initLinkage("{0}","{1}",{2});", USEDATA, init[i], i + 1);
            }
            sb.Append("function SetAssociatedDropDownListValue(obj){var val=obj.value;while(val=="" &&  obj.previousSibling){obj=obj.previousSibling;val=obj.value;}$('"+ClientID+"').value=val;}");
            sb.Append("</script>");

            Page.ClientScript.RegisterStartupScript(typeof(string), USEDATA, sb.ToString());
           

           
            base.Render(writer);
        }
        #endregion








        IPostBackDataHandler Members#region IPostBackDataHandler Members

        //private static readonly object EventTextChanged = new object();

        public virtual bool LoadPostData(string postDataKey, NameValueCollection postCollection)
        ...{
            //比较初始数据presentValue和回传数据postedValue
            string postedValue = postCollection[postDataKey];
            string presentValue = Value;
            if (presentValue == null || postedValue != presentValue)
            ...{
                Value = postedValue;
                return true;
            }
            return false;
        }
        void IPostBackDataHandler.RaisePostDataChangedEvent()
        ...{

        }


        #endregion
    }
}

3简单运用,

<% ... @ Page Language="C#"  %>

<% ... @ Register Assembly="Blackant.Controls" Namespace="Blackant.Controls" TagPrefix="bawc"  %>

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >

< script  runat ="server" > ...

    protected override void  OnLoad(EventArgs e)
...{
    
        AssociatedDropDownList1.USEDATA = "test";
        AssociatedDropDownList1.Xml = @"
<TreeNodes>
    <TreeNode Desc=""湖北省"" Value=""HB"">
        <TreeNode Desc=""荆门市"" Value=""JM""></TreeNode>    
        <TreeNode Desc=""武汉市"" Value=""WH"">
            <TreeNode Desc=""汉口"" Value=""HK""></TreeNode>        
            <TreeNode Desc=""武昌"" Value=""WC""></TreeNode>                    
        </TreeNode>
    </TreeNode>
    <TreeNode Desc=""北京市"" Value=""BJ"">
    </TreeNode>    
</TreeNodes>    
       
";
    
      base.OnLoad(e);
}

    protected void btnSubmit_Click(object sender, EventArgs e)
    ...{
        Response.Write("当前选择:"+AssociatedDropDownList1.Value);
    }
</ script >

< html  xmlns ="http://www.w3.org/1999/xhtml"   >
< head  runat ="server" >
     < title > Untitled Page </ title >
</ head >
< body >
     < form  id ="form1"  runat ="server" >
     < div >
         < bawc:AssociatedDropDownList  ID ="AssociatedDropDownList1"  runat ="server"    />
         < asp:Button  runat ="Server"  ID ="btnSubmit"  Text ="查看回传数据"  OnClick ="btnSubmit_Click"   />
     </ div >
     </ form >
</ body >
</ html >