jsp:
<ul id='dptDataTree' class="easyui-tree"></ul>
js:
$.post('xxxxx.action', function(data) {
$('#dptDataTree').tree({
data: data,
lines:true,//有没有线
dnd:false,//是否允许拖动
animate: true,
onSelect: function(node){
findById(node.id);
}
});
}, 'json');
easyui中加载数据源的方法如下:
此种方法有一种弊端,则是如果你的叶子节点state为closed的时候,点击叶子节点,则会再次请求action,无穷尽的load数据,而采用先post请求数据,再用静态源的方式则很好的解决此问题。
- $('#tt').tree({
- url: ...,
- loadFilter: function(data){
- if (data.d){
- return data.d;
- } else {
- return data;
- }
- }
- });
java:
递归方法:
public static TreeNode constructTree(TreeNode rootNode, Object[][] res, int rootLevel){
List<TreeNode> childNodeList = new ArrayList<TreeNode>();
//构造根节点
for(int i=0; i<res.length; i++){
String pid = StringHelper.obj2str(res[i][1], "");
if(pid.equals(rootNode.getId()) && !pid.equals(StringHelper.obj2str(res[i][0], ""))){
TreeNode childNode = new TreeNode();
childNode.setId(StringHelper.obj2str(res[i][0], ""));
childNode.setpId(pid);
childNode.setText(StringHelper.obj2str(res[i][2], ""));
if(res[i].length == 4){
childNode.setNumId(StringHelper.obj2str(res[i][3], ""));
}
childNode.setState("closed");
//设置深度
childNode.setLevel(rootLevel+1);
childNodeList.add(childNode);
}
}
//设置子节点
rootNode.setChildren(childNodeList);
//设置是否叶子节点
if(childNodeList.size()==0){
rootNode.setLeaf(true);
} else {
rootNode.setLeaf(false);
}
//递归构造子节点
for(int j=0; j<childNodeList.size();j++){
//进入子节点构造时深度+1
constructTree(childNodeList.get(j), res, ++rootLevel);
//递归调用返回时,构造子节点的兄弟节点,深度要和该子节点深度一样,因为之前加1,所以要减1
--rootLevel;
}
return rootNode;
}
TreeNode实体类
private String id;//节点编号
private String text;//节点文本
private String state="closed";//节点状态
private String pId;//父id
private List<TreeNode> children=new ArrayList<TreeNode>();//子节点集合
private int level;//深度
private boolean leaf;//是否叶子节点
省略set get方法
sql语句:
以oracle为例,需要使用start with .. connect by将数据展示为父子结构的。
代码可以直接黏贴使用,如有问题可以交流。