posts - 1,  comments - 0,  trackbacks - 0

想要动态的根据xml文件来创建一棵Tree,采用dojo的Tree这个widget来作为载体实现,本以为很简单的工作却没有想到的麻烦。
1.使用js来load xml文件

function loadXML(xmlFile)
{
    var xmlDoc;
    if(window.ActiveXObject)
    {
        xmlDoc    = new ActiveXObject('Microsoft.XMLDOM');
        xmlDoc.async    = false;    //这里千万需要注意,非同步的选项,默认为true,后面Note 1会有解释
        xmlDoc.load(xmlFile);
    }
    else if (document.implementation&&document.implementation.createDocument)
    {
        xmlDoc  = document.implementation.createDocument('', '', null);
        xmlDoc.async=false;
        xmlDoc.load(xmlFile);
    }
    else
    {
        return null;
    }
   
    return xmlDoc;
}

function checkXMLDocObj(xmlFile)
{
    var xmlDoc    = loadXML(xmlFile);
    if(xmlDoc==null)
    {
        alert('Explore do not support xml file load');
    }
    return xmlDoc;
   
}
 
function parseXML(xml) {
 var xmlDoc    = checkXMLDocObj("/Tree/data.xml"); // 这里是文件,默认根节点叫做data
 var data = xmlDoc.getElementsByTagName("data");
createTreeFromXML(data.item(0));   //这里是一个很tricky的方式取到xml文件的根节点
var s = dojo.widget.byId("dataTree").selector;    //发现动态的给dojo的tree node加selector非常困难,但突然发现dojo tree默认给每一个节点都有selector,所以直接取来用
dojo.event.connect(s, 'select', 'treeNodeSelected');    //就是一个字了,爽
}

function createTreeFromXML(root) {
  var tree = dojo.widget.byId("dataTree");
  if(tree == null)
   alert("null");              
  else
   tree.destroy();
  tree = dojo.widget.createWidget("Tree", {id: "dataTree", toggle: "wipe", expandLevel: 3});          //创建tree
  dojo.byId("tree").appendChild(tree.domNode);                                                                          /放置tree
  
  var rootNode = dojo.widget.createWidget("TreeNode", {title: root.localName});
  tree.addChild(rootNode);
  appendChild(root,rootNode);          //开始循环递归的创建tree的子节点
 }
 
 function appendChild(father,fatherTreeNode) {
  var sub;
  var subTreeNode;
  if(window.ActiveXObject) {
   for(var i = 1; i < father.childNodes.length; i=i++) {            //这里有一个很恶心的事情,就是ie 和firefox了,一个父节点,在ie中get the child nodes,works fine
    sub = father.childNodes[i];
    var title = sub.localName;             
    subTreeNode = dojo.widget.createWidget("TreeNode",{title: title});             
    fatherTreeNode.addChild(subTreeNode);
    appendChild(sub,subTreeNode,objectID);
   }
  }
  else {
   for(var i = 1,j=1; i < father.childNodes.length; i=i+2,j++) {    // 在firefox中获取,要间隔为2,中间总是多出一个滥竽充数的家伙
    sub = father.childNodes[i];
    var title = sub.localName;                                                     //使用localName属性
    subTreeNode = dojo.widget.createWidget("TreeNode",{title: title});    //生成新的子节点
    fatherTreeNode.addChild(subTreeNode);                                      
    appendChild(sub,subTreeNode);                                                        //递归
   }
  }
  return;
 }

Note:
1. 在load xml文件的时候非同步参数一定要设置为false,否则很可能会发生在xml文件还没有load完之后就调用处理从而发生找不到节点的error
2. ie和firefox的dom child node 问题也值得注意,以后会再研究一下问什么会发生这种问题。

posted on 2007-08-20 13:45 IamEriK 阅读(719) 评论(0)  编辑  收藏

只有注册用户登录后才能发表评论。


网站导航:
 
<2007年8月>
2930311234
567891011
12131415161718
19202122232425
2627282930311
2345678

常用链接

留言簿(1)

随笔档案

文章档案

搜索

  •  

最新评论