JavaScript解析XML实现多级级联下拉列表

1.创建XML文档:cascaded_select.xml
<? xml version="1.0" encoding="GBK" ?>
< select >
    
< province  key ="sx"  value ="陕西" >
        
< city  key ="xa"  value ="西安" />
        
< city  key ="bj"  value ="宝鸡" />
        
< city  key ="wn"  value ="渭南" >
            
< xian  key ="fp"  value ="富平" >
                
< zhen  key ="zq"  value ="张桥" />
            
</ xian >
        
</ city >
        
< city  key ="ak"  value ="安康" />
    
</ province >
    
< province  key ="js"  value ="江苏" >
        
< city  key ="nj"  value ="南京" />
        
< city  key ="xz"  value ="徐州" />
    
</ province >
    
< province  key ="sh"  value ="上海" />
</ select >

 

2.创建BlueParseXML.js,用来加载解析XML文档

/**
 * @description 解析并封装XML
 * @author BluesLee
 * @lastModif BluesLee
 * @createDate 2007-10-13
 * @modifDate 2007-10-15
 * @version 1.0
 
*/

    
// 解析XML文件对象构造器
     function  BlueParseXML() {
    }
    
    BlueParseXML.prototype.xml;
// 定义对象属性xml
    BlueParseXML.prototype.loadFinish; // 加载完成函数
    BlueParseXML.prototype.nodeProperties = new  Array(); // 节点属性数组
    BlueParseXML.prototype.key = " key " ;
    BlueParseXML.prototype.value
= " value " ;
    BlueParseXML.prototype.nodeList;
// 节点集合
    BlueParseXML.prototype.rootName;
    BlueParseXML.XML_NULL
=- 1 ; // 未加载xml,或加载失败

    
// 加载xml文件
    BlueParseXML.prototype.loadXML = function (url) {
        
var newXML;
        
var obj=this;
        
//如果它受支持,采用标准的2级DOM技术
        if(document.implementation && document.implementation.createDocument){
            
//创建新的Document对象
            newXML=document.implementation.createDocument("","",null);
            
//设置装载完毕时触发事件
            newXML.onload=function(){
                
if(obj.loadFinish){
                    obj.loadFinish();
                }

            }

            newXML.load(url);
        }
else{//IE浏览器创建Document对象
            newXML=new ActiveXObject("Microsoft.XMLDOM");
            
//设置onload
            newXML.onreadystatechange=function(){
                
if(newXML.readyState==4){
                    
if(obj.loadFinish){
                        obj.loadFinish();
                    }

                }

            }

            newXML.load(url);
        }

        
this.xml=newXML;
    }


    
// 解析遍历xml
    BlueParseXML.prototype.parseXML = function () {
        
if(this.xml==null){
            alert(
"XML未加载,请先加载XML文件!");
            
return parseXML.XML_NULL;
        }

        
var rootNode=this.xml.documentElement;
        
this.rootName=rootNode.tagName;
        
this.nodeList=new ChildNodeList();
        
this.level=this.iteratorNode(this.nodeList,rootNode,1);
        
return this.level;
    }

    
// 遍历节点,将节点信息封装存入ChildNodeList中
    BlueParseXML.prototype.iteratorNode = function (list,node,level) {
        
if(!isNaN(level) && level>0){
            list.nodeLevel
=level;
        }

        
var result=list.nodeLevel;//节点级别
        var flag=true;//判断节点是否有子节点标记
        for(var child=node.firstChild;child!=null;child=child.nextSibling){
            flag
=false;//有子节点
            if(list.nodeName==null || list.nodeName==""){
                list.nodeName
=child.tagName;                
            }

            
if(list.nodeName==child.tagName){
                
var nodeInfo=new NodeInfo();
                nodeInfo.nodeLevel
=list.nodeLevel;//设置节点级别
                nodeInfo.nodeName=list.nodeName;//设置节点名称
                nodeInfo.key=child.getAttribute(this.key);//设置节点属性
                nodeInfo.value=child.getAttribute(this.value);
                
for(var index=0;index<this.nodeProperties.length;index++){
                    nodeInfo[
this.nodeProperties[index]]=child.getAttribute(this.nodeProperties[index]);
                }

                list.addElement(nodeInfo.key,nodeInfo);
//把节点加入父节点的子节点集合            
                var n=this.iteratorNode(nodeInfo.childNodeList,child,list.nodeLevel+1);
                
if(n>result){//如果子节点返回的节点级别大于改节点级别,设置返回节点级别为最大级别
                    result=n;
                }

            }

        }

        
if(flag){//当改节点没有子节点时返回的节点级别-1
            result=result-1;
        }

        
return result;
    }

    
// 扩展String对象,增加trim方法去掉字符串前后空格
    String.prototype.trim = function () {        
        
return this.replace(/^s*/g,"").replace(/s*$/g,"");
    }

    
/*
     * @description 自定义集合对象(利用对象属性键值对,类似Hashtable使用)
     * @author BluesLee
     * @lastModif BluesLee
     * @createDate 2007-10-13
     * @modifDate 2007-10-15
      * @version 1.0
     
*/

    ChildNodeList.prototype.nodeLevel
= 1 ;
    ChildNodeList.prototype.nodeName;
    ChildNodeList.prototype.keyArray;
    ChildNodeList.prototype.ELEMENT_NULL
=- 1 ; // 元素为空
    ChildNodeList.prototype.ELEMENT_EXIST =- 2 ; // 元素已经存在
    ChildNodeList.prototype.ELEMENT_NOT_EXIST =- 3 ; // 元素不存在
    ChildNodeList.prototype.INDEX_OUT =- 4 // 数组下标越界
    ChildNodeList.prototype.ERROR_DELETE =- 5 // 删除元素出错
     function  ChildNodeList() {
        
this.keyArray=new Array();
    }

    
// 添加集合元素
    ChildNodeList.prototype.addElement = function (key,element) {
        
if(key==null || element==null){
            
return ChildNodeList.ELEMENT_NULL;
        }

        
if(this[key]!=null){
            
return ChildNodeList.ELEMENT_EXIST;
        }

        
var index=this.keyArray.length;
        
this.keyArray[index]=key;
        
this[key]=element;
        
return index;
    }

    
// 根据下标删除集合元素
    ChildNodeList.prototype.deleteElementByIndex = function (index) {
        
if(index>=this.keyArray.length){
            
return ChildNodeList.INDEX_OUT;
        }

        
var key=this.keyArray[index];
        
for(var i=index;i<this.keyArray.length;i++){
            
this.keyArray[i]=this.keyArray[i+1];
        }

        
this.keyArray.length=this.keyArray.length-1;
        
delete this[key];
        
return index;
    }

    
// 根据key删除集合元素
    ChildNodeList.prototype.deleteElementByKey = function (key) {
        
if(this[key]==null){
            
return ChildNodeList.ELEMENT_NOT_EXIST;
        }

        
for(var index=0;index<this.keyArray.length;index++){
            
if(this.keyArray[index]==key){
                
return this.deleteElementByIndex(index);
            }

        }

        
return ChildNodeList.ERROR_DELETE;
    }

    
// 根据key查找元素
    ChildNodeList.prototype.getElementByKey = function (key) {
        
return this[key];
    }

    
// 根据下标查找元素
    ChildNodeList.prototype.getElementByIndex = function (index) {
        
return this.getElementByKey(this.keyArray[index]);
    }

    
// 获取集合大小
    ChildNodeList.prototype.size = function () {
        
return this.keyArray.length;
    }


    
/*
     * @description 节点信息封装对象
     * @author BluesLee
     * @lastModif BluesLee
     * @createDate 2007-10-13
     * @modifDate 2007-10-15
      * @version 1.0
     
*/

    NodeInfo.prototype.nodeLevel;
    NodeInfo.prototype.nodeName;
// 节点名称
    NodeInfo.prototype.key; // 节点名称,对应xml节点key属性
    NodeInfo.prototype.value; // 节点内容,对应xml节点value属性
    NodeInfo.prototype.childNodeList; // 子节点列表,用ChildNodeList对象封装
     // 构造器
     function  NodeInfo() {
        
this.childNodeList=new ChildNodeList();
    }

 

3.创建BlueCasadedSelect.js文件,用来生成级联下拉框

/*
 * @description 级联下拉对象
 * @author BluesLee
 * @lastModif BluesLee
 * @createDate 2007-10-13
 * @modifDate 2007-10-15
 * @version 1.0
 
*/

BlueCasadedSelect.prototype.selectList;
BlueCasadedSelect.prototype.defaultValue
= " -1 " ;
BlueCasadedSelect.prototype.defaultText
= " 请选择… " ;
BlueCasadedSelect.prototype.nodeList;
// 节点总集合
BlueCasadedSelect.prototype.isAddOnChangeEvent = false ;
BlueCasadedSelect.prototype.SELECTLIST_NULL
=- 1 ; // 下拉对象数组为空
BlueCasadedSelect.prototype.SELECTLIST_TYPE_NOT_ARRAY =- 2 ; // 下拉对象数组不是数组对象
BlueCasadedSelect.prototype.SELECTLIST_EMPTY =- 3 ; // 下拉对象数组为空数组
BlueCasadedSelect.prototype.SELECTLIST_LENGTH_OUT =- 4 ; // 下拉对象数组小于节点集合级别
BlueCasadedSelect.prototype.NODELIST_EMPTY =- 5 ; // 节点集合为空
BlueCasadedSelect.prototype.EVENT_NULL =- 6 ; // 事件源为空
//
构造器
function  BlueCasadedSelect(nodeList) {
    
if(nodeList!=null){
        
this.nodeList=nodeList;
    }
else{
        
this.nodeList=new ChildNodeList();
    }

}

/**
 * 创建下拉列表
 * @author BluesLee
 * @lastModif BluesLee
 * @createDate 2007-10-13
 * @lastModifDate 2007-10-13
 * @param parentNode 下拉列表父节点对象
 * @param nameList 下拉列表名字集合[可选参数]
 * @version 1.0
 
*/

BlueCasadedSelect.prototype.createSelect
= function (parentNode,nameList) {
    
if(nameList==null){
        
if(this.nodeList.size()>0){
            
return this.createSelectDefault(parentNode,this.nodeList);
        }

        
return this.NODELIST_EMPTY;
    }

    
if(this.selectList==null){
        
this.selectList=new Array();
    }

    
this.selectList.length=nameList.length;
    
var obj=this;
    
for(var i=0;i<nameList.length;i++){
        
var select=document.createElement("select");
        select.setAttribute(
"name",nameList[i]);
        select.setAttribute(
"id",nameList[i]);
        select.options.length
=1;
        select.options[
0].value=this.defaultValue;
        select.options[
0].text=this.defaultText;
        
if(i<nameList.length-1){
            select.attachEvent(
"onchange",function(){obj.changeSelect(select);});
            
this.isAddOnChangeEvent=true;
        }

        
this.selectList[i]=select;
        parentNode.appendChild(select);
    }

    
return this.selectList.length;
}


/**
 * 创建下拉列表(默认创建方法)
 * @author BluesLee
 * @lastModif BluesLee
 * @createDate 2007-10-13
 * @lastModifDate 2007-10-13
 * @param parentNode 下拉列表父节点对象
 * @param nodeList XML文档节点集合
 * @version 1.0
 
*/

BlueCasadedSelect.prototype.createSelectDefault
= function (parentNode,nodeList) {
    
if(this.selectList==null){
        
this.selectList=new Array();
    }

    
var obj=this;
    
if(nodeList!=null && nodeList.nodeName!=null){
        
this.selectList.length=this.selectList.length+1;
        
var select=document.createElement("select");
        select.setAttribute(
"name",nodeList.nodeName);
        select.setAttribute(
"id",nodeList.nodeName);        
        select.options.length
=1;
        select.options[
0].value=this.defaultValue;
        select.options[
0].text=this.defaultText;
        
this.selectList[this.selectList.length-1]=select;
        parentNode.appendChild(select);
        
for(var i=0;i<nodeList.size();i++){            
            
var childNodeList=nodeList.getElementByIndex(i).childNodeList;
            
if(childNodeList.size()>0){
                select.attachEvent(
"onchange",function(){obj.changeSelect(select);});
                
this.isAddOnChangeEvent=true;
                
this.createSelectDefault(parentNode,childNodeList);
                
break;
            }
            
        }

    }

    
return this.selectList.length;
}


/**
 * 添加下拉列表onChange事件响应
 * @author BluesLee
 * @lastModif BluesLee
 * @createDate 2007-10-13
 * @lastModifDate 2007-10-13
 * @version 1.0
 
*/

BlueCasadedSelect.prototype.addOnChangeEvent
= function () {
    
if(this.isAddOnChangeEvent){
        
return;
    }

    
if(this.selectList==null){
        
return this.SELECTLIST_NULL;
    }

    
if(this.selectList.constructor!=Array){
        
return this.SELECTLIST_TYPE_NOT_ARRAY;
    }

    
if(this.selectList.length<=0){
        
return this.SELECTLIST_EMPTY;
    }

    
var obj=this;
    
for(var i=0;i<this.selectList.length-1;i++){
        
var select=this.selectList[i];
        select.attachEvent(
"onchange",function(){obj.changeSelect(select);});
    }

    
this.isAddOnChangeEvent=true;
}


/**
 * 初始化下拉列表
 * @author BluesLee
 * @lastModif BluesLee
 * @createDate 2007-10-13
 * @lastModifDate 2007-10-13
 * @param paramList 初始化每一级下拉默认选项参数列表
 * @param nodeList XML文档节点集合[可选参数]
 * @version 1.0
 
*/

BlueCasadedSelect.prototype.init
= function (paramList,nodeList) {
    
var currentList;
    
if(nodeList==null){
        currentList
=this.nodeList;
    }
else{
        currentList
=nodeList;
    }

    
if(this.selectList==null){
        
return this.SELECTLIST_NULL;
    }

    
if(this.selectList.constructor!=Array){
        
return this.SELECTLIST_TYPE_NOT_ARRAY;
    }

    
if(this.selectList.length<=0){
        
return this.SELECTLIST_EMPTY;
    }

    
if(this.selectList.length<currentList.nodeLevel){
        
return this.SELECTLIST_LENGTH_OUT;
    }

    
if(currentList.size()<=0){        
        
return this.NODELIST_EMPTY;
    }

    
var select=this.selectList[currentList.nodeLevel-1];
    
var defaultValue=paramList[currentList.nodeLevel-1];
    
for(var i=0;i<currentList.size();i++){
        
var nodeInfo=currentList.getElementByIndex(i);
        
var index=select.options.length;
        select.options.length
=index+1;
        select.options[index].value
=nodeInfo.key;
        select.options[index].text
=nodeInfo.value;
        
if(defaultValue!=null && defaultValue==nodeInfo.key){
            select.options[index].selected
=true;
            
if(nodeInfo.childNodeList.size()<=0){
                
for(var j=currentList.nodeLevel;j<this.selectList.length;j++){
                    
var sel=this.selectList[j];
                    
var n=sel.options.length;
                    sel.options.length
=n+1;                    
                    sel.options[n].value
=nodeInfo.key;
                    sel.options[n].text
=nodeInfo.value;
                    sel.options[n].selected
=true;
                }

            }
else{
                
this.init(paramList,nodeInfo.childNodeList);
            }

        }

    }

    
return select.options.length;
}


/**
 * 下拉列表联动
 * @author BluesLee
 * @lastModif BluesLee
 * @createDate 2007-10-13
 * @lastModifDate 2007-10-13
 * @param event 事件源下拉对象
 * @version 1.0
 
*/

BlueCasadedSelect.prototype.changeSelect
= function (event) {
    
if(event==null){
        
return this.EVENT_NULL;
    }

    
if(this.selectList==null){
        
return this.SELECTLIST_NULL;
    }

    
if(this.selectList.constructor!=Array){
        
return this.SELECTLIST_TYPE_NOT_ARRAY;
    }

    
if(this.selectList.length<=0){
        
return this.SELECTLIST_EMPTY;
    }

    
if(this.nodeList.size()<=0){
        
return this.NODELIST_EMPTY;
    }

    
var nextList=this.nodeList;
    
var nextSelect=event;
    
var flag=false;
    
var n=0;
    
for(var i=0;i<this.selectList.length;i++){
        
var select=this.selectList[i];
        
if(flag){
            
this.selectList[i].options.length=1;
        }
else{
            
if(nextList.getElementByKey(select.value)!=null){
                nextList
=nextList.getElementByKey(select.value).childNodeList;
            }
else{
                nextList
=new ChildNodeList();
            }

        }

        
if(select==event){
            nextSelect
=this.selectList[i+1];
            flag
=true;
            n
=i;
        }

    }

    
if(nextList.size()<=0 && event.value!=this.defaultValue){
        
for(var i=n+1;i<this.selectList.length;i++){
            nextSelect
=this.selectList[i];
            
var index=nextSelect.options.length;
            nextSelect.options.length
=index+1;
            nextSelect.options[index].value
=event.value;
            nextSelect.options[index].text
=event.options[event.selectedIndex].text;
            nextSelect.options[index].selected
=true;
        }

        
return nextSelect.options.length;
    }

    
for(var i=0;i<nextList.size();i++){
        
var nodeInfo=nextList.getElementByIndex(i);
        
var index=nextSelect.options.length;
        nextSelect.options.length
=index+1;
        nextSelect.options[index].value
=nodeInfo.key;
        nextSelect.options[index].text
=nodeInfo.value;
    }

    
return nextSelect.options.length;
}

 

4.创建测试页面cascaded_select.html

<!-- 深蓝忧郁级联下拉框 -->
< script  src ="BlueParseXML.js" >
//加载XML
</ script >
< script  src ="BlueCasadedSelect.js" >
//生成级联下拉
</ script >
< body >
</ body >
< script >
    
function finish(){
        alert(
"加载完成");
    }

    
var myxml=new BlueParseXML();
    
//添加xml加载完成事件响应
    myxml.loadFinish=finish;
    myxml.loadXML(
"cascaded_select.xml");
    
var level=myxml.parseXML();

    
//多级级联下拉
    var blueCasadedSelect=new BlueCasadedSelect(myxml.nodeList);
    
//生成下拉列表,下拉列表name属性为xml节点名
    blueCasadedSelect.createSelect(document.body);
    
//如果下拉列表提前已有,则不需生成,需要设置下拉列表集合为已有下拉集合,并添加onchange事件响应内容
    //blueCasadedSelect.selectList=sels;
    //blueCasadedSelect.addOnChangeEvent();
    blueCasadedSelect.init(new Array("sx","xa"));

        
//简单的树结构遍历测试
    //====================================
    document.write("<br>");
    
function iterator(list){
        
if(list.size()<=0){
            
return;
        }

        
for(var i=0;i<list.size();i++){
            
var obj=list.getElementByIndex(i);
            
for(var j=1;j<list.nodeLevel;j++){
                document.write(
"——");
            }

            document.write(
"<a href='"+obj.key+"'>"+obj.nodeLevel+obj.value+"</a><br>");
            iterator(obj.childNodeList);
        }

    }

    iterator(myxml.nodeList);
    
//====================================
</ script >

 

 

 

你可能感兴趣的:(JavaScript解析XML实现多级级联下拉列表)