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"
});
});