java easyui tree例子_EasyUI Tree的简单使用

此前写过zTree插件的demo，没有记录下来，这次记录一下EasyUI的Tree。

实现效果：获取数据库表的数据，以树结构的形式展示出来。

树结构数据分为同步加载和异步加载，同步加载就是初始化加载时直接将整个树结构数据全部加载出来，异步加载则是初始化加载时只加载树的根节点，当点击某个节点时才向系统请求数据，若该节点有子节点则加载(只加载)出该节点的子节点(子节点的子节点不加载)。

项目、框架、数据库：创建的是Maven项目，采用Spring+SpringMVC+Mybatis框架，数据库SQL Server 2005

1.创建数据库表

表结构：

表数据：

2.通过mybatis逆向工程映射TreeTestTable(表名略丑)

TreeTestTable表的实体类代码：

packagecom.lwl.EasyUIDemo.bean;public classTreeTestTable {privateInteger id;privateInteger pid;privateString value;

set/get方法...

}

3.编写TreeBean类(由于实际使用中表结构不同，因此需要编写一个类用于将获取到的数据对象转为前端Tree能够读取并加载的数据格式)：

packagecom.lwl.EasyUIDemo.pojo;importjava.util.ArrayList;importjava.util.List;importcom.lwl.EasyUIDemo.bean.TreeTestTable;public classTreeBean {private intid;private intpid;privateString state;privateString text;private Listchildren;/*** TreeTestTable对象转TreeBean对象

*@paramtreeList

*@return

*/

public static List toTreeBeans(ListtreeList){

List treeBeans = new ArrayList();for(TreeTestTable tree : treeList) {

TreeBean treeBean= new TreeBean(tree.getId(), tree.getPid(), tree.getValue(), new ArrayList());

treeBeans.add(treeBean);

}returntreeBeans;

}/*** 获取TreeBean对象列表

*@paramtreeBeans

*@return

*/

public static List getTreeBeanList(ListtreeBeans){//创建TreeBean对象列表

List treeBeanList = new ArrayList();//遍历获取到的List对象列表

for(TreeBean treeBean1 : treeBeans) {

List treeBeanChildren =treeBean1.getChildren();//再次遍历List对象列表

for(TreeBean treeBean2 : treeBeans) {//当pid等于id时，将pid所在的对象存入同一个

if (treeBean1.getId()==treeBean2.getPid()) {

TreeBean treeBean= newTreeBean(treeBean2.getId(), treeBean2.getPid(), treeBean2.getText(), treeBean2.getChildren());//存入父节点列表对象

treeBeanChildren.add(treeBean);

}

}//设置children属性

treeBean1.setChildren(treeBeanChildren);//判断是否是0节点

if (treeBean1.getPid()==0) {

treeBeanList.add(treeBean1);

}

}returntreeBeanList;

}public TreeBean(int id, int pid, String text, Listchildren) {super();this.id =id;this.pid =pid;this.text =text;this.children =children;

}

public TreeBean() {}

set/get方法...

}

4.编写Controller层代码(动态树和静态树是分开写的，下面是把两个的代码全贴出来)：

packagecom.lwl.EasyUIDemo.controller;importjava.util.List;importorg.springframework.beans.factory.annotation.Autowired;importorg.springframework.stereotype.Controller;importorg.springframework.web.bind.annotation.RequestMapping;importorg.springframework.web.bind.annotation.RequestParam;importorg.springframework.web.bind.annotation.ResponseBody;importcom.alibaba.fastjson.JSON;importcom.github.pagehelper.PageHelper;importcom.github.pagehelper.PageInfo;importcom.lwl.EasyUIDemo.bean.TreeTestTable;importcom.lwl.EasyUIDemo.pojo.DatagridBean;importcom.lwl.EasyUIDemo.pojo.TreeBean;importcom.lwl.EasyUIDemo.service.TreeTestTableService;

@Controllerpublic classTestController {

@AutowiredprivateTreeTestTableService treeService;/*** 静态树同步加载

*@return

*/@RequestMapping("/getTree")

@ResponseBodypublicJSON getTree(){//获取所有值

List treeList =treeService.getTree();

List treeBeans =TreeBean.getTreeBeanList(TreeBean.toTreeBeans(treeList));return(JSON) JSON.toJSON(treeBeans);

}/*** 动态树异步加载(点击无子节点的节点时请求)

*@paramid

*@return

*/@RequestMapping("/getTreeById")

@ResponseBodypublic JSON getTreeByPid(@RequestParam("id") intid){//将id作为pid获取匹配数据

List treeList =treeService.getTreeByPid(id);

List treeBeans =TreeBean.toTreeBeans(treeList);return(JSON) JSON.toJSON(treeBeans);

}

}

5.对照controller层方法所引用的service方法来创建service接口：

packagecom.lwl.EasyUIDemo.service;importjava.util.List;importcom.lwl.EasyUIDemo.bean.TreeTestTable;public interfaceTreeTestTableService {/*** 获取表的全部数据

*@return

*/ListgetTree();/*** 获取匹配pid的数据

*@return

*/List getTreeByPid(intid);

}

Service实现类：

packagecom.lwl.EasyUIDemo.serviceImpl;importjava.util.List;importorg.springframework.beans.factory.annotation.Autowired;importorg.springframework.stereotype.Service;importcom.lwl.EasyUIDemo.bean.TreeTestTable;importcom.lwl.EasyUIDemo.bean.TreeTestTableExample;importcom.lwl.EasyUIDemo.dao.TreeTestTableMapper;importcom.lwl.EasyUIDemo.service.TreeTestTableService;

@Servicepublic class TreeTestTableServiceImpl implementsTreeTestTableService {

@AutowiredprivateTreeTestTableMapper tableMapper;/*** 获取表的全部数据*/

public ListgetTree() {return tableMapper.selectByExample(null);

}/*** 获取匹配pid的内容*/

public List getTreeByPid(intid) {

TreeTestTableExample example= newTreeTestTableExample();

example.createCriteria().andPidEqualTo(id);returntableMapper.selectByExample(example);

}

}

6.编写jsp页面(关于EasyUI的使用格式等请自行查看EasyUI API文档)：

EasyUI实例

动态树加载：

//静态树加载

$("#staticTree").tree({

url:'getTree',

onClick :function(node) {//展开/折叠

if(node.state=== 'open') {

$('#staticTree').tree('collapse', node.target);

}else{

$('#staticTree').tree('expand', node.target);

}

},

onLoadSuccess:function(node, data){//加载成功后折叠所有节点

$('#staticTree').tree('collapseAll');

}

});//动态树加载

$("#dynamicTree").tree({

url :'getTreeById?id=0',

onClick :function(node) {//若所选节点为空则执行请求

if($('#dynamicTree').tree('isLeaf', node.target)) {

$.ajax({

url :'getTreeById?id=' +node.id,

type :'POST',

success :function(data) {

$('#dynamicTree').tree('append', {

parent : node.target,

data : data

})

}

})

}//展开/折叠

if(node.state=== 'open') {

$('#dynamicTree').tree('collapse', node.target);

}else{

$('#dynamicTree').tree('expand', node.target);

}

}

})

运行看一下效果：

静态树在页面载入时加载了完整的树结构，而动态树则只加载了根节点，当点击节点时才载入子节点：

在数据表中添加两个子节点：

动态加载树，加载且只加载该节点的子节点：

当点击动态树的一号时：

以上仅仅是本人接触EasyUI Tree编写的简单例子，有任何理解或做法上的错误，欢迎批评指正！