此前寫過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編寫的簡單例子，有任何理解或做法上的錯誤，歡迎批評指正！

總結

以上是生活随笔為你收集整理的java easyui tree例子_EasyUI Tree的简单使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。