easyui tree异步树菜单联动

最新推荐文章于 2021-06-07 13:06:18 发布

hjxgood

最新推荐文章于 2021-06-07 13:06:18 发布

阅读量5.8k

点赞数

本文链接：https://blog.csdn.net/hjxgood/article/details/23353061

版权

本文介绍了如何使用EasyUI库创建一个异步树形菜单，实现节点展开时动态加载子节点数据，并展示了相关的JS、CSS和HTML代码。树菜单根据节点类型触发不同页面跳转，同时提供了重载树形结构的功能。

摘要由CSDN通过智能技术生成

JS:

引用的资源：tree.css，jquery-1.9.1.js，jquery.easyui.min.js（只用到tree功能时可只引用jquery.parser.js，jquery.tree.js，jquery.draggable.js，jquery.droppable.js）

$(document).ready(function() {
   loadOrgTree();
});

function loadOrgTree(){
     $.ajax({
       type : "post",
       url: "url1",

       success: function (data) {
          // var myJson = eval('(' + result + ')');
          // alert(myJson);
           $("#org").tree({
     animate: true,
     lines:true,
     //checkbox:true,
     data: data,
               onBeforeExpand:function(node){
                 if(node.iconCls=="orgDepIcon"){
                            var url = "url2";
       url=url+'?depid='+node.id;
       $('#org').tree('options').url = url;
                        }
                  else{
                      var url ="url3",

       url=url+'?depid='+node.id;
       $('#org').tree('options').url = url;
      }

               },
               onSelect : function(node) {

                     },
               onClick:function(node){
                  $(this).tree('expand',node.target);
                  //根节点
                  if(node.id=="00000000000000000000000000000000"){
                     window.parent.frames["mainFrame"].location="organizationMain.html?pid="+node.id;
                  }
                  else{
                       if(node.iconCls=="orgDepIcon"){
                          window.parent.frames["mainFrame"].location="userList.html?deptId="+node.id;
                       }
                       else if(node.iconCls=="orgUserIcon"){
                          //不跳转
                       }
                       else{
                       window.parent.frames["mainFrame"].location="departmentList.html?pid="+node.id;
                       }
                  }
            }

           });
       }
   });
}

css:

.bookIcon{
background:url('../images/formatData.gif') no-repeat;
}

//重载左边树
function reloadLeftTree(){
     var node = null;
  node = $('#org').tree('getSelected');
  if (node==null) {
      node = $('#org').tree('getRoot');
  }
  $('#org').tree('reload', node.target);
}

html:

后端：

public class TreeJson implements Serializable {

    private static final long serialVersionUID = 1L;
    private String id;
    private String text;
    private String iconCls;
    private String state;
    private String checked;
    private JSONObject attributes = new JSONObject();
    private List<TreeJson> children = new ArrayList<TreeJson>();

public TreeJson() {
}

    public TreeJson(String id, String text, String iconCls, String state, String checked) {
        super();
        this.id = id;
        this.text = text;
        this.iconCls = iconCls;
        this.state = state;
        this.checked = checked;
    }

    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 getIconCls() {
        return iconCls;
    }

    public void setIconCls(String iconCls) {
        this.iconCls = iconCls;
    }

    public String getState() {
        return state;
    }

    public void setState(String state) {
        this.state = state;
    }

    public String getChecked() {
        return checked;
    }

    public void setChecked(String checked) {
        this.checked = checked;
    }

    public JSONObject getAttributes() {
        return attributes;
    }

    public void setAttributes(JSONObject attributes) {
        this.attributes = attributes;
    }

    public List<TreeJson> getChildren() {
        return children;
    }

    public void setChildren(List<TreeJson> children) {
        this.children = children;
    }

}

public class TreeConstants {
    /**
     * 展开状态
     */
    public static final String STATE_OPEN = "open";
    /**
     * 闭合状态
     */
    public static final String STATE_CLOSEED = "closed";

    /**
     * 根节点图片状态
     */
    public static final String ORG_ROOT_ICON = "orgRootIcon";
    /**
     * 组织图片
     */
    public static final String ORG_ICON = "orgIcon";

    /**
     * 书图片
     */
    public static final String BOOK_ICON = "bookIcon";

    /**
     * 部门图片
     */
    public static final String ORG_DEP_ICON = "orgDepIcon";

}

后台数据封装成List对象并返回json格式：

List<TreeJson> treelist = new ArrayList<TreeJson>();
        for (Organization org : list) {
            TreeJson node = new TreeJson();
            node.setId(org.getId());
            node.setText(org.getName());
            // 部门节点且是叶子节点
            // boolean hasChild = organizationService.hasChildren(org.getId());
            // if ("1".equals(org.getType())) {
            // node.setState(usersService.hasUser(org.getId()) ?
            // TreeConstants.STATE_CLOSEED
            // : TreeConstants.STATE_OPEN);
            // } else {
            // node.setState(hasChild ? TreeConstants.STATE_CLOSEED :
            // TreeConstants.STATE_OPEN);
            // }
            node.setState(TreeConstants.STATE_CLOSEED);
            if ("1".equals(org.getType())) {
                node.setIconCls("orgDepIcon");
            } else {
                node.setIconCls("orgIcon");
            }
            treelist.add(node);
        }