欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

jQuery-EasyUI组件的tree扩展方法说明

程序员文章站 2022-05-27 22:12:43
jquery-easyui的tree扩展方法说明 包含以下内容: 树形结构基本说明 继承于tree的combotree 打开指定节点 查找当前节点处于第几级 附录java的tr...

jquery-easyui的tree扩展方法说明

包含以下内容:

树形结构基本说明 继承于tree的combotree 打开指定节点 查找当前节点处于第几级 附录java的tree实体文件


树形结构基本说明

样子

jQuery-EasyUI组件的tree扩展方法说明

数据格式

jQuery-EasyUI组件的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;
    }

}