控制器(dojox.data存储)- 负责存储所有非关系型数据库格式的数据。
模型(dijit.tree ForestStoreModel/TreeStoreModel)- 根据用户选择的模型,格式化存储在层次顺序中的数据。
视图(dijit.Tree)- 显示由模型对象创建的数据的树。JSP页面:
<div id="tree"></div>
<script type="text/javascript">
var demo = {
store : null,
model : null,
tree : null,
init : function() {
this.store = new dojox.data.JsonRestStore({
target : tx + "/tree/lazy.mis?node=",
labelAttribute : "name"
});
this.model = new dijit.tree.ForestStoreModel({
store : this.store,
deferItemLoadingUntilExpand : true,
rootId : "nodes",
rootLabel : "node root",
query : {},
childrenAttrs : [ 'children' ]
});
this.tree = new dijit.Tree({
model : this.model,
persist : false
}, 'tree');
this.tree.startup();
},
get : function() {
this.store.fetchItemByIdentity({
identity : 'node1',
onItem : dojo.hitch(this.store, function(item) {
var children = this.getValue(item, 'children');
console.info('item ' + item.id);
dojo.forEach(children, function(child) {
console.info('item ' + child.name);
});
}),
onError : function(error) {
alert(error);
}
});
}
}
demo.init();
</script>
Java代码(Spring MVC):
/**
* 懒加载树
*
* @param response HTTP响应
* @param node 子节点ID
*/
@RequestMapping(value = "/lazy", method = RequestMethod.GET)
public void lazy(HttpServletResponse response, String node) {
String a = "[{\"$ref\":\"node1\",\"name\":\"node1\",\"children\":true},";
a += "{\"id\":\"node2\",\"name\":\"node2\",\"someProperty\":\"somePropertyB\"},";
a += "{\"id\":\"node3\",\"name\":\"node3\",\"someProperty\":\"somePropertyC\"},";
a += "{\"id\":\"node4\",\"name\":\"node4\",\"someProperty\":\"somePropertyA\"},";
a += "{\"id\":\"node5\",\"name\":\"node5\",\"someProperty\":\"somePropertyB\"}]";
if (node.equals("/node1")) {
a = "{\"id\":\"node1\",\"name\":\"node1\",\"someProperty\":\"somePropertyA\",";
a += "\"children\":[{\"$ref\":\"node1.1\",\"name\":\"node1.1\",\"children\":true},";
a += "{\"name\":\"node1.2\"}]}";
} else if (node.equals("/node1.1")) {
a = "{\"id\":\"node1.1\",\"name\":\"node1.1\",\"someProperty\":\"somePropertyA1\",";
a += "\"children\":[{\"id\":\"node1.1.3\",\"name\":\"node1.1.3\"},";
a += "{\"$ref\":\"node1.1.1\",\"name\":\"node1.1.1\"},";
a += "{\"$ref\":\"node1.1.2\",\"name\":\"node1.1.2\"}]}";
}
AjaxResponseUtils.ajaxPushText(response, a);
}
效果图: