脚本宝典收集整理的这篇文章主要介绍了js实例教程-jQuery-EasyUI组件的tree扩展方法说明，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

 $('#tt').tree({         //url:'tree_data.json'     url:'/tree/find' });  

 $('#tt').tree({     data: [{         text: 'ITem1',         state: 'closed',         children: [{             text: 'Item11-1'         },{             text: 'Item11-2'         }]     },{         text: 'Item2'     }] });

 $('#tt').COMbotree('tree');

 //方法传参为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插件，得到当前结点的级数(即第几级)  * 调用如下:  * 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;     } });

 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技巧，巧夺天工，精雕玉琢。小宝典献丑了！

脚本宝典总结

以上是脚本宝典为你收集整理的js实例教程-jQuery-EasyUI组件的tree扩展方法说明全部内容，希望文章能够帮你解决js实例教程-jQuery-EasyUI组件的tree扩展方法说明所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。