asp.net + xml + 无限级下接选择框

Posted on 2006-08-04 19:51 快乐家++ 阅读(492) 评论(0) 收藏举报

/*******************************************************************************
/*
/* 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> </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;
}

刷新页面返回顶部

快乐家++ (Alan)

公告

asp.net + xml + 无限级下接选择框