摘要:包含以下内容:树形结构基本说明 继承于tree的combotree 打开指定节点 查找当前节点处于第几级 附录Java的Tree实体文件

小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。

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

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

觉得可用,就经常来吧!Javascript技巧 脚本宝典 欢迎评论哦! js技巧,巧夺天工,精雕玉琢。小宝典献丑了!

本文固定链接: http://www.js-code.com/js/js_1281.html