JS实现的动态树代码的一些问题?? 大家帮帮忙

Question

我想让树每次刷新都重新查数据库,不是去查临时文件,应该如何实现.
不用每次刷新还得清除临时文件.xloadtree.jswebFXTreeConfig5.loadingText = "加载中...";
webFXTreeConfig5.loadErrorTextTemplate = "错误加载！";
webFXTreeConfig5.emptyErrorTextTemplate = "该项不含有子项！";
/*
 * WebFXLoadTree5 class
 */function WebFXLoadTree5(sText, sXmlSrc, sAction, sBehavior, sIcon, sOpenIcon) {
// call super
this.WebFXTree5 = WebFXTree5;
this.WebFXTree5(sText, sAction, sBehavior, sIcon, sOpenIcon); // setup default property values
this.src = sXmlSrc;
this.loading=false;
this.loaded=false;
this.errorText = ""; // check start state and load if open
if (this.open)
_startLoadXmlTree5(this.src, this);
else {
// and create loading item if not
this._loadingItem = new WebFXTreeItem5(webFXTreeConfig5.loadingText);
this.add(this._loadingItem);
}
}WebFXLoadTree5.prototype = new WebFXTree5;// override the expand method to load the xml file
WebFXLoadTree5.prototype._webfxtree_expand = WebFXTree5.prototype.expand;
WebFXLoadTree5.prototype.expand = function() {
// load
_startLoadXmlTree5(this.src, this);
this._webfxtree_expand();
};/*
 * WebFXLoadTreeItem5 class
 */function WebFXLoadTreeItem5(sText, sXmlSrc, sAction, eParent, sIcon, sOpenIcon,sOnclick) {
// call super
this.WebFXTreeItem5 = WebFXTreeItem5;
this.WebFXTreeItem5(sText, sAction, eParent, sIcon, sOpenIcon,sOnclick); // setup default property values
this.src = sXmlSrc;
this.loading=false;
this.loaded=false;
this.errorText = ""; // check start state and load if open
if (this.open)
_startLoadXmlTree5(this.src, this);
else {
// and create loading item if not
this._loadingItem = new WebFXTreeItem5(webFXTreeConfig5.loadingText);
this.add(this._loadingItem);
}
}WebFXLoadTreeItem5.prototype = new WebFXTreeItem5;// override the expand method to load the xml file
WebFXLoadTreeItem5.prototype._webfxtreeitem_expand = WebFXTreeItem5.prototype.expand;
WebFXLoadTreeItem5.prototype.expand = function() {
// load
_startLoadXmlTree5(this.src, this);
this._webfxtreeitem_expand();
};
/*
 * Helper functions
 */// creates the xmlhttp object and starts the load of the xml document
function _startLoadXmlTree5(sSrc, jsNode) { var xmlHttp = new ActiveXObject("MSXML2.XMLHTTP");
xmlHttp.open("GET", sSrc, true); // async
xmlHttp.onreadystatechange = function () {
if (xmlHttp.readyState == 4) {
var xmlObj = new ActiveXObject( "MSXML.DomDocument");
xmlObj.loadXML(xmlHttp.responseText);
_xmlFileLoaded5(xmlObj, jsNode);
}
};
// call in new thread to allow ui to update
window.setTimeout(function () {
xmlHttp.send(null);
}, 10);
}
// Converts an xml tree to a js tree. See article about xml tree format
function _xmlTreeToJsTree5(oNode) {
// retreive attributes
var text = oNode.getAttribute("text");
var action = oNode.getAttribute("action");
var parent = null;
var icon = oNode.getAttribute("icon");
var openIcon = oNode.getAttribute("openIcon");
var src = oNode.getAttribute("src");
var target = oNode.getAttribute("target");
var onclick = oNode.getAttribute("onclick");
//alert(src);
// create jsNode
var jsNode;
if (src != null && src != ""){
jsNode = new WebFXLoadTreeItem5(text, src, action, parent, icon, openIcon,onclick);

}
else{
jsNode = new WebFXTreeItem5(text, action, parent, icon, openIcon,onclick);

}
if (target != "")
jsNode.target = target; // go through childNOdes
var cs = oNode.childNodes;
var l = cs.length;
for (var i = 0; i < l; i++) {
if (cs[i].tagName == "tree")
jsNode.add( _xmlTreeToJsTree5(cs[i]), true );
}
return jsNode;
}// Inserts an xml document as a subtree to the provided node
function _xmlFileLoaded5(oXmlDoc, jsParentNode) {
if (jsParentNode.loaded)
return; var bIndent = false;
var bAnyChildren = false;
jsParentNode.loaded = true;
jsParentNode.loading = false; // check that the load of the xml file went well // there is one extra level of tree elements
var root = oXmlDoc.documentElement; // loop through all tree children
var cs = root.childNodes;
var l = cs.length;
for (var i = 0; i < l; i++) {
if (cs[i].tagName == "tree") {
bAnyChildren = true;
bIndent = true;
jsParentNode.add( _xmlTreeToJsTree5(cs[i]), true);
}
} // if no children we got an error
if (!bAnyChildren)
jsParentNode.errorText = parseTemplateString5(webFXTreeConfig5.emptyErrorTextTemplate,
jsParentNode.src); // remove dummy
if (jsParentNode._loadingItem != null) {
jsParentNode._loadingItem.remove();
bIndent = true;
} if (bIndent) {
// indent now that all items are added
jsParentNode.indent();
} // show error in status bar
if (jsParentNode.errorText != "")
window.status = jsParentNode.errorText;
}// parses a string and replaces %n% with argument nr n
function parseTemplateString5(sTemplate) {
var args = arguments;
var s = sTemplate; s = s.replace(/\%\%/g, "%"); for (var i = 1; i < args.length; i++)
s = s.replace( new RegExp("\%" + i + "\%", "g"), args[i] ) return s;
}

Answer 1

xtree.jsvar webFXTreeConfig5 = {
rootIcon        : '/internet/XmlTree/images/root.gif',
openRootIcon    : '/internet/XmlTree/images/root.gif',
folderIcon      : '/internet/XmlTree/images/cat_close.gif',
openFolderIcon  : '/internet/XmlTree/images/cat_open.gif',
fileIcon        : '/internet/XmlTree/images/report_file.gif',
iIcon           : '/internet/XmlTree/images/I.png',
lIcon           : '/internet/XmlTree/images/L.png',
lMinusIcon      : '/internet/XmlTree/images/Lminus.png',
lPlusIcon       : '/internet/XmlTree/images/Lplus.png',
tIcon           : '/internet/XmlTree/images/T.png',
tMinusIcon      : '/internet/XmlTree/images/Tminus.png',
tPlusIcon       : '/internet/XmlTree/images/Tplus.png',
blankIcon       : '/internet/XmlTree/images/blank.png',
defaultText     : 'Tree Item',
defaultAction   : 'javascript:linkUrl();',
defaultBehavior : 'classic',
usePersistence : false
};var webFXTreeHandler5 = {
idCounter : 0,
idPrefix  : "5webfx-tree-object-",
all       : {},
behavior  : null,
selected  : null,
onSelect  : null, /* should be part of tree, not handler */
getId     : function() { return this.idPrefix + this.idCounter++; },
toggle    : function (oItem) { this.all[oItem.id.replace('-plus','')].toggle(); },
select    : function (oItem) { this.all[oItem.id.replace('-icon','')].select(); },
focus     : function (oItem) { this.all[oItem.id.replace('-anchor','')].focus(); },
blur      : function (oItem) { this.all[oItem.id.replace('-anchor','')].blur(); },
keydown   : function (oItem, e) { return this.all[oItem.id].keydown(e.keyCode); },
insertHTMLBeforeEnd : function (oElement, sHTML) {
if (oElement.insertAdjacentHTML != null) {
oElement.insertAdjacentHTML("BeforeEnd", sHTML)
return;
}
var df; // DocumentFragment
var r = oElement.ownerDocument.createRange();
r.selectNodeContents(oElement);
r.collapse(false);
df = r.createContextualFragment(sHTML);
oElement.appendChild(df);
}
};/*
 * WebFXTreeAbstractNode5 class
 */function WebFXTreeAbstractNode5(sText, sAction,sOnclick) {
this.childNodes  = [];
this.id      = webFXTreeHandler5.getId();
this.text    = sText || webFXTreeConfig5.defaultText;
// this.action  = sAction || webFXTreeConfig5.defaultAction;

this.action=sAction;

this.onclick = sOnclick || "" ; //added by zhangchc ,默认点击事件
this._last  = false;
webFXTreeHandler5.all[this.id] = this;
}

Answer 2

/*
 * To speed thing up if you're adding multiple nodes at once (after load)
 * use the bNoIdent parameter to prevent automatic re-indentation and call
 * the obj.ident() method manually once all nodes has been added.
 */WebFXTreeAbstractNode5.prototype.add = function (node, bNoIdent) {
node.parentNode = this;
this.childNodes[this.childNodes.length] = node;
var root = this;
if (this.childNodes.length >= 2) {
this.childNodes[this.childNodes.length - 2]._last = false;
}
while (root.parentNode) { root = root.parentNode; }
if (root.rendered) {
if (this.childNodes.length >= 2) {
document.getElementById(this.childNodes[this.childNodes.length - 2].id + '-plus').src = ((this.childNodes[this.childNodes.length -2].folder)?((this.childNodes[this.childNodes.length -2].open)?webFXTreeConfig5.tMinusIcon:webFXTreeConfig5.tPlusIcon):webFXTreeConfig5.tIcon);
this.childNodes[this.childNodes.length - 2].plusIcon = webFXTreeConfig5.tPlusIcon;
this.childNodes[this.childNodes.length - 2].minusIcon = webFXTreeConfig5.tMinusIcon;
this.childNodes[this.childNodes.length - 2]._last = false;
}
this._last = true;
var foo = this;
while (foo.parentNode) {
for (var i = 0; i < foo.parentNode.childNodes.length; i++) {
if (foo.id == foo.parentNode.childNodes[i].id) { break; }
}
if (i == foo.parentNode.childNodes.length - 1) { foo.parentNode._last = true; }
else { foo.parentNode._last = false; }
foo = foo.parentNode;
}
webFXTreeHandler5.insertHTMLBeforeEnd(document.getElementById(this.id + '-cont'), node.toString());
if ((!this.folder) && (!this.openIcon)) {
this.icon = webFXTreeConfig5.folderIcon;
this.openIcon = webFXTreeConfig5.openFolderIcon;
}
if (!this.folder) { this.folder = true; this.collapse(true); }
if (!bNoIdent) { this.indent(); }
}
return node;
}WebFXTreeAbstractNode5.prototype.toggle = function() {
if (this.folder) {
if (this.open) { this.collapse(); }
else { this.expand(); }
} }WebFXTreeAbstractNode5.prototype.select = function() {
document.getElementById(this.id + '-anchor').focus();
}WebFXTreeAbstractNode5.prototype.deSelect = function() {
document.getElementById(this.id + '-anchor').className = '';
webFXTreeHandler5.selected = null;
}WebFXTreeAbstractNode5.prototype.focus = function() {
if ((webFXTreeHandler5.selected) && (webFXTreeHandler5.selected != this)) { webFXTreeHandler5.selected.deSelect(); }
webFXTreeHandler5.selected = this;
if ((this.openIcon) && (webFXTreeHandler5.behavior != 'classic')) { document.getElementById(this.id + '-icon').src = this.openIcon; }
document.getElementById(this.id + '-anchor').className = 'selected';
document.getElementById(this.id + '-anchor').focus();
if (webFXTreeHandler5.onSelect) { webFXTreeHandler5.onSelect(this); }
}WebFXTreeAbstractNode5.prototype.blur = function() {
if ((this.openIcon) && (webFXTreeHandler5.behavior != 'classic')) { document.getElementById(this.id + '-icon').src = this.icon; }
document.getElementById(this.id + '-anchor').className = 'selected-inactive';
}WebFXTreeAbstractNode5.prototype.doExpand = function() {
if (webFXTreeHandler5.behavior == 'classic') { document.getElementById(this.id + '-icon').src = this.openIcon; }
if (this.childNodes.length) {  document.getElementById(this.id + '-cont').style.display = 'block'; }
this.open = true;
}WebFXTreeAbstractNode5.prototype.doCollapse = function() {
if (webFXTreeHandler5.behavior == 'classic') { document.getElementById(this.id + '-icon').src = this.icon; }
if (this.childNodes.length) { document.getElementById(this.id + '-cont').style.display = 'none'; }
this.open = false;
}WebFXTreeAbstractNode5.prototype.expandAll = function() {
this.expandChildren();
if ((this.folder) && (!this.open)) { this.expand(); }
}WebFXTreeAbstractNode5.prototype.expandChildren = function() {
for (var i = 0; i < this.childNodes.length; i++) {
this.childNodes[i].expandAll();
} }WebFXTreeAbstractNode5.prototype.collapseAll = function() {
this.collapseChildren();
if ((this.folder) && (this.open)) { this.collapse(true); }
}WebFXTreeAbstractNode5.prototype.collapseChildren = function() {
for (var i = 0; i < this.childNodes.length; i++) {
this.childNodes[i].collapseAll();
} }WebFXTreeAbstractNode5.prototype.indent = function(lvl, del, last, level, nodesLeft) {
/*
 * Since we only want to modify items one level below ourself,
 * and since the rightmost indentation position is occupied by
 * the plus icon we set this to -2
 */
if (lvl == null) { lvl = -2; }
var state = 0;
for (var i = this.childNodes.length - 1; i >= 0 ; i--) {
state = this.childNodes[i].indent(lvl + 1, del, last, level);
if (state) { return; }
}
if (del) {
if ((level >= this._level) && (document.getElementById(this.id + '-plus'))) {
if (this.folder) {
document.getElementById(this.id + '-plus').src = (this.open)?webFXTreeConfig5.lMinusIcon:webFXTreeConfig5.lPlusIcon;
this.plusIcon = webFXTreeConfig5.lPlusIcon;
this.minusIcon = webFXTreeConfig5.lMinusIcon;
}
else if (nodesLeft) { document.getElementById(this.id + '-plus').src = webFXTreeConfig5.lIcon; }
return 1;
} }
var foo = document.getElementById(this.id + '-indent-' + lvl);
if (foo) {
if ((foo._last) || ((del) && (last))) { foo.src =  webFXTreeConfig5.blankIcon; }
else { foo.src =  webFXTreeConfig5.iIcon; }
}
return 0;
}

Answer 3

/*
 * WebFXTree5 class
 */function WebFXTree5(sText, sAction, sBehavior, sIcon, sOpenIcon,sOnclick) {
this.base = WebFXTreeAbstractNode5;
this.base(sText, sAction,sOnclick);
this.icon      = sIcon || webFXTreeConfig5.rootIcon;
this.openIcon  = sOpenIcon || webFXTreeConfig5.openRootIcon;
/* Defaults to open */
this.open  = true;
this.folder    = true;
this.rendered  = false;
this.onSelect  = null;
if (!webFXTreeHandler5.behavior) {  webFXTreeHandler5.behavior = sBehavior || webFXTreeConfig5.defaultBehavior; }
}WebFXTree5.prototype = new WebFXTreeAbstractNode5;WebFXTree5.prototype.setBehavior = function (sBehavior) {
webFXTreeHandler5.behavior =  sBehavior;
};WebFXTree5.prototype.getBehavior = function (sBehavior) {
return webFXTreeHandler5.behavior;
};WebFXTree5.prototype.getSelected = function() {
if (webFXTreeHandler5.selected) { return webFXTreeHandler5.selected; }
else { return null; }
}WebFXTree5.prototype.remove = function() { }WebFXTree5.prototype.expand = function() {
this.doExpand();
}WebFXTree5.prototype.collapse = function(b) {
if (!b) { this.focus(); }
this.doCollapse();
}WebFXTree5.prototype.getFirst = function() {
return null;
}WebFXTree5.prototype.getLast = function() {
return null;
}WebFXTree5.prototype.getNextSibling = function() {
return null;
}WebFXTree5.prototype.getPreviousSibling = function() {
return null;
}WebFXTree5.prototype.keydown = function(key) {
if (key == 39) {
if (!this.open) { this.expand(); }
else if (this.childNodes.length) { this.childNodes[0].select(); }
return false;
}
if (key == 37) { this.collapse(); return false; }
if ((key == 40) && (this.open) && (this.childNodes.length)) { this.childNodes[0].select(); return false; }
return true;
}WebFXTree5.prototype.toString = function() {
var str = "<div id=\"" + this.id + "\" ondblclick=\"webFXTreeHandler5.toggle(this);\" class=\"webfx-tree-item\" onkeydown=\"return webFXTreeHandler5.keydown(this, event)\">" +
"<img id=\"" + this.id + "-icon\" class=\"webfx-tree-icon\" src=\"" + ((webFXTreeHandler5.behavior == 'classic' && this.open)?this.openIcon:this.icon) + "\" onclick=\"webFXTreeHandler5.select(this);\">" +
"<a href=\"\" id=\"" + this.id + "-anchor\" onfocus=\"webFXTreeHandler5.focus(this);\" onblur=\"webFXTreeHandler5.blur(this);\"" +
(this.target ? " target=\"" + this.target + "\"" : "") +
">" + this.text + "</a></div>" +
"<div id=\"" + this.id + "-cont\" class=\"webfx-tree-container\" style=\"display: " + ((this.open)?'block':'none') + ";\">";
var sb = [];
for (var i = 0; i < this.childNodes.length; i++) {
sb[i] = this.childNodes[i].toString(i, this.childNodes.length);
}
this.rendered = true;

return str + sb.join("") + "</div>";
};

Answer 4

调用输出xml文件的那个地址的时候，增加一个随机数就好了。