想要动态的根据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 阅读(721)
评论(0) 编辑 收藏