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

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


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

          常用鏈接

          留言簿(1)

          隨筆檔案

          文章檔案

          搜索

          •  

          最新評論

          主站蜘蛛池模板: 长岛县| 广东省| 健康| 蓝山县| 津南区| 玉林市| 鲜城| 含山县| 道孚县| 星座| 东宁县| 洪江市| 拉萨市| 皮山县| 山西省| 大连市| 长泰县| 常州市| 长岭县| 门源| 申扎县| 象州县| 云霄县| 偏关县| 金昌市| 汨罗市| 金溪县| 巍山| 绥宁县| 龙江县| 旬邑县| 绥芬河市| 桃园县| 唐河县| 肃北| 达拉特旗| 闽侯县| 桂平市| 扎囊县| 阿克苏市| 应城市|