感觉easyUi 的树用起来不如 Ext 的树方便,首先,root节点不太好自定义,
异步加载时,只能通过后台判断生成root节点,但是这样一来有一个问题,就是第一次访问界面时,
树的初始化比较慢,大概会有一秒左右的时间,树是空白的,虽然只有一秒左右的时间,但是对于我来说是没有办法容忍的,所以,我是用 ajax 的方法通过append 将子节点加入进去,然后展开所有节点,并且默认选择第一个子节点
下面是 js 代码
$(document).ready(function(){ $("#tree").tree({ data: [{ text: '主目录', state: 'closed' }], onSelect: function(selectNode){ console.log("select: " + selectNode.id); } }); $.ajax({ type : "POST", dataType : "json", url : "testAction_loadTree", success : function(data){ var rootNode = $("#tree").tree('getRoot'); /* 向root添加子节点 */ $("#tree").tree('append',{ parent: rootNode.target, data: data }); /* 展开所有节点 */ $("#tree").tree('expandAll'); var children = $("#tree").tree('getChildren',rootNode.target); /* 选中第一个子节点 */ $("#tree").tree("select",children[0].target); } }); });
ajax 通过后台传递的json数据格式为:
[{"id":"D:\lucene\file5\index","state":"open","text":"D:\lucene\file5\index"},{"id":"D:\lucene\file5\indexwa","state":"open","text":"D:\lucene\file5\indexwa"},{"id":"D:\lucene\file5\index_tmp","state":"open","text":"D:\lucene\file5\index_tmp"},{"id":"D:\lucene\file5\spider","state":"open","text":"D:\lucene\file5\spider"}]
json 是通过fastJson 这个开源的java 工具实现的,挺好用的,在此推荐一下