标签：
先看效果
在html页面中为两棵树创建两个div
<div id="dlg-preview" class="easyui-window" style="width:580px;height:420px;" closed="true"> <div style="padding:16px;width:251px;float:left;overflow:auto;height:348px;"> <div id="role_list"> <ul id="role" class="easyui-tree"></ul> </div> </div> <div style="padding:16px;width:251px;float:right;overflow:auto;height:348px;"> <div id="auth_list"> <ul id="auth" class="easyui-tree"></ul> </div> </div> </div>
注意：EasyUI树使用的父标签是<ul/>
现在要用json数据初始化这个<ul/>标签，以第一级“角色”根目录为例，json数据格式如下：
[{"id":"0","parent":null,"text":"角色","children":null,"childrenCount":null,"level":"0","attributes":null ,"state":"closed","checked":null,"type":null}]
根节点的初始化一般是固定的，所以你可以写一个对象而不用去数据库查询。接下来就开始一级一级初始化，每一级数据都是从不同地方（数据表）查询来的，而关键就在于初始化树时的onBeforeExpand事件。
在准备打开一级节点时改变这个节点的url（很有可能需要根据该节点类型来设置），从而获取所需数据。完整的初始化代码如下：
//初始化数据权限列表 authority_user.initAuthList = function(row) { $("#auth").tree(‘collapseAll‘); $("#auth").tree({ url : BasePath + "/authority_user/auth_tree?userId=" + row.userId, animate : true, lines : true, method : ‘GET‘, formatter:function(node){ var s = node.text; if (node.children){ s += ‘ <span style=\‘color:blue\‘>(‘ + node.children.length + ‘)</span>‘; } else { if(node.state == ‘state‘) { s += ‘ <span style=\‘color:blue\‘>( )</span>‘; } } return s; }, onBeforeExpand:function(node,param){ var url = BasePath + "/authority_user/auth_tree?userId=" + row.userId + "&type=" + node.type + "&level=" + node.level; $(‘#auth‘).tree(‘options‘).url = url; }, onClick : function(node) { if (node.state && node.state == ‘closed‘) { $(this).tree(‘expand‘, node.target); } else { $(this).tree(‘collapse‘, node.target); } } }); };
用于初始化节点的数据是一个个对象，Controller返回List即可。只是节点对象的属性名称有约束：
public class TreeModel { private String id; private String parent; private String text; private String children; private String childrenCount; private String level; private String attributes; private String state; private String checked; private String type; public String getType() { return type; } public void setType(String type) { this.type = type; } public String getChildrenCount() { return childrenCount; } public void setChildrenCount(String childrenCount) { this.childrenCount = childrenCount; } public String getChecked() { return checked; } public void setChecked(String checked) { this.checked = checked; } public String getId() { return id; } public void setId(String id) { this.id = id; } public String getAttributes() { return attributes; } public void setAttributes(String attributes) { this.attributes = attributes; } public String getParent() { return parent; } public void setParent(String parent) { this.parent = parent; } public String getText() { return text; } public void setText(String text) { this.text = text; } public String getChildren() { return children; } public void setChildren(String children) { this.children = children; } public String getLevel() { return level; } public void setLevel(String level) { this.level = level; } public String getState() { return state; } public void setState(String state) { this.state = state; } }
官方文档提到，每个节点都具备以下属性：
id：节点ID，对加载远程数据很重要。
text：显示节点文本。
state：节点状态，‘open‘ 或 ‘closed‘，默认：‘open‘。如果为‘closed‘的时候，将不自动展开该节点。
checked：表示该节点是否被选中。
attributes: 被添加到节点的自定义属性。
children: 一个节点数组声明了若干节点。
所以节点对象要与之对应。
下面以根节点为例，说明获取数据的方式：
/** * 生成用户角色目录树 * @author yang.wei * @time 2015-7-23 * @param id * @param req * @return List<TreeModel> */ @RequestMapping(value = "/role_tree") @ResponseBody public List<TreeModel> roleTree(String level, String userId, String roleId, String systemId,String menuId, String moduleId, HttpServletRequest req)throws ManagerException { List<TreeModel> list = null; if (level == null) { list = new ArrayList<TreeModel>(1); TreeModel one = new TreeModel(); one.setId("0"); one.setText("角色"); one.setState("closed"); one.setLevel("0"); list.add(one); } //查询用户拥有的角色列表，参数：userId if ("0".equals(level)) { list = this.authorityUserManager.getUserRoleList(userId); } //查询角色拥有的系统，参数：roleId if ("1".equals(level)) { list = this.authorityUserManager.getRoleSystemList(roleId); } //查询系统拥有的菜单，参数：roleId，systemId if ("2".equals(level)) { list = this.authorityUserManager.getSystemMenuList(roleId,systemId); } //查询菜单拥有的模块，参数：roleId，systemId，menuId if ("3".equals(level)) { list = this.authorityUserManager.getMenuModuleList(roleId,systemId,menuId); } //查询模块拥有的按钮，参数：roleId，systemId，moduleId if ("4".equals(level)) { list = this.authorityUserManager.getModuleOperList(roleId,systemId,moduleId); } return list; }
实际过程中你需要根据每个节点的属性获取不同的数据。
标签：
原文地址：http://www.cnblogs.com/ywlaker/p/4727736.html
