一,准备树形实体。
二,组装数据,注意一定要将父级节点的state在后端返回数据时关闭,要不在界面不会出现,可选的子节点。
三,前端处理
一,
import java.util.TreeSet;
import com.fasterxml.jackson.annotation.JsonIgnore;
import lombok.Data;
import lombok.Setter;
import lombok.AccessLevel;
/**
* 树实体,此树结构符合easyui 的tree结构
*
*
*/
@Data
public class TreeEntity implements Comparable<TreeEntity>
{
/**
* 节点收缩状态标识
*/
public static final String STATE_CLOSED = "closed";
/**
* 节点展开状态标识
*/
public static final String STATE_OPEN = "open";
/**
* 空图标的样式
*/
public static final String NULL_ICON="icon-blank";
/**
* 文件夹图标标式
*/
public static final String FOLDER_ICON="tree-folder";
/**
* 节点id
*/
private String id;
/**
* 节点显示文本
*/
private String text;
/**
* 节点显示的图标
*/
private String iconCls;
/**
* 是否勾选
*/
private boolean checked;
/**
* 节点默认状态(open、closed)
*/
private String state;
/*
* 父节点标识值
*/
private String parentId;
/**
* 排序值
*/
private int sort;
/*
* 是否已加载(用于子节点的延时加载)
*/
@JsonIgnore
private boolean isLoad;
/**
* 节点自定义属性
*/
private Object attributes;
/**
* 子节点集
*/
@Setter(AccessLevel.PROTECTED)
private TreeSet<TreeEntity> children;
public TreeEntity()
{
children=new TreeSet<TreeEntity>();
}
/**
* 构造节点
* @param sId
* @param sText
* @param sParentId
* @param iSort
* @param sIcon 节点图标样式定义(null表示默认图标,""表示使用空图标)
*/
public TreeEntity(String sId,String sText,String sParentId,int iSort,String sIcon)
{
this();
id=sId;
text=sText;
parentId=sParentId;
sort=iSort;
if(sIcon!=null){
if(sIcon.isEmpty())
sIcon=NULL_ICON;
iconCls=sIcon;
}
}
@Override
public int compareTo(TreeEntity o)
{
if(o==null) return 1;
if(this==o) return 0;//如果是同一对象,返回0(用于移除)
//注意:不能返回0,因为在TreeSet排序时,如果比较是0值时,会认为是在同一个位置放置元素(将会覆盖原来的元素)
if(this.sort==o.sort){//如果排序值相同,再比较标题
String stext=this.text;
if(stext==null)stext="";
int ir=stext.compareTo(o.text);
if(ir==0){
stext=this.id;
if(stext==null)stext="";
ir=stext.compareTo(o.id);
}
return ir==0?1:ir;//仍相等,返回大于
}
return (this.sort<o.sort)?-1:1;
}
}
二,
public TreeEntity buildAdministrativeTree(AdministrativeDivisionEntity info)
{
TreeEntity root = new TreeEntity();
root.setId(info.getCode());
root.setText(info.getLname());
root.setIconCls("icon-blank");
if(info.getCode().length()<=4){
root.setState("closed");
}
List<AdministrativeDivisionEntity> list = info.getChildren();
if(list!=null&&list.size()>0){
for(AdministrativeDivisionEntity data : list){
root.getChildren().add(buildAdministrativeTree(data));
}
}
return root;
}
三,
1,jsp:
<input id="deptDistrict" class="easyui-combotree" style="width: 100%;"
data-options="editable:true"/>
2,js:
//Ajax请求,返回的内容将根据请求头MIME 信息来判断。
//url:请求地址
//data:请求数据内容
//prop:请求参数,包含属性
// msg,操作描述,一般在不需要自己处理返回结果的情况下,能友好提示用户的信息(不设置或空,默认为“操作”)
// sFn,执行成功后的回调方法(参数为服务器返回结果),不设置或空,默认为显示操作成功提示
// fFn,执行失败后的回调方法(参数1为请求对象,参数2为提示信息,参数3为异常信息),不设置或空,默认为显示操作失败提示
// async,是否异步调用请求,默认为true(即异步调用)
// method,请求方法,默认为POST
// jsonObj,是否将数据以json串发送请求(会使用invokeJsonObj方法发送请求)
function invokeJson(url,data,prop){
if(!prop) prop = {};
if(prop.jsonObj){invokeJsonObj(url,data,prop); return;}
if(!prop.msg) prop.msg = '操作';
if(!prop.sFn) {prop.sFn = function(data){showSuccess(prop.msg+'成功');}};//成功的方法
if(!prop.fFn) {prop.fFn = function(xhr,data,ex){showError(prop.msg+'失败:'+analyseError(xhr.responseText));}}//失败的方法
if(typeof(prop.async)=="undefined" || prop.async==null) prop.async = true;
if(!prop.method) prop.method="POST";
else if(prop.method.toUpperCase()=="GET"){
url=tagGetRequest(url);
}
$.ajax({
url: url,
type:prop.method,
async : prop.async,
data:data,
success: prop.sFn,
error: prop.fFn
});
}
$(function(){
var t1=$('#deptDistrict').combotree('tree');
loadTree(t1);
addTreeChildren(t1);
});
function addTreeChildren(tree){
tree.tree({
onBeforeExpand: function (node) {
// 展开节点搜索子节点,并添加到树结构里
if (node.children.length > 0 || node.id == 'notDefinition') {
return;
}
var id = node.id;
invokeJson("/mainWeb/mystestChildren", { code: id }, {
method:"GET",
async: false,
sFn: function (data, textStatus) {
tree.tree('append', {
parent: node.target,
data: data
});
$(node.target).next().css("display", "block");
}, fFn: function (data) {
layer.msg("查询失败");
}
});
}
});
}
function loadTree(t){
var url='/mainWeb/mytest';
invokeJson(url, null, {
method:"GET",
sFn: function (data) {
t.tree({
data: data,
onLoadSuccess: function () { //默认折叠所有节点
t.tree("collapseAll");
}
});
}
});
}