YUI脚本
<script><!--
YAHOO.example.treeExample = function() {
var tree, currentIconMode;
function changeIconMode() {
var newVal = parseInt(this.value);
if (newVal != currentIconMode) {
currentIconMode = newVal;
}
buildTree();
}
function loadNodeData(node, fnLoadComplete) {
var nodeLabel = encodeURI(node.label);
//prepare URL for XHR request:
var sUrl = "assets/ysuggest_proxy.php?query=" + nodeLabel;
//prepare our callback object
var callback = {
//if our XHR call is successful, we want to make use
//of the returned data and create child nodes.
success: function(oResponse) {
YAHOO.log("XHR transaction was successful.", "info", "example");
//YAHOO.log(oResponse.responseText);
var oResults = eval("(" + oResponse.responseText + ")");
if((oResults.ResultSet.Result) && (oResults.ResultSet.Result.length)) {
//Result is an array if more than one result, string otherwise
if(YAHOO.lang.isArray(oResults.ResultSet.Result)) {
for (var i=0, j=oResults.ResultSet.Result.length; i<j; i++) {
var tempNode = new YAHOO.widget.TextNode(oResults.ResultSet.Result[i], node, false);
}
} else {
//there is only one result; comes as string:
var tempNode = new YAHOO.widget.TextNode(oResults.ResultSet.Result, node, false)
}
}
oResponse.argument.fnLoadComplete();
},
failure: function(oResponse) {
YAHOO.log("Failed to process XHR transaction.", "info", "example");
oResponse.argument.fnLoadComplete();
},
argument: {
"node": node,
"fnLoadComplete": fnLoadComplete
},
//timeout -- if more than 7 seconds go by, we'll abort
//the transaction and assume there are no children:
timeout: 7000
};
YAHOO.util.Connect.asyncRequest('GET', sUrl, callback);
}
function buildTree() {
tree = new YAHOO.widget.TreeView("treeDiv1");
tree.setDynamicLoad(loadNodeData, currentIconMode);
var root = tree.getRoot();
var arrRoot=new Array();
DWREngine.setAsync(false);
arrRoot=OrganizationService.getRootNodes();
OrganizationService.getRootNodes(
function(data){
arrRoot=data;
});
for (var m=0, n=arrRoot.length; m<n; m++) {
var division = new YAHOO.widget.TextNode(arrRoot[m], root, true);
var div=encodeURI(division.label);
division.href="#";
division.expanded=false;
division.target="#";
var aStates=new Array();
DWREngine.setAsync(false);
OrganizationService.getChildNodes(arrRoot[m],
function(data){
aStates=data;
});
for (var i=0, j=aStates.length; i<j; i++) {
var depNode = new YAHOO.widget.TextNode(aStates[i], division, false);
var department=encodeURI(aStates[i]);
depNode.href="frameUserAction.html?department="+department;
depNode.target="rightFrame";
depNode.isLeaf=true;
}
}
tree.draw();
}
return {
init: function() {
YAHOO.util.Event.on(["mode0", "mode1"], "click", changeIconMode);
var el = document.getElementById("mode1");
if (el && el.checked) {
currentIconMode = parseInt(el.value);
} else {
currentIconMode = 0;
}
buildTree();
}
}
} ();
//once the DOM has loaded, we can go ahead and set up our tree:
YAHOO.util.Event.onDOMReady(YAHOO.example.treeExample.init, YAHOO.example.treeExample,true)
--></script>
HTML code
<div id="treeDiv1" style="margin-top: 10px"></div>
dwr.xml配置
<dwr>
<allow>
<create creator="new" javascript="validator">
<param name="class" value="org.apache.struts2.validators.DWRValidator"/>
</create>
<convert converter="bean" match="com.opensymphony.xwork2.ValidationAwareSupport"/>
<convert converter="bean" match="com.byd.bqs.model.Organization" javascript="Organization">
<param name="include" value="division,department" />
</convert>
<create creator="spring" javascript="OrganizationService">
<param name="class" value="com.byd.bqs.OrganizationService"/>
<param name="beanName" value="organizationService"/>
<include method="getChildNodes"/>
<include method="getHelloworld"/>
<include method="getRootNodes"/>
</create>
</allow>
<signatures>
<![CDATA[
import java.util.Map;
import org.apache.struts2.validators.DWRValidator;
DWRValidator.doPost(String, String, Map<String, String>);
]]>
</signatures>
</dwr>
本文介绍如何使用YUI库实现动态加载树形菜单的功能。通过AJAX请求获取节点数据,并利用YUI的TreeView组件展示组织结构。文章详细解释了处理数据请求、构建树形结构的过程。
193

被折叠的 条评论
为什么被折叠?



