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中加载数据源的方法如下:
$('#tt').tree({ url: ..., loadFilter: function(data){ if (data.d){ return data.d; } else { return data; } }}); 此种方法有一种弊端,则是如果你的叶子节点state为closed的时候,点击叶子节点,则会再次请求action,无穷尽的load数据,而采用先post请求数据,再用静态源的方式则很好的解决此问题。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将数据展示为父子结构的。
代码可以直接黏贴使用,如有问题可以交流。