zoukankan      html  css  js  c++  java
  • asp.net + xml + 无限级下接选择框




    /*******************************************************************************
    /*
    /* asp.net + xml + 无限级下接选择框
    /*
    /* Author: alan
    /* Date: 2006-08-08
    /* Ver:  1.0.0
    /* Web:  http://chengulv.cnblogs.com
    /* Email: 
    /******************************************************************************/

    /**************************** data.xml ****************************************

    <?xml version='1.0'?>
    <Troot>
     <Item id="1" pid="0" c="1">房屋信息</Item>
     <Item id="2" pid="0" c="2">日常服务</Item>
     <Item id="3" pid="0" c="3">旅游指南</Item>
     <Item id="4" pid="1" c="4">厂库房出租</Item>
     <Item id="5" pid="1" c="1">房屋信息</Item>
     <Item id="6" pid="2" c="2">日常服务</Item>
     <Item id="7" pid="2" c="3">旅游指南</Item>
     <Item id="8" pid="6" c="4">厂库房出租</Item>
    </Troot>

    ******************************************************************************/

    /**************************** test.htm ****************************************
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title></title>
    <script language=javascript src=" http://localhost/ztl-list/js/LC_CascadeSelect.js"></script>
    <SCRIPT language="javascript">
    var fuc = null;
    var f = null;
    window.onload = function()
    {
      var xml = document.getElementById("xmlSource");
      fuc = new LC_CascadeSelect(xml,"fuc",document.getElementById("oDIV"),"no","0");
      fuc.DataBind();
      f = new LC_CascadeSelect(xml,"f",document.getElementById("Div1sss"),"pp", "0,2");
      f.getSelectValue(document.getElementById("xx"));
      f.DataBind();
    }
    </SCRIPT>

    </head>
    <body>

     <form id="Form1" method="post" runat="server" >
      这是数据源:<XML id="xmlSource" src="http://localhost/ztl/data/xml/j.xml"></XML>
      这是第一个<DIV id="oDIV"></DIV>
      <p>&nbsp;</p>
      这是第二个<DIV id="Div1sss"></DIV>
      <input type=text id="xx">
      <input type=button value="获取" onclick="document.all.xx.value = fuc.aReturn;">
     </form>
    </body>
    </html>

    ******************************************************************************/


    /**
     * 数据绑定到控件,并显示
     *
     * xmlSource --- object XML数据源对像 格式"<XML id="xmlSource" src="data.xml"></XML>"
     * sObj   --- sting  用来存放 LC_CascadeSelect 对象的变量名称
     * oDiv   --- object 用来存放下接框的 div 容器对象
     * prefix --- string 动态生成的<select 控件的 id 前缀;
     * dValue --- string 默认选中的值, 格式:0,1,5,3
     */
    function LC_CascadeSelect(xmlSource, sObj, oDiv, prefix, dValue)
    {
     this.xmlSource = xmlSource;
     this.prefix = prefix;
     this.sObj = sObj;
     this.oDiv = oDiv;
     this.defaultValue = dValue;   // 默认选中的值, 格式:0,1,5,3
     this.depth = 0;
     this.objSelects = new Array();      // 多级联动的Select集合
     
     this.sReturn = "";      // 返回用 , 分隔的选中值字串 如“1,5,3”
     this.aReturn = null;    // 返回 选中值的数组;
    }


    // 创建应有的Select对象
    LC_CascadeSelect.prototype.DataBind = function ()
    {
     this.funCreateSelectEl(0);
    };


    // 创建应有的Select对象
    LC_CascadeSelect.prototype.funCreateSelectEl = function(passPid)
    {

     // 创建DOMDocument对象


     var xmlSrc = new ActiveXObject("MicroSoft.XMLDOM");
     xmlSrc = this.xmlSource.XMLDocument;

     // root为文档对象的根节点
     var root = xmlSrc.documentElement;
     // 得到所传父ID的所有节点
     var currentItems = root.selectNodes("//Troot/Item[@pid = " + passPid + "]");
     var iItems = currentItems.length;

        if(iItems > 0)
        {
            // 创建Select并把OnChange事件写好
            var cID = this.prefix + this.objSelects.length;
      
            var newChild = document.createElement("<SELECT onchange=\""+ this.sObj + ".eventSltChange()\"  id='" + cID+ "'>");

            // 向集合中添加新建的Select对象
            this.objSelects[this.objSelects.length] = newChild;
           
            // 向Select对向添加所有的Option
            var i;
            for(i = 0; i < iItems; i++)
            {
       newChild.options.add(new Option(currentItems[i].text,currentItems[i].attributes[0].text));
            }

            // 将新建的Select放到目标上
            this.oDiv.appendChild(newChild);
           
            // 先置一个空白空值
            newChild.options.add(new Option("请选择所属行业",null,true,true),0);

      // 设置初始值       
         this.depth = this.depth + 1;
         var svalue = this.defaultValue.split(',');
         if( svalue.length > this.depth)
         {
       var y = document.getElementById(cID);
          for(i=0; i< y.options.length; i++)
       {
        if (svalue[this.depth] == y.options[i].value)
        {
         y.selectedIndex = i;
         break;
        }
       }
       y.fireEvent("onchange");
          }
         

        }
    };

    // Select的OnChange事件响应函数
    LC_CascadeSelect.prototype.eventSltChange = function ()
    {

        // 删除全部本层下的孩子
        var i;
        for(i = this.objSelects.length - 1; i > parseInt(event.srcElement.id.replace(this.prefix,""), 10); i--)
        {
            this.oDiv.removeChild(this.objSelects[i]);
            this.objSelects.pop();
        }
       
        // 响应新的选择
        this.funCreateSelectEl(event.srcElement.value);
       
        // 联动的选择结果
        var resultArray = new Array();


     this.lastID = 0;
        for(i = 0; i < this.objSelects.length; i++)
        {
            resultArray[i] = this.objSelects[i].value;
      if(parseInt(resultArray[i])==resultArray[i] && eval("'"+parseInt(resultArray[i])+"'.length")==resultArray[i].length)
       this.lastID = parseInt(resultArray[i]);
        }

     this.sReturn = resultArray.join(",");
     
     
     if(typeof(this.oText) == "object")
     {
      this.oText.value = this.sReturn;
     }

     
        // 输出选定
        //var s = resultArray.join("-");
    };

    LC_CascadeSelect.prototype.getSelectValue = function (oText)
    {
     this.oText = oText;
    }

  • 相关阅读:
    HDOJ1301 Jungle Roads[最小生成树Prim()]
    HDOJ1166 敌兵布阵[线段树求和]||HDOJ1754 I Hate It[线段树求最大值]
    HDOJ2159 FATE[DP背包问题]
    ZOJ3175 Number of Containers[数学题]
    POJ1791 Parallelogram Counting[数学题平行四边形求个数]
    HDOJ1281 棋盘游戏[匈牙利(最大匹配)+枚举]
    HDOJ1045 Fire Net[二分图匈牙利算法]
    POJ2449 Remmarguts' Date[K短路入门题(Dijkstra()||Spfa()+A*)]
    Fibonacci序列
    HDOJ1568 Fibonacci[公式求前四位数]
  • 原文地址:https://www.cnblogs.com/chengulv/p/468082.html
Copyright © 2011-2022 走看看