本文为jQuery-EasyUI组件tree扩展方法说明
包含以下内容:
- 树形结构基本说明
- 继承于tree的combotree
- 打开指定节点
- 查找当前节点处于第几级
- 附录Java的Tree实体文件
树形结构基本说明
- 样子
- 数据格式
- 数据如何绑定
分两种数据加载模式,第一种使用远程读取数据,通过get或post请求接口获得数据内容,也可以直接读取json文件
$('#tt').tree({
//url:'tree_data.json'
url:'/tree/find'
});
另一种方式是使用静态数据,若需要将已经存在的数据放入控件,则直接使用自定义绑定data即可
$('#tt').tree({
data: [{
text: 'Item1',
state: 'closed',
children: [{
text: 'Item11-1'
},{
text: 'Item11-2'
}]
},{
text: 'Item2'
}]
});
继承于tree的combotree
因为combotree既继承combo又继承tree,而其内的基础结构是属于combo的,只有在内包装了tree。所以要调用tree里面的方法,在conbotree的基础上先得获取到它的tree,取得tree内容后,参考tree的方法进行对应操作即可。
$('#tt').combotree('tree');
打开指定节点
因内容涉及到tree部分,则需要利用刚刚的内容,之后再使用expendTo方法打开对应节点,因为需要target对象,所以我们只能通过id去找target对象,下面也封装了一个方法,调用传参即可
//方法传参为target,也就是说得获取到那个树形节点的对象才行
$('#'+treeid).combotree('tree').tree('expandTo', target);
/**
* 打开tree的指定节点,其他节点为默认关闭
* @param treeid 树ID
* @param openid 要打开的节点ID
*/
function tree_expandTo(treeid, openid) {
$('#'+treeid).combotree('tree').tree('expandTo',
$('#'+treeid).combotree('tree').tree('find', openid).target);
}
查找当前节点处于第几级
本方法直接扩展加入了easyui-tree的方法内,直接调用即可
/**
* 扩展easyui tree插件,得到当前结点的级数(即第几级)
* 调用如下:
* var node = $('#menus').tree("getSelected");
* var lv = $('#menus').tree("getLevel",node.target);
*/
$.extend($.fn.tree.methods, {
getLevel:function(jq,target){
var l = $(target).parentsUntil("ul.tree","ul");
return l.length+1;
}
});
附录提供Tree.java封装
import java.io.Serializable;
import java.util.List;
/**
* 对应EasyUI前端Tree封装
* @author around
* @date 2018-4-26
*/
public class Tree implements Serializable {
private static final long serialVersionUID = 5350719828301693594L;
private String id;
private String text;
private String url;
/** 'state'可用值有:'checked','unchecked','indeterminate' */
private String state;
private String iconCls;
private String description;
private List<Tree> children;
/** 上级ID */
private String pid;
private boolean checked;
public List<Tree> getChildren() {
return children;
}
public void setChildren(List<Tree> children) {
this.children = children;
}
public String getId() {
return id;
}
public void setId(String id) {
this.id = id;
}
public String getText() {
return text;
}
public void setText(String text) {
this.text = text;
}
public String getUrl() {
return url;
}
public void setUrl(String url) {
this.url = url;
}
public String getState() {
return state;
}
public void setState(String state) {
this.state = state;
}
public String getIconCls() {
return iconCls;
}
public void setIconCls(String iconCls) {
this.iconCls = iconCls;
}
public String getDescription() {
return description;
}
public void setDescription(String description) {
this.description = description;
}
public String getCode() {
return code;
}
public void setCode(String code) {
this.code = code;
}
public String getNavigation() {
return navigation;
}
public void setNavigation(String navigation) {
this.navigation = navigation;
}
public String getPid() {
return pid;
}
public void setPid(String pid) {
this.pid = pid;
}
public boolean isChecked() {
return checked;
}
public void setChecked(boolean checked) {
this.checked = checked;
}
}
作者精通easyUI相关复杂操作和自定义扩展,有疑难杂症可以联系我噢!