jQuery-EasyUI组件的tree扩展方法说明
程序员文章站
2022-05-27 22:12:43
jquery-easyui的tree扩展方法说明
包含以下内容:
树形结构基本说明 继承于tree的combotree 打开指定节点 查找当前节点处于第几级 附录java的tr...
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 children; /** 上级id */ private string pid; private boolean checked; public list getchildren() { return children; } public void setchildren(list 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; } }
下一篇: centos7 多网卡修改默认路由