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編寫的簡單例子，有任何理解或做法上的錯誤，歡迎批評指正！
總結
以上是生活随笔為你收集整理的java easyui tree例子_EasyUI Tree的简单使用的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 《企鹅公路》兰州啥时候播出
- 下一篇： python备份文件代码_python备