- 浏览: 74428 次
- 性别:
- 来自: 临沂
-
文章分类
最新评论
-
yuanke:
呵呵,早就解决了!
JDIC做了一个IE浏览器 -
lzj0470:
兄弟,解决了吗?我这几天,也是遇到这样的问题。指定JRE,不能 ...
JDIC做了一个IE浏览器 -
yefansiping:
这个问题在3.0里面解决了,可是我的这块还是出现这样的问题了, ...
from提交的数据到后台是乱码 -
treblesoftware:
STRUTS2还是很好用,很简单的,把它有些鸡胁功能去掉之后, ...
学struts2有感 -
ranLoD:
恰巧我最痛恨的就是struts自带标签怎么办了,<s:f ...
学struts2有感
最近 刚开始 树节点的加载,看了 一篇 文章不错,转转过来共享一下
BeanSoft 评价: 这个树组件并不算尽善尽美, 但是它是自成体系的基于面向对象的, 基于AJAX + XML + DOM 的,个头也比较小, 比较容易使用和扩展(当然您得熟悉 JS 对象编码了)
本文已经翻译完毕, 原始版本可以在这里下载: http://webfx.eae.net/dhtml/xloadtree/xloadtree.html. 全文打包下载:
xloadtree_zh_cn.zip
54KB
xloadtree.html:
(2006-05-28) Changed license to Apache Software License 2.0.
(2003-05-06) Added target attribute support
(2002-10-10) Added reload method
(2006-05-28) 更改许可证为 Apache Software License 2.0.
(2003-05-06) 添加对 target 属性的支持
(2002-10-10) 添加 reload 方法
Introduction 介绍
About a year ago Emil visited me while I was living in USA and he came up with a brilliant idea for a next generation DHTML tree. After some discussions about this it took shape and in the end it turned out to be one of the best DHTML tree scripts I've ever seen.
大概一年之前我还住在美国的时候 Emil 造访了我, 他带来了一个很炫的关于下一代的 DHTML 树组件的想法. 经过了一番讨论之后, 这个想法成型了, 最后它被证明是一个我所见过的最棒的 DHTML 树组件脚本.
Since the original xTree script is implemented using Object Oriented JS it is very easy to extend and as soon as it started to take shape we got some wild ideas on how one could extend the tree. One idea that Emil implemented in the original tree was to add support for persistance. Another idea I had some time later was to allow subtrees to be loaded and populated at runtime. For this to work the xTree had to be updated a little to support data model changes at runtime. Emil added support for this after a while and now nothing was in my way to add the dynamic loading support.
既然原来的 xTree 脚本是做作为面向对象的 JS 实现的, 所以它很容易的进行扩展, 当它刚刚成型的时候, 我们就有一些关于如何扩展它的疯狂的想法.其中的一个想法就是 Emil 对原来的树添加了持久化的实现. 另一个之后不久我提出的想法是允许运行的时候加载和填充子树. 对此 xTree 必须有点小小的更新来支持运行时候的数据模型的改变. 后来 Emil 对此添加了支持, 现在我所做的不过就是添加了动态加载的支持.
译者注: 其实用的就是现在炒的很热的 AJAX 技术, 通过 XMLHttpRequest 读取内容, 通过 DOM 来解析 XML 内容.
Dynamic loading 动态加载
The XLoadTree is an extended version of the xTree and it allows you to define a source property for each tree item that points to an xml file that is then loaded, transformed using DOM and inserted using tree item methods. The basic mechanism for this has been working for a long time but since I wanted to cover the xml loading mechanisms before writing this article it is not until now that I can publish this.
LoadTree 是 xTree 的扩展版本, 它让你可以对每个树的节点定义一个 source 属性, 这个属性指向一个 xml 文件, 然后它可以被载入, 使用 DOM 转换, 插入, 这些都可以用树节点的方法来做. 相关的底层的机制已经使用了很长时间了, 因此我想在 xml 加载机制 中介绍它, 这个文章在我写本文之前都已经发表了.
Known Issues 已知的问题
The persistance from the original xTree is not sophisticated enough for dynamic loaded trees because the original persistance is dependent on the order of insertion and not the path. I will try to fix this in a later update.
原来的 xTree 中的持久化机制对动态加载的树来说并不是十分灵活, 因为它依赖于树的插入顺序而不是路径. 我将尝试在后一更新版本中修正这个问题.
The xml object has some issues when using the file protocol (in IE) so this one only works when located on a web server. I'll see what can be done about this.
使用 file 协议的时候(在 IE中), xml 对象会有一些问题, 所以这个脚本将只能在服务器上加载的时候才能运行. 我将找找看怎么搞定这个问题.
译者注:就是说在本机执行的时候, 在 Firefox, Opera, Mozilla 浏览器中, 使用 file 协议工作的很好, 但是 IE 浏览器下会弹出一个空的消息框, 无法载入子节点.
介绍
使用说明
API
实现
演示
下载
作者: Erik Arvidsson
中文翻译: BeanSoft
usage.html
Usage 用法
The usage of the XLoadTree is almost identical to the xTree so if you do not remember how that is done take a look at the xTree usage. Anywhere the original xTree accepts a WebFXTree you can use a WebFXLoadTree and the same applies to WebFXTreeItem and WebFXLoadTreeItem.
XLoadTree 的用法几乎和 xTree 相同, 所以您记不得如何做的时候不要忘了看一下 xTree 用法. 任何原来的 WebFXTree 可以使用 xTree 的地方都可以使用 WebFXLoadTree, 这个规则也同样适用于WebFXTreeItem 和 WebFXLoadTreeItem.
Taking the first example in the xTree usage and instead of using a WebFXTreeItem for the second tree item we use the load counterpart.
让我们看看第一个 xTree 用法的例子, 注意我们在第二个树节点的地方使用了对应的可载入树节点代替了 WebFXTreeItem.
var tree = new WebFXTree("Root");
tree.add(new WebFXTreeItem("Tree Item 1"));
tree.add(new WebFXLoadTreeItem("Tree Item 2", "tree.xml"));
tree.add(new WebFXTreeItem("Tree Item 3"));
document.write(tree);
The code above should result in something looking like this:
上面的代码将会产生如下结果:
When Tree Item 2 is expanded the file tree.xml is loaded and during the load a dummy tree item is inserted to show that the subcontent is loading. This looks something like this:
当 Tree Item 2 被展开的时候文件 tree.xml 被载入, 在加载的时候插入一个临时的树节点来显示子节点正在被载入中. 看起来就像这样:
The XML format XML 文件格式
To be able to transform the xml file to an xTree the xml file must be of a certain format. Below is the xml code from the file tree.xml:
要想从 xml 文件转换成 xTree, xml 文件必须符合一个固定的格式. 下面是文件 tree.xml 中的 xml 代码:
<?xml version="1.0"?>
<tree>
<tree text="Loaded Item 1" action="href://webfx.eae.net" />
<tree text="Loaded Item 2">
<tree text="Loaded Item 2.1" action="javascript:alert(2.1)" />
<tree text="Load "tree1.xml"" src="tree1.xml" />
</tree>
<tree text="Loaded Item 3" />
</tree>
When this xml file has been loaded and inserted into the tree it looks something like this:
当这个 xml 文件加载并且插入到树中后它看起来就像这样:
Notice how the XML structure can contain nested tree items and tree items that points to other xml files. Notice also the top level tree item that is used to contain all the tree items that are supposed to be inserted into the current WebFXLoadTreeItem.
注意 XML 的结构, 它可以包含嵌套的子节点以及指向其它xml文件的子节点. 也请留意最顶端的树节点被用来包含所有的假定为要插入当前WebFXLoadTreeItem的所有子节点.
To see what xml attributes are supported on the tree items see the api page.
要了解树节点支持什么样的 xml 属性, 请浏览 api 页.
介绍
使用说明
API
实现
演示
下载
作者: Erik Arvidsson
中文翻译: BeanSoft
api.html
WebFXLoadTree
This object type is used to create the actual tree root and can be used to populate the tree with tree items loaded from an xml file.
这个对象类型用来创建实际的树的根节点, 并且可以被用来向树添加从一个 xml 文件中定义的树节点.
The WebFXLoadTree extends WebFXTree (see the xTree API) so all properties and methods provided by WebFXTree are available.
WebFXLoadTree 继承自 WebFXTree (请阅读 xTree API) , 因此WebFXTree提供的所有的属性和方法都可用.
Constructor 构造器
new WebFXLoadTree(sText, sXmlSrc, sAction, sBehavior, sIcon, sOpenIcon)
Name
名称 Description
描述
sText The text label for the tree root.
树的根节点的文本标签.
sXmlSrc The source for the xml file to load when expanded.
当展开时要加载的xml文件的源路径.
sAction Optional. The action (uri) associated with the tree root.
可选. 根节点关联的操作(uri地址).
sBehavior Optional. The behavior of the tree. Valid values are "classic" and "explorer". When the value is set to "explorer" the default icon for an empty item is the same as the folder icon.
可选. 树的表现方式. 可用的值包括 "classic" 和 "explorer". 当值为 "explorer" 时空节点默认的图标和文件夹图标一样.
sIcon Optional. The icon image to use for this item. In case this item is a folder this will be used when the folder is closed.
可选. 节点所使用的图标文件. 如果这个节点是个文件夹, 这个值将在节点被关闭的时候使用.
sOpenIcon Optional. The icon image to use for this item when it is opened. This is only used for folder items that are opened/expanded.
可选. 节点打开时使用的图标文件. 这个值仅仅对文件夹节点被打开或者展开的时候有效.
Properties 属性
Name
名称 Description
描述
All properties from WebFXTree.
WebFXTree 的所有属性.
src The source to the xml file that decribes the sub trees. Notice that this is read-only after the xml file has started to load so any changes done to the source are only valid before the loading of the first file.
描述子树的xml文件的源路径. 注意这个值将在 xml 文件开始载入后变为只读, 所以任何对这个值的修改只在第一个文件载入之前生效.
loading Read only. A boolean flag which is true if the xml file has started loading and not yet finished.
只读. 布尔变量, xml 文件开始加载但是尚未加载完的时候为 true.
loaded Read only. A boolean flag which is true if the xml file has been loaded.
只读. 布尔变量, xml 文件加载完成的时候为 true.
errorText Read only String. If the loading for any reason failed the reason can be found in the errorText property. If no error occured this is "" (an empty string).
只读字符串. 如果加载因为任何原因失败, 这个原因可以在 errorText 属性中找到. 如果没有错误它的值时 ""(空字符串).
Methods 方法
Name
名称 Description
描述
reload() Reloads the XML file from the server and recreates the children of this node.
重新从服务器载入 XML 文件, 并重建这个节点的子节点.
All methods from WebFXTree. 所有继承自 WebFXTree 的方法.
WebFXLoadTreeItem
This object type is used to create tree items that can be added to the tree root, or to other tree items to create sub folders in the tree. When an WebFXLoadTreeItem is expanded an xml file is loaded that is then used to populate the item with child items.
这个对象类型用来创建可以加入树根节点的树节点, 或者可以作为子目录添加到别的树节点. 当一个 WebFXLoadTreeItem 节点被展开的时候, 将会加载用于填充子节点的 xml 文件.
The WebFXLoadTreeItem extends WebFXTreeItem (see the xTree API) so all properties and methods provided by WebFXTreeItem are available.
WebFXLoadTreeItem 继承自 WebFXTreeItem (请查看 xTree API), 因此WebFXTreeItem提供的所有的属性和方法都可用.
Constructor 构造器
new WebFXLoadTreeItem(sText, sXmlSrc, sAction, eParent, sIcon, sOpenIcon)
Name
名称 Description
描述
sText The text label for the tree item.
树节点的文本标签.
sXmlSrc The source for the xml file to load when expanded.
当展开时要加载的xml文件的源路径.
sAction Optional. The action (uri) associated with the tree item.
可选. 节点关联的操作(uri地址).
eParent Optional. The parent WebFXTreeItem or WebFXTree that the item should be added to.
可选. 当前节点要添加进去的父节点, 可以为 WebFXTreeItem 或者 WebFXTree.
sIcon Optional. The icon image to use for this item. In case this item is a folder this will be used when the folder is closed.
可选. 节点所使用的图标文件. 如果这个节点是个文件夹, 这个值将在节点被关闭的时候使用.
sOpenIcon Optional. The icon image to use for this item when it is opened. This is only used for folder items that are opened/expanded.
可选. 节点打开时使用的图标文件. 这个值仅仅对文件夹节点被打开或者展开的时候有效.
Properties 属性
Name
名称 Description
描述
All properties from WebFXTreeItem. 继承自 WebFXTreeItem 的所有属性.
src The source to the xml file that decribes the sub trees. Notice that this is read-only after the xml file has started to load so any changes done to the source are only valid before the loading of the first file.
描述子树的xml文件的源路径. 注意这个值将在 xml 文件开始载入后变为只读, 所以任何对这个值的修改只在第一个文件载入之前生效.
loading Read only. A boolean flag which is true if the xml file has started loading and not yet finished.
只读. 布尔变量, xml 文件开始加载但是尚未加载完的时候为 true.
loaded Read only. A boolean flag which is true if the xml file has been loaded.
只读. 布尔变量, xml 文件加载完成的时候为 true.
errorText Read only String. If the loading for any reason failed the reason can be found in the errorText property. If no error occured this is "" (an empty string).
只读字符串. 如果加载因为任何原因失败, 这个原因可以在 errorText 属性中找到. 如果没有错误它的值时 ""(空字符串).
Methods 方法
Name Description
reload() Reloads the XML file from the server and recreates the children of this node.
重新从服务器载入 XML 文件, 并重建这个节点的子节点.
All methods from WebFXTree. 所有继承自 WebFXTree 的方法.
The xml format xml 格式
The only valid element in the xml file is the tree item. A tree item can contain zero, one or more tree items.
xml 文件中唯一有效的元素就是 tree 节点. 一个tree节点可以包含零个,一个或者更多tree节点.
Attributes 属性
There are five valid attributes that you can provide on a tree item.
您可以为一个 tree 节点提供 5 个有效的属性.
Name
名称 Description
描述
text Required. The text label for the tree item.
必需. 树节点的文本标签.
xmlSrc Optional. The source for the xml file to load when expanded.
可选. 当展开时要加载的xml文件的源路径.
action Optional. The action (uri) associated with the tree item.
可选. 节点关联的操作(uri地址).
icon Optional. The icon image to use for this item. In case this item is a folder this will be used when the folder is closed.
可选. 节点所使用的图标文件. 如果这个节点是个文件夹, 这个值将在节点被关闭的时候使用.
openIcon Optional. The icon image to use for this item when it is opened. This is only used for folder items that are opened/expanded.
可选. 节点打开时使用的图标文件. 这个值仅仅对文件夹节点被打开或者展开的时候有效.
DTD
The xml file does not have to be valid to work (only well formed) but if you want to ensure that you didn't do anything wrong you can use the following document type definition:
xml 文件并不必须是有效的格式才能工作(只需要良好的组织起来), 但是如果你想确保你没有写错, 可以使用下面的文档类型定义:
<!ELEMENT tree (tree*)>
<!ATTLIST tree
text CDATA #REQUIRED
src CDATA #IMPLIED
action CDATA #IMPLIED
icon CDATA #IMPLIED
openIcon CDATA #IMPLIED>
To use the dtd in your xml file add a DOCTYPE to the head of your xml file. Below is tree.dtd.xml shown. This represents the same xml tree as in tree.xml with a DOCTYPE declaration.
在你的 xml 文件中使用这个 dtd 请在文件的开头包含一个 DOCTYPE. 下面显示的是 tree.dtd.xml . 这个表示了和 tree.xml 中相同的 xml 树, 只不过有一个 DOCTYPE 声明.
<?xml version="1.0"?>
<!DOCTYPE tree SYSTEM "tree.dtd">
<tree>
<tree text="Loaded Item 1" action="href://webfx.eae.net" />
<tree text="Loaded Item 2">
<tree text="Loaded Item 2.1" action="javascript:alert(2.1)" />
</tree>
<tree text="Load "tree1.xml"" src="tree1.xml" />
</tree>
介绍
使用说明
API
实现
演示
下载
作者: Erik Arvidsson
中文翻译: BeanSoft
Implementation 实现
The main idea is to create sub classes to WebFXTree and WebFXTreeItem and overload the expand methods to start the loading of an xml file. Once the loading is done the xml file is tranformed into WebFXTreeItems and WebFXLoadTreeItems and inserted.
主要的思路就是创建 WebFXTree 和 WebFXTreeItem 的子类, 并且重载 expand 方法来启动加载 xml 文件的过程. 一旦加载结束, xml 文件被转换成 WebFXTreeItems 和 WebFXLoadTreeItems, 然后添加到树上.
译者注: 这里就是面向对象的好处了, 我也用重载或者添加新方法的思路实现了动态添加子节点, 添加失败则回复到原来状态, 成功则加入新的子节点.
WebFXLoadTree
First we create a new constructor and inside this we call the super constructor to make sure that the instance will be correctly initiated. After that we set some property values and finally we check whether the tree is open, if it is we start to load the sub trees. If not, we add a dummy tree item that displays the loading text.
首先我们创建了一个新的构造器, 在这个方法里面我们首先调用父类的构造器来确保每个实例可以被正确的初始化. 在此之后我们设置一些属性值, 最后我们检查树是否已经被打开, 如果这样的话我们就开始加载树的子节点. 反之, 我们向树节点中添加一个临时的显示正在加载文本的树节点.
After the constructor is created we set the protype to a new WebFXTree.
function WebFXLoadTree(sText, sXmlSrc, sAction, sBehavior, sIcon, sOpenIcon) {
// call super
this.WebFXTree = WebFXTree;
this.WebFXTree(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)
_startLoadXmlTree(this.src, this);
else {
// and create loading item if not
this._loadingItem = new WebFXTreeItem(webFXTreeConfig.loadingText);
this.add(this._loadingItem);
}
}
WebFXLoadTree.prototype = new WebFXTree;
The constructor is fairly straight forward and does not do much. Notice however how super is called by binding WebFXTree as a method and then calling it.
这个构造器是相当的直接, 并没有做太多事. 尽管如此请注意我们是如何将父类绑定为了一个方法然后调用它的.
Next we need to override the expand method but since we still need to be able to call the original expand method we create a new method called _webfxtree_expand that points to the function object used by WebFXTree objects. This is the standard way to access super methods but the first few times it might look a bit odd.
现在我们需要重载 expand 方法, 但是我们依然需要调用原来的 expand 方法, 因此我们创建了一个新方法_webfxtree_expand来指向WebFXTree的原来的那个 expand 方法对象. 这是个标准的调用父类的方法, 但是最初的几次看起来似乎是有点多余.
The logic in the expand method is really simple. We just check if we should start loading the xml file and then we expand it using the super expand (_webfxtree_expand) method.
expand 方法的逻辑是相当的简单. 我们只是检查是否应该开始载入 xml 文件, 然后使用父类的expand方法(_webfxtree_expand)来展开它.
// override the expand method to load the xml file
WebFXLoadTree.prototype._webfxtree_expand = WebFXTree.prototype.expand;
WebFXLoadTree.prototype.expand = function() {
if (!this.loaded && !this.loading) {
// load
_startLoadXmlTree(this.src, this);
}
this._webfxtree_expand();
};
WebFXLoadTreeItem
This class is too similar to WebFXLoadTree for me to be entirely comfortable. Since JavaScript does not support multiple inheritance, and I did not want to fake it using expandos, we just have to repeat the code. For everyone that are interested, the code for this can be found in xloadtree.js.
这个类和WebFXLoadTree太相似了, 对我来说是完全的相同. 因为 JavaScript 不提供多重继承, 我也不想使用 expandos 来欺骗它, 我们只是不得不重复代码. 如果您对此感兴趣, 这些代码可以在 xloadtree.js 中找到.
Loading the Tree 载入树
As you can see in the code above there is a function called _startLoadXmlTree that is called to load the actual xml file. This function uses an XmlHttp object to do the actual loading. The loading of the xml file is done asynchronously to prevent the UI to lock up while the file is being loaded and therefore we wait for the onreadystatechange event to fire before we continue. See the Xml Extras article for a more detailed description about the XmlHttp object.
你可以看到上面已经有了个方法叫 _startLoadXmlTree, 它将被用来加载实际的 xml 文件. 这个方法使用了严格 XmlHttp 对象来执行真正的加载. 对 xml 文件的载入使用了异步方式来防止文件正在读取的时候 UI 被锁定, 因此我们等待 onreadystatechange事件被触发之后才继续进行. 请阅读 Xml 增强文章 来了解关于 XmlHttp 对象的更多信息.
// creates the xmlhttp object and starts the load of the xml document
function _startLoadXmlTree(sSrc, jsNode) {
jsNode.loading = true;
var xmlHttp = XmlHttp.create();
xmlHttp.open("GET", sSrc, true); // async
xmlHttp.onreadystatechange = function () {
if (xmlHttp.readyState == 4)
_xmlFileLoaded(xmlHttp.responseXML, jsNode);
};
// call in new thread to allow ui to update
window.setTimeout(function () {
xmlHttp.send(null);
}, 10);
}
Once the xml file has finished loading we call the function _xmlFileLoaded. This function checks that we got an xml document back and if we did it goes through the document and recursively converts the xml elements to js WebFXTreeItem and inserts them. Once the xml elements have been converted and inserted we remove the dummy tree item that was only used to show that we were loading the contents.
一旦 xml 文件加载完毕, 我们调用方法 _xmlFileLoaded. 这个方法检查我们得到的 xml 文件, 如果得到了文件内容我们将递归转换 xml 元素到 js 的 WebFXTreeItem 对象, 然后添加他们. 一旦 xml 元素转换并添加完毕, 我们将删除那个临时的只不过是用来显示正在加载内容的树节点.
// Inserts an xml document as a subtree to the provided node
function _xmlFileLoaded(oXmlDoc, jsParentNode) {
var bIndent = false;
var bAnyChildren = false;
jsParentNode.loaded = true;
jsParentNode.loading = false;
// check that the load of the xml file went well
if( oXmlDoc == null || oXmlDoc.documentElement == null) {
jsParentNode.errorText = parseTemplateString(webFXTreeConfig.loadErrorTextTemplate,
jsParentNode.src);
}
else {
// 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( _xmlTreeToJsTree(cs[i]), true);
}
}
// if no children we got an error
if (!bAnyChildren)
jsParentNode.errorText = parseTemplateString(webFXTreeConfig.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;
}
A few more things happen in this function but nothing really important. There is some code that checks the errors and a few properties are set to reflect the state of the WebFXLoadTree or WebFXLoadTreeItem object.
其它一些这个方法中发生更多的事情并不是很重要. 有一些代码来检查错误, 一些属性被设置, 来显示 WebFXLoadTree 和 WebFXLoadTreeItem 的状态.
Converting the Xml 转换 Xml
The only important thing left to do is to convert the xml tree item to a js WebFXTreeItem. This is done in the function _xmlTreeToJsTree. Here we retreive the xml attributes and if there was a src attribute defined we create a new WebFXLoadTreeItem and otherwise a WebFXTreeItem. Once that is created we go through all the childNodes of the xml node and convert and add those as well.
剩下的唯一要做的重要的事情就是转换 xml 树节点为 js WebFXTreeItem 对象. 这在方法 _xmlTreeToJsTree 中完成. 在这里读取 xml 属性值, 如果有 src 属性我们就创建一个 WebFXLoadTreeItem 对象, 否则就创建 WebFXTreeItem. 一旦创建完成, 我们就遍历所有 xml 节点的 childNodes, 转换并添加他们.
// Converts an xml tree to a js tree. See article about xml tree format
function _xmlTreeToJsTree(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");
// create jsNode
var jsNode;
if (src != null && src != "")
jsNode = new WebFXLoadTreeItem(text, src, action, parent, icon, openIcon);
else
jsNode = new WebFXTreeItem(text, action, parent, icon, openIcon);
// 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( _xmlTreeToJsTree(cs[i]), true );
}
return jsNode;
}
介绍
作者: Erik Arvidsson
中文翻译: BeanSoft
BeanSoft 评价: 这个树组件并不算尽善尽美, 但是它是自成体系的基于面向对象的, 基于AJAX + XML + DOM 的,个头也比较小, 比较容易使用和扩展(当然您得熟悉 JS 对象编码了)
本文已经翻译完毕, 原始版本可以在这里下载: http://webfx.eae.net/dhtml/xloadtree/xloadtree.html. 全文打包下载:
xloadtree_zh_cn.zip
54KB
xloadtree.html:
(2006-05-28) Changed license to Apache Software License 2.0.
(2003-05-06) Added target attribute support
(2002-10-10) Added reload method
(2006-05-28) 更改许可证为 Apache Software License 2.0.
(2003-05-06) 添加对 target 属性的支持
(2002-10-10) 添加 reload 方法
Introduction 介绍
About a year ago Emil visited me while I was living in USA and he came up with a brilliant idea for a next generation DHTML tree. After some discussions about this it took shape and in the end it turned out to be one of the best DHTML tree scripts I've ever seen.
大概一年之前我还住在美国的时候 Emil 造访了我, 他带来了一个很炫的关于下一代的 DHTML 树组件的想法. 经过了一番讨论之后, 这个想法成型了, 最后它被证明是一个我所见过的最棒的 DHTML 树组件脚本.
Since the original xTree script is implemented using Object Oriented JS it is very easy to extend and as soon as it started to take shape we got some wild ideas on how one could extend the tree. One idea that Emil implemented in the original tree was to add support for persistance. Another idea I had some time later was to allow subtrees to be loaded and populated at runtime. For this to work the xTree had to be updated a little to support data model changes at runtime. Emil added support for this after a while and now nothing was in my way to add the dynamic loading support.
既然原来的 xTree 脚本是做作为面向对象的 JS 实现的, 所以它很容易的进行扩展, 当它刚刚成型的时候, 我们就有一些关于如何扩展它的疯狂的想法.其中的一个想法就是 Emil 对原来的树添加了持久化的实现. 另一个之后不久我提出的想法是允许运行的时候加载和填充子树. 对此 xTree 必须有点小小的更新来支持运行时候的数据模型的改变. 后来 Emil 对此添加了支持, 现在我所做的不过就是添加了动态加载的支持.
译者注: 其实用的就是现在炒的很热的 AJAX 技术, 通过 XMLHttpRequest 读取内容, 通过 DOM 来解析 XML 内容.
Dynamic loading 动态加载
The XLoadTree is an extended version of the xTree and it allows you to define a source property for each tree item that points to an xml file that is then loaded, transformed using DOM and inserted using tree item methods. The basic mechanism for this has been working for a long time but since I wanted to cover the xml loading mechanisms before writing this article it is not until now that I can publish this.
LoadTree 是 xTree 的扩展版本, 它让你可以对每个树的节点定义一个 source 属性, 这个属性指向一个 xml 文件, 然后它可以被载入, 使用 DOM 转换, 插入, 这些都可以用树节点的方法来做. 相关的底层的机制已经使用了很长时间了, 因此我想在 xml 加载机制 中介绍它, 这个文章在我写本文之前都已经发表了.
Known Issues 已知的问题
The persistance from the original xTree is not sophisticated enough for dynamic loaded trees because the original persistance is dependent on the order of insertion and not the path. I will try to fix this in a later update.
原来的 xTree 中的持久化机制对动态加载的树来说并不是十分灵活, 因为它依赖于树的插入顺序而不是路径. 我将尝试在后一更新版本中修正这个问题.
The xml object has some issues when using the file protocol (in IE) so this one only works when located on a web server. I'll see what can be done about this.
使用 file 协议的时候(在 IE中), xml 对象会有一些问题, 所以这个脚本将只能在服务器上加载的时候才能运行. 我将找找看怎么搞定这个问题.
译者注:就是说在本机执行的时候, 在 Firefox, Opera, Mozilla 浏览器中, 使用 file 协议工作的很好, 但是 IE 浏览器下会弹出一个空的消息框, 无法载入子节点.
介绍
使用说明
API
实现
演示
下载
作者: Erik Arvidsson
中文翻译: BeanSoft
usage.html
Usage 用法
The usage of the XLoadTree is almost identical to the xTree so if you do not remember how that is done take a look at the xTree usage. Anywhere the original xTree accepts a WebFXTree you can use a WebFXLoadTree and the same applies to WebFXTreeItem and WebFXLoadTreeItem.
XLoadTree 的用法几乎和 xTree 相同, 所以您记不得如何做的时候不要忘了看一下 xTree 用法. 任何原来的 WebFXTree 可以使用 xTree 的地方都可以使用 WebFXLoadTree, 这个规则也同样适用于WebFXTreeItem 和 WebFXLoadTreeItem.
Taking the first example in the xTree usage and instead of using a WebFXTreeItem for the second tree item we use the load counterpart.
让我们看看第一个 xTree 用法的例子, 注意我们在第二个树节点的地方使用了对应的可载入树节点代替了 WebFXTreeItem.
var tree = new WebFXTree("Root");
tree.add(new WebFXTreeItem("Tree Item 1"));
tree.add(new WebFXLoadTreeItem("Tree Item 2", "tree.xml"));
tree.add(new WebFXTreeItem("Tree Item 3"));
document.write(tree);
The code above should result in something looking like this:
上面的代码将会产生如下结果:
When Tree Item 2 is expanded the file tree.xml is loaded and during the load a dummy tree item is inserted to show that the subcontent is loading. This looks something like this:
当 Tree Item 2 被展开的时候文件 tree.xml 被载入, 在加载的时候插入一个临时的树节点来显示子节点正在被载入中. 看起来就像这样:
The XML format XML 文件格式
To be able to transform the xml file to an xTree the xml file must be of a certain format. Below is the xml code from the file tree.xml:
要想从 xml 文件转换成 xTree, xml 文件必须符合一个固定的格式. 下面是文件 tree.xml 中的 xml 代码:
<?xml version="1.0"?>
<tree>
<tree text="Loaded Item 1" action="href://webfx.eae.net" />
<tree text="Loaded Item 2">
<tree text="Loaded Item 2.1" action="javascript:alert(2.1)" />
<tree text="Load "tree1.xml"" src="tree1.xml" />
</tree>
<tree text="Loaded Item 3" />
</tree>
When this xml file has been loaded and inserted into the tree it looks something like this:
当这个 xml 文件加载并且插入到树中后它看起来就像这样:
Notice how the XML structure can contain nested tree items and tree items that points to other xml files. Notice also the top level tree item that is used to contain all the tree items that are supposed to be inserted into the current WebFXLoadTreeItem.
注意 XML 的结构, 它可以包含嵌套的子节点以及指向其它xml文件的子节点. 也请留意最顶端的树节点被用来包含所有的假定为要插入当前WebFXLoadTreeItem的所有子节点.
To see what xml attributes are supported on the tree items see the api page.
要了解树节点支持什么样的 xml 属性, 请浏览 api 页.
介绍
使用说明
API
实现
演示
下载
作者: Erik Arvidsson
中文翻译: BeanSoft
api.html
WebFXLoadTree
This object type is used to create the actual tree root and can be used to populate the tree with tree items loaded from an xml file.
这个对象类型用来创建实际的树的根节点, 并且可以被用来向树添加从一个 xml 文件中定义的树节点.
The WebFXLoadTree extends WebFXTree (see the xTree API) so all properties and methods provided by WebFXTree are available.
WebFXLoadTree 继承自 WebFXTree (请阅读 xTree API) , 因此WebFXTree提供的所有的属性和方法都可用.
Constructor 构造器
new WebFXLoadTree(sText, sXmlSrc, sAction, sBehavior, sIcon, sOpenIcon)
Name
名称 Description
描述
sText The text label for the tree root.
树的根节点的文本标签.
sXmlSrc The source for the xml file to load when expanded.
当展开时要加载的xml文件的源路径.
sAction Optional. The action (uri) associated with the tree root.
可选. 根节点关联的操作(uri地址).
sBehavior Optional. The behavior of the tree. Valid values are "classic" and "explorer". When the value is set to "explorer" the default icon for an empty item is the same as the folder icon.
可选. 树的表现方式. 可用的值包括 "classic" 和 "explorer". 当值为 "explorer" 时空节点默认的图标和文件夹图标一样.
sIcon Optional. The icon image to use for this item. In case this item is a folder this will be used when the folder is closed.
可选. 节点所使用的图标文件. 如果这个节点是个文件夹, 这个值将在节点被关闭的时候使用.
sOpenIcon Optional. The icon image to use for this item when it is opened. This is only used for folder items that are opened/expanded.
可选. 节点打开时使用的图标文件. 这个值仅仅对文件夹节点被打开或者展开的时候有效.
Properties 属性
Name
名称 Description
描述
All properties from WebFXTree.
WebFXTree 的所有属性.
src The source to the xml file that decribes the sub trees. Notice that this is read-only after the xml file has started to load so any changes done to the source are only valid before the loading of the first file.
描述子树的xml文件的源路径. 注意这个值将在 xml 文件开始载入后变为只读, 所以任何对这个值的修改只在第一个文件载入之前生效.
loading Read only. A boolean flag which is true if the xml file has started loading and not yet finished.
只读. 布尔变量, xml 文件开始加载但是尚未加载完的时候为 true.
loaded Read only. A boolean flag which is true if the xml file has been loaded.
只读. 布尔变量, xml 文件加载完成的时候为 true.
errorText Read only String. If the loading for any reason failed the reason can be found in the errorText property. If no error occured this is "" (an empty string).
只读字符串. 如果加载因为任何原因失败, 这个原因可以在 errorText 属性中找到. 如果没有错误它的值时 ""(空字符串).
Methods 方法
Name
名称 Description
描述
reload() Reloads the XML file from the server and recreates the children of this node.
重新从服务器载入 XML 文件, 并重建这个节点的子节点.
All methods from WebFXTree. 所有继承自 WebFXTree 的方法.
WebFXLoadTreeItem
This object type is used to create tree items that can be added to the tree root, or to other tree items to create sub folders in the tree. When an WebFXLoadTreeItem is expanded an xml file is loaded that is then used to populate the item with child items.
这个对象类型用来创建可以加入树根节点的树节点, 或者可以作为子目录添加到别的树节点. 当一个 WebFXLoadTreeItem 节点被展开的时候, 将会加载用于填充子节点的 xml 文件.
The WebFXLoadTreeItem extends WebFXTreeItem (see the xTree API) so all properties and methods provided by WebFXTreeItem are available.
WebFXLoadTreeItem 继承自 WebFXTreeItem (请查看 xTree API), 因此WebFXTreeItem提供的所有的属性和方法都可用.
Constructor 构造器
new WebFXLoadTreeItem(sText, sXmlSrc, sAction, eParent, sIcon, sOpenIcon)
Name
名称 Description
描述
sText The text label for the tree item.
树节点的文本标签.
sXmlSrc The source for the xml file to load when expanded.
当展开时要加载的xml文件的源路径.
sAction Optional. The action (uri) associated with the tree item.
可选. 节点关联的操作(uri地址).
eParent Optional. The parent WebFXTreeItem or WebFXTree that the item should be added to.
可选. 当前节点要添加进去的父节点, 可以为 WebFXTreeItem 或者 WebFXTree.
sIcon Optional. The icon image to use for this item. In case this item is a folder this will be used when the folder is closed.
可选. 节点所使用的图标文件. 如果这个节点是个文件夹, 这个值将在节点被关闭的时候使用.
sOpenIcon Optional. The icon image to use for this item when it is opened. This is only used for folder items that are opened/expanded.
可选. 节点打开时使用的图标文件. 这个值仅仅对文件夹节点被打开或者展开的时候有效.
Properties 属性
Name
名称 Description
描述
All properties from WebFXTreeItem. 继承自 WebFXTreeItem 的所有属性.
src The source to the xml file that decribes the sub trees. Notice that this is read-only after the xml file has started to load so any changes done to the source are only valid before the loading of the first file.
描述子树的xml文件的源路径. 注意这个值将在 xml 文件开始载入后变为只读, 所以任何对这个值的修改只在第一个文件载入之前生效.
loading Read only. A boolean flag which is true if the xml file has started loading and not yet finished.
只读. 布尔变量, xml 文件开始加载但是尚未加载完的时候为 true.
loaded Read only. A boolean flag which is true if the xml file has been loaded.
只读. 布尔变量, xml 文件加载完成的时候为 true.
errorText Read only String. If the loading for any reason failed the reason can be found in the errorText property. If no error occured this is "" (an empty string).
只读字符串. 如果加载因为任何原因失败, 这个原因可以在 errorText 属性中找到. 如果没有错误它的值时 ""(空字符串).
Methods 方法
Name Description
reload() Reloads the XML file from the server and recreates the children of this node.
重新从服务器载入 XML 文件, 并重建这个节点的子节点.
All methods from WebFXTree. 所有继承自 WebFXTree 的方法.
The xml format xml 格式
The only valid element in the xml file is the tree item. A tree item can contain zero, one or more tree items.
xml 文件中唯一有效的元素就是 tree 节点. 一个tree节点可以包含零个,一个或者更多tree节点.
Attributes 属性
There are five valid attributes that you can provide on a tree item.
您可以为一个 tree 节点提供 5 个有效的属性.
Name
名称 Description
描述
text Required. The text label for the tree item.
必需. 树节点的文本标签.
xmlSrc Optional. The source for the xml file to load when expanded.
可选. 当展开时要加载的xml文件的源路径.
action Optional. The action (uri) associated with the tree item.
可选. 节点关联的操作(uri地址).
icon Optional. The icon image to use for this item. In case this item is a folder this will be used when the folder is closed.
可选. 节点所使用的图标文件. 如果这个节点是个文件夹, 这个值将在节点被关闭的时候使用.
openIcon Optional. The icon image to use for this item when it is opened. This is only used for folder items that are opened/expanded.
可选. 节点打开时使用的图标文件. 这个值仅仅对文件夹节点被打开或者展开的时候有效.
DTD
The xml file does not have to be valid to work (only well formed) but if you want to ensure that you didn't do anything wrong you can use the following document type definition:
xml 文件并不必须是有效的格式才能工作(只需要良好的组织起来), 但是如果你想确保你没有写错, 可以使用下面的文档类型定义:
<!ELEMENT tree (tree*)>
<!ATTLIST tree
text CDATA #REQUIRED
src CDATA #IMPLIED
action CDATA #IMPLIED
icon CDATA #IMPLIED
openIcon CDATA #IMPLIED>
To use the dtd in your xml file add a DOCTYPE to the head of your xml file. Below is tree.dtd.xml shown. This represents the same xml tree as in tree.xml with a DOCTYPE declaration.
在你的 xml 文件中使用这个 dtd 请在文件的开头包含一个 DOCTYPE. 下面显示的是 tree.dtd.xml . 这个表示了和 tree.xml 中相同的 xml 树, 只不过有一个 DOCTYPE 声明.
<?xml version="1.0"?>
<!DOCTYPE tree SYSTEM "tree.dtd">
<tree>
<tree text="Loaded Item 1" action="href://webfx.eae.net" />
<tree text="Loaded Item 2">
<tree text="Loaded Item 2.1" action="javascript:alert(2.1)" />
</tree>
<tree text="Load "tree1.xml"" src="tree1.xml" />
</tree>
介绍
使用说明
API
实现
演示
下载
作者: Erik Arvidsson
中文翻译: BeanSoft
Implementation 实现
The main idea is to create sub classes to WebFXTree and WebFXTreeItem and overload the expand methods to start the loading of an xml file. Once the loading is done the xml file is tranformed into WebFXTreeItems and WebFXLoadTreeItems and inserted.
主要的思路就是创建 WebFXTree 和 WebFXTreeItem 的子类, 并且重载 expand 方法来启动加载 xml 文件的过程. 一旦加载结束, xml 文件被转换成 WebFXTreeItems 和 WebFXLoadTreeItems, 然后添加到树上.
译者注: 这里就是面向对象的好处了, 我也用重载或者添加新方法的思路实现了动态添加子节点, 添加失败则回复到原来状态, 成功则加入新的子节点.
WebFXLoadTree
First we create a new constructor and inside this we call the super constructor to make sure that the instance will be correctly initiated. After that we set some property values and finally we check whether the tree is open, if it is we start to load the sub trees. If not, we add a dummy tree item that displays the loading text.
首先我们创建了一个新的构造器, 在这个方法里面我们首先调用父类的构造器来确保每个实例可以被正确的初始化. 在此之后我们设置一些属性值, 最后我们检查树是否已经被打开, 如果这样的话我们就开始加载树的子节点. 反之, 我们向树节点中添加一个临时的显示正在加载文本的树节点.
After the constructor is created we set the protype to a new WebFXTree.
function WebFXLoadTree(sText, sXmlSrc, sAction, sBehavior, sIcon, sOpenIcon) {
// call super
this.WebFXTree = WebFXTree;
this.WebFXTree(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)
_startLoadXmlTree(this.src, this);
else {
// and create loading item if not
this._loadingItem = new WebFXTreeItem(webFXTreeConfig.loadingText);
this.add(this._loadingItem);
}
}
WebFXLoadTree.prototype = new WebFXTree;
The constructor is fairly straight forward and does not do much. Notice however how super is called by binding WebFXTree as a method and then calling it.
这个构造器是相当的直接, 并没有做太多事. 尽管如此请注意我们是如何将父类绑定为了一个方法然后调用它的.
Next we need to override the expand method but since we still need to be able to call the original expand method we create a new method called _webfxtree_expand that points to the function object used by WebFXTree objects. This is the standard way to access super methods but the first few times it might look a bit odd.
现在我们需要重载 expand 方法, 但是我们依然需要调用原来的 expand 方法, 因此我们创建了一个新方法_webfxtree_expand来指向WebFXTree的原来的那个 expand 方法对象. 这是个标准的调用父类的方法, 但是最初的几次看起来似乎是有点多余.
The logic in the expand method is really simple. We just check if we should start loading the xml file and then we expand it using the super expand (_webfxtree_expand) method.
expand 方法的逻辑是相当的简单. 我们只是检查是否应该开始载入 xml 文件, 然后使用父类的expand方法(_webfxtree_expand)来展开它.
// override the expand method to load the xml file
WebFXLoadTree.prototype._webfxtree_expand = WebFXTree.prototype.expand;
WebFXLoadTree.prototype.expand = function() {
if (!this.loaded && !this.loading) {
// load
_startLoadXmlTree(this.src, this);
}
this._webfxtree_expand();
};
WebFXLoadTreeItem
This class is too similar to WebFXLoadTree for me to be entirely comfortable. Since JavaScript does not support multiple inheritance, and I did not want to fake it using expandos, we just have to repeat the code. For everyone that are interested, the code for this can be found in xloadtree.js.
这个类和WebFXLoadTree太相似了, 对我来说是完全的相同. 因为 JavaScript 不提供多重继承, 我也不想使用 expandos 来欺骗它, 我们只是不得不重复代码. 如果您对此感兴趣, 这些代码可以在 xloadtree.js 中找到.
Loading the Tree 载入树
As you can see in the code above there is a function called _startLoadXmlTree that is called to load the actual xml file. This function uses an XmlHttp object to do the actual loading. The loading of the xml file is done asynchronously to prevent the UI to lock up while the file is being loaded and therefore we wait for the onreadystatechange event to fire before we continue. See the Xml Extras article for a more detailed description about the XmlHttp object.
你可以看到上面已经有了个方法叫 _startLoadXmlTree, 它将被用来加载实际的 xml 文件. 这个方法使用了严格 XmlHttp 对象来执行真正的加载. 对 xml 文件的载入使用了异步方式来防止文件正在读取的时候 UI 被锁定, 因此我们等待 onreadystatechange事件被触发之后才继续进行. 请阅读 Xml 增强文章 来了解关于 XmlHttp 对象的更多信息.
// creates the xmlhttp object and starts the load of the xml document
function _startLoadXmlTree(sSrc, jsNode) {
jsNode.loading = true;
var xmlHttp = XmlHttp.create();
xmlHttp.open("GET", sSrc, true); // async
xmlHttp.onreadystatechange = function () {
if (xmlHttp.readyState == 4)
_xmlFileLoaded(xmlHttp.responseXML, jsNode);
};
// call in new thread to allow ui to update
window.setTimeout(function () {
xmlHttp.send(null);
}, 10);
}
Once the xml file has finished loading we call the function _xmlFileLoaded. This function checks that we got an xml document back and if we did it goes through the document and recursively converts the xml elements to js WebFXTreeItem and inserts them. Once the xml elements have been converted and inserted we remove the dummy tree item that was only used to show that we were loading the contents.
一旦 xml 文件加载完毕, 我们调用方法 _xmlFileLoaded. 这个方法检查我们得到的 xml 文件, 如果得到了文件内容我们将递归转换 xml 元素到 js 的 WebFXTreeItem 对象, 然后添加他们. 一旦 xml 元素转换并添加完毕, 我们将删除那个临时的只不过是用来显示正在加载内容的树节点.
// Inserts an xml document as a subtree to the provided node
function _xmlFileLoaded(oXmlDoc, jsParentNode) {
var bIndent = false;
var bAnyChildren = false;
jsParentNode.loaded = true;
jsParentNode.loading = false;
// check that the load of the xml file went well
if( oXmlDoc == null || oXmlDoc.documentElement == null) {
jsParentNode.errorText = parseTemplateString(webFXTreeConfig.loadErrorTextTemplate,
jsParentNode.src);
}
else {
// 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( _xmlTreeToJsTree(cs[i]), true);
}
}
// if no children we got an error
if (!bAnyChildren)
jsParentNode.errorText = parseTemplateString(webFXTreeConfig.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;
}
A few more things happen in this function but nothing really important. There is some code that checks the errors and a few properties are set to reflect the state of the WebFXLoadTree or WebFXLoadTreeItem object.
其它一些这个方法中发生更多的事情并不是很重要. 有一些代码来检查错误, 一些属性被设置, 来显示 WebFXLoadTree 和 WebFXLoadTreeItem 的状态.
Converting the Xml 转换 Xml
The only important thing left to do is to convert the xml tree item to a js WebFXTreeItem. This is done in the function _xmlTreeToJsTree. Here we retreive the xml attributes and if there was a src attribute defined we create a new WebFXLoadTreeItem and otherwise a WebFXTreeItem. Once that is created we go through all the childNodes of the xml node and convert and add those as well.
剩下的唯一要做的重要的事情就是转换 xml 树节点为 js WebFXTreeItem 对象. 这在方法 _xmlTreeToJsTree 中完成. 在这里读取 xml 属性值, 如果有 src 属性我们就创建一个 WebFXLoadTreeItem 对象, 否则就创建 WebFXTreeItem. 一旦创建完成, 我们就遍历所有 xml 节点的 childNodes, 转换并添加他们.
// Converts an xml tree to a js tree. See article about xml tree format
function _xmlTreeToJsTree(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");
// create jsNode
var jsNode;
if (src != null && src != "")
jsNode = new WebFXLoadTreeItem(text, src, action, parent, icon, openIcon);
else
jsNode = new WebFXTreeItem(text, action, parent, icon, openIcon);
// 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( _xmlTreeToJsTree(cs[i]), true );
}
return jsNode;
}
介绍
作者: Erik Arvidsson
中文翻译: BeanSoft
发表评论
-
30分钟学会如何使用Shiro
2017-07-21 17:37 464本篇内容大多总结自张开涛的《跟我学Shiro》原文地址:ht ... -
Spring+Quartz实现定时从FTP服务器读取文件并存入Oracel数据库
2017-07-17 17:32 691... -
java收集邮箱
2013-10-24 12:51 658java收集群邮箱,首先登陆自己的QQ 然后直接访问:8403 ... -
谁能帮我看一下仿这个网站多少钱
2013-10-23 12:14 620最近挺无聊的,想弄个网站,谁能帮我看一下仿这个网站多少钱? w ... -
MyEclipse9.0正式版的破解和激活方法(注册机)
2013-06-13 12:46 10MyEclipse 9.0的到期了很头 ... -
网址导航代码
2013-02-24 21:04 921本代码是本人精心为网友准备的,热门网址导航站网罗精彩实用网址, ... -
html删除a标签并且替换网址
2013-01-09 17:06 1156做网站开发的时候,复制样式会产生网址,加入说我们想批量替换,下 ... -
filter过滤器的使用
2011-12-13 15:19 1142在jsp开发中,我们经常使用过滤器(filter)来过滤权 ... -
sa_framework,s2-tiger,s2-extension2.4 日文的api
2011-12-09 10:40 1144Seasar框架中常用的sa_framework,s2-t ... -
学struts2有感
2009-07-26 19:25 4258看到struts2.x,原以为是struts ... -
ejb中spring代理struts,action请求找不到,can not instance for path
2009-07-13 11:45 1593我在tomcat上struts集成spring没有问题, 但在 ... -
延迟加载 出问题了,有那位见过这个异常?
2009-04-08 17:18 2260我把 lazy 设 为 false 不行, 在web.x ... -
strut2配置spring 用c3p0.ComboPooledDataSource 出现连接错误
2009-04-06 09:09 2086昨天 还可以了,今天 就不能连接了,报一下异常: HTTP S ... -
基于javaWEB学生管理系统需求分析
2009-03-11 19:53 1384这是我 做毕业设计的文档,包含 需求分析,结构设计,模块设计, ... -
JDIC做了一个IE浏览器
2008-09-19 17:04 3433有谁用过JDIC的,我们现在用JDIC做了一个IE浏览器,在E ... -
getHibernateTemplate.get()返回null
2008-08-25 14:15 4026[color=blue]Exception: HTTP St ... -
struts2 配置 exception求救
2008-08-16 10:38 2797我按要求配置,出现exception,没有找出来是什么原因,有 ... -
from提交的数据到后台是乱码
2008-08-13 16:55 3207请高手帮忙,在火狐浏览器插入中文没有问题,在遨游或IE就出现乱 ... -
ext 树状结构组成json格式
2008-08-05 09:41 3373public JSONArray loadOasys() { ... -
Ask help for lombox coonect to oracle10i
2008-04-27 07:23 1422当我配置好了后,还是报以下exception java.sq ...
相关推荐
XLoadTree是一个基于Java、XML、JSP和Ajax技术构建的组件,主要用于在Web应用程序中实现动态加载和展示树形结构数据。它巧妙地结合了这些技术,提供了高效、交互性强的用户界面,尤其适用于数据层次结构复杂的应用...
【新版动态加载树形目录源码及详细说明xtree2.0】是一个基于Ajax技术的树形目录组件,它能够实现动态加载XML文件或数据流,以构建灵活且高效的导航结构。这个组件对于大型网站或者有层级关系的数据展示非常有用,...
XLoadTree 动态加载XML生成JavaScript树组件 jQuery AJAX框架-查询DOM对象,简洁,现成控件较少 ExtJS extjs.com 比较全面的AJAX框架 树,菜单,表格编辑器(Grid)学习比较困难 -->显示公告(页面内弹出窗口) 1. ...
dhtmlxtree是DHTMLX Suite的一部分,是一个功能丰富的JavaScript组件,用于构建具有拖放、搜索、分页、权限控制等功能的树形菜单。`dhtmlxtree.xml`可能是用于配置dhtmlxtree节点和结构的XML文件,`dhtmlxTree`和`...
基于 OpenCV 的魔兽世界钓鱼机器人
供应链管理中信息共享问题的研究
青春文学中的爱情观呈现
1.版本:matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点:参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象:计算机,电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。
XLSReadWriteII6.02.01.7z
图解系统-小林coding-v1.0
1.版本:matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点:参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象:计算机,电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。
漫画作品与乌托邦理想追求
江苏建筑消防设施维护保养规程.rar
内容概要:论文介绍了一款名为DODRIO的交互式可视化工具,帮助自然语言处理(NLP)研究人员和从业者解析基于转换器架构的语言模型内部工作机理。DODRIO整合了概述图与详尽视图,支持用户比较注意力权重与其输入文本的句法结构和语义特征。具体而言,它包含了依赖关系视图(Dependency View)、语义关注图(Semantic Attention Graph)以及注意力头概览(Attention Head Overview),并利用不同的图形展示方法使复杂的多层多头转换器模型中的注意力模式更容易理解和研究。 适用人群:适用于从事深度学习、自然语言处理的研究人员和技术从业者;尤其适合对基于变换器架构的大规模预训练语言模型感兴趣的开发者们。 使用场景及目标:DODRIO用于探索转换器模型各层级之间的联系、验证已有研究成果,同时激发新假设形成。具体使用时可以选择特定数据集中的句子作为样本输入,观察不同注意力机制如何响应文本内容的变化。此外,还可以用来对比精简版本DistilBERT的表现,评估其相对全量模型BERT的优势与不足。 其他说明:DODRIO为开源项目,提供web端实施方式,使得
该代码使用scikit-learn的乳腺癌数据集,完成分类模型训练与评估全流程。主要功能包括:数据标准化、三类模型(逻辑回归、随机森林、SVM)的训练、模型性能评估(分类报告、混淆矩阵、ROC曲线)、随机森林特征重要性分析及学习曲线可视化。通过`train_test_split`划分数据集,`StandardScaler`标准化特征,循环遍历模型进行统一训练和评估。关键实现细节包含:利用`classification_report`输出精确度/召回率等指标,绘制混淆矩阵和ROC曲线量化模型效果,随机森林的特征重要性通过柱状图展示,学习曲线分析模型随训练样本变化的拟合趋势。最终将原始数据和预测结果保存为CSV文件,便于后续分析,并通过matplotlib进行多维度可视化比较。代码结构清晰,实现了数据处理、模型训练、评估与可视化的整合,适用于乳腺癌分类任务的多模型对比分析。
在智慧城市建设的大潮中,智慧园区作为其中的璀璨明珠,正以其独特的魅力引领着产业园区的新一轮变革。想象一下,一个集绿色、高端、智能、创新于一体的未来园区,它不仅融合了科技研发、商业居住、办公文创等多种功能,更通过深度应用信息技术,实现了从传统到智慧的华丽转身。 智慧园区通过“四化”建设——即园区运营精细化、园区体验智能化、园区服务专业化和园区设施信息化,彻底颠覆了传统园区的管理模式。在这里,基础设施的数据收集与分析让管理变得更加主动和高效,从温湿度监控到烟雾报警,从消防水箱液位监测到消防栓防盗水装置,每一处细节都彰显着智能的力量。而远程抄表、空调和变配电的智能化管控,更是在节能降耗的同时,极大地提升了园区的运维效率。更令人兴奋的是,通过智慧监控、人流统计和自动访客系统等高科技手段,园区的安全防范能力得到了质的飞跃,让每一位入驻企业和个人都能享受到“拎包入住”般的便捷与安心。 更令人瞩目的是,智慧园区还构建了集信息服务、企业服务、物业服务于一体的综合服务体系。无论是通过园区门户进行信息查询、投诉反馈,还是享受便捷的电商服务、法律咨询和融资支持,亦或是利用云ERP和云OA系统提升企业的管理水平和运营效率,智慧园区都以其全面、专业、高效的服务,为企业的发展插上了腾飞的翅膀。而这一切的背后,是大数据、云计算、人工智能等前沿技术的深度融合与应用,它们如同智慧的大脑,让园区的管理和服务变得更加聪明、更加贴心。走进智慧园区,就像踏入了一个充满无限可能的未来世界,这里不仅有科技的魅力,更有生活的温度,让人不禁对未来充满了无限的憧憬与期待。
内容概要:本文档介绍了基于MATLAB实现的贝叶斯优化(BO)、Transformer和GRU相结合的多特征分类预测项目实例,涵盖了详细的程序设计思路和具体代码实现。项目旨在应对数据的多样性与复杂性,提供一种更高效的多特征数据分类解决方案。文档主要内容包括:项目背景与意义,技术难点与解决方案,具体的实施流程如数据处理、模型构建与优化、超参数调优、性能评估以及精美的GUI设计;详细说明了Transformer和GRU在多特征数据分类中的应用及其与贝叶斯优化的有效结合,强调了其理论与实际应用中的价值。 适合人群:具备一定机器学习和MATLAB编程基础的研发人员,特别是从事多维数据处理与预测工作的专业人士和技术爱好者。 使用场景及目标:① 适用于金融、医疗、交通等行业,进行复杂的多维数据处理和预测任务;② 提升现有分类任务中复杂数据处理的准确度和效率,为各行业提供智能预测工具,如金融市场预测、患者病情发展跟踪、交通流量管理等。 其他说明:本文档包含了丰富的实战案例和技术细节,不仅限于模型设计本身,还涉及到数据清洗、模型优化等方面的知识,帮助使用者深入理解每一步骤背后的原理与实现方法。通过完整的代码样例和GUI界面设计指导,读者可以从头到尾跟随文档搭建起一套成熟的分类预测系统。
大数据的sql练习题,初级中级高级
内容概要:论文介绍了名为Transformer的新网络架构,它完全基于自注意力机制,在不使用递归或卷积神经网络的情况下建模输入与输出之间的全局依赖关系,尤其适用于长文本处理。通过多头自注意力层和平行化的全连接前馈网络,使得在机器翻译任务上的表现优于当时最佳模型。具体地,作者用此方法实现了对英语-德语和英语-法语翻译、句法解析等任务的高度并行化计算,并取得显著效果。在实验方面,Transformer在较短训练时间内获得了高质量的翻译结果以及新的单一模型基准。除此之外,研究人员还探索了模型变体的效果及其对于不同参数变化时性能的变化。 适用人群:从事自然语言处理领域的研究者、工程师、学生,熟悉深度学习概念尤其是编码器-解码器模型以及关注模型创新的人士。 使用场景及目标:主要适用于序列到序列(seq2seq)转换任务如机器翻译、语法分析、阅读理解和总结等任务的研究和技术开发;目标在于提高计算效率、缩短训练时间的同时确保模型性能达到或超过现有技术。 其他说明:本文不仅提出了一个新的模型思路,更重要的是展示了自注意力机制相较于传统LSTM或其他方式所拥有的优势,例如更好地捕捉远距离上下文关系的能力
1.版本:matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点:参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象:计算机,电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。