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 閱讀(726) 評論(0)  編輯  收藏

          只有注冊用戶登錄后才能發表評論。


          網站導航:
           
          <2007年8月>
          2930311234
          567891011
          12131415161718
          19202122232425
          2627282930311
          2345678

          常用鏈接

          留言簿(1)

          隨筆檔案

          文章檔案

          搜索

          •  

          最新評論

          主站蜘蛛池模板: 新郑市| 苏尼特右旗| 寿宁县| 舒兰市| 门源| 桐梓县| 绥化市| 潮安县| 都安| 多伦县| 无棣县| 仪陇县| 和政县| 彰化县| 涞水县| 克山县| 云林县| 揭东县| 烟台市| 文安县| 成都市| 南京市| 改则县| 安丘市| 牙克石市| 六盘水市| 长兴县| 福海县| 冕宁县| 崇文区| 桦川县| 庆云县| 波密县| 新乐市| 壶关县| 江山市| 永定县| 明光市| 寿阳县| 嘉峪关市| 民勤县|