easy ui+springmvc樹的生成
1. easy ui樹的生成,首先可以看一下easyui tree 的資料格式:
id:節點的 id,它對於載入遠端資料很重要。
text:要顯示的節點文字。
state:節點狀態,'open' 或 'closed',預設是 'open'。當設定為'closed' 時,該節點有子節點,並且將從遠端站點載入它們。
checked:指示節點是否被選中。
attributes:給一個節點新增的自定義屬性。
children:定義了一些子節點的節點陣列。
看完樹的資料格式之後,我們在後臺既可以封裝了。
2. 頁面載入樹有兩種形式
2.1
<ulid="tt" class="easyui-tree">
<li>
<span>Folder</span>
<ul>
<li>
<span>SubFolder 1</span>
<ul>
<li><span><ahref="#">File 11</a></span></li>
<li><span>File12</span></li>
<li><span>File13</span></li>
</ul>
</li>
<li><span>File2</span></li>
<li><span>File3</span></li>
</ul>
</li>
<li><span>File21</span></li>
</ul>
2.2 js展開,後臺請求json資料
$('#tt').tree({
url:'tree_data.json'
});
3. 下面主要就是介紹2.2的,後臺為spring mvc ,ibatis
3.1我的表結構
後臺其實主要做的就是查詢
3.2封裝tree資料的model
package com.hyjx.business.handleguide;
import java.util.List;
/**
* @author :hanzl
* @version建立時間:2017年11月28日下午5:15:07
*/
public classTreeObject {
private Stringid;//節點的 id,它對於載入遠端資料很重要
private Stringtext;//要顯示的節點文字
private Stringstate;//節點狀態,'open'或 'closed',預設是 'open'。當設定為 'closed'時,該節點有子節點,並且將從遠端站點載入它們
private Stringchecked;//指示節點是否被選中。
private Stringattributes;//給一個節點新增的自定義屬性
private List<TreeObject>children;//定義了一些子節點的節點陣列
private Stringlevel;
private Stringtype;//許可,事項
private Stringleafflag;
public String getLeafflag() {
return leafflag;
}
public void setLeafflag(String leafflag) {
this.leafflag =leafflag;
}
public String getType() {
return type;
}
public void setType(String type) {
this.type =type;
}
public String getLevel() {
return level;
}
public void setLevel(String level) {
this.level =level;
}
public List<TreeObject>getChildren() {
return children;
}
public voidsetChildren(List<TreeObject> children) {
this.children =children;
}
public String getChecked() {
return checked;
}
public void setChecked(String checked) {
this.checked =checked;
}
public String getText() {
return text;
}
public void setText(String text) {
this.text =text;
}
public String getId() {
return id;
}
public void setId(String id) {
this.id =id;
}
public String getAttributes(){
return attributes;
}
public void setAttributes(String attributes) {
this.attributes =attributes;
}
public String getState() {
return state;
}
public void setState(String state) {
this.state =state;
}
}
3.3查詢並封裝tree 資料,主要用了遞迴的方法
根節點就是沒有父code,從第二級到無限極都是根據父節點無限遞迴查詢,最後將List轉為json即可
public String queryTree(GuidelineModelmodel) {
List<TreeObject>trees= newArrayList<TreeObject>();//待轉換的樹
List<GuidelineModel>listguide=newArrayList<GuidelineModel>();//查詢出的樹的資料
listguide=dao.queryObjectList("guideline.querytrees",model);
//查詢出一級樹
for(GuidelineModelguidemodel:listguide){
TreeObjecttr=new TreeObject();
if("".equals(guidemodel.getParentcode())||guidemodel.getParentcode()==null){
tr.setId(guidemodel.getGuidecode());
tr.setText(guidemodel.getGuidename());
tr.setLevel(guidemodel.getNodelevel());
tr.setType(guidemodel.getType());
tr.setLeafflag(guidemodel.getLeafflag());
tr.setChildren(this.treechidren(guidemodel));
trees.add(tr);
}
}
return CommonUtil.getJsonString(trees);
}
/**遞迴查詢多級樹*/
public List<TreeObject>treechidren(GuidelineModelparentmodel){
List<TreeObject>trees= newArrayList<TreeObject>();//待轉換的子樹
@SuppressWarnings("unchecked")
List<GuidelineModel>childrenlist=dao.queryObjectList("guideline.querychidrenbyparencode",parentmodel);//子list
for(GuidelineModelmodel:childrenlist)
{
TreeObjecttrchidren=new TreeObject();
trchidren.setId(model.getGuidecode());
trchidren.setText(model.getGuidename());
trchidren.setLevel(model.getNodelevel());
trchidren.setType(model.getType());
trchidren.setLeafflag(model.getLeafflag());
//呼叫自己的方法
trchidren.setChildren(this.treechidren(model));
trees.add(trchidren);
}
return trees;
}
3.4,Controller呼叫即可
/** 載入選單樹資料 */
@RequestMapping(value = "/selectMenuTrees",method = { RequestMethod.GET, RequestMethod.POST }, produces ="application/json;charset=utf-8")
@ResponseBody
public StringselectMenuTrees(HttpServletRequestrequest, HttpServletResponse response) {
GuidelineModelmodel= newGuidelineModel();
return service.queryTree(model);
}
3.5頁面呼叫:
$(function(){
$("#hy-menutree").tree({
checkedvalue:"",
showOperate:"0",
isreadonly:"1",
url:"<%=basePath%>/guideline/selectMenuTrees.xhtml",
onClick:function(node){//單擊事件
switchRight(node);
} ,
showAll:"1",
applyRight:"0"
});
});