这里做者将实现,经过数据库获取数据,再将数据经过递归形式装成无限层级json数据,到达无限成级的树结构。javascript
效果如图
实现步逐前端
一、数据表设计(角色表) java
Sql代码 数据库
- CREATE TABLE `role` (
- `id` varchar(32) NOT NULL,
- `createDate` datetime NOT NULL,
- `modifyDate` datetime NOT NULL,
- `name` varchar(64) NOT NULL,
- `isSystem` bit(1) NOT NULL,
- `description` varchar(256) NOT NULL,
- `fatherId` varchar(32) default '0' COMMENT '父id',
- PRIMARY KEY (`id`)
- ) ENGINE=InnoDB DEFAULT CHARSET=utf8
二、实体类json
Java代码 app
- /**
- * 实体类 - 角色
- */
- public class Role extends BaseEntity {
-
- private static final long serialVersionUID = -6614052029623997372L;
- private String name; //角色名称
- private Boolean isSystem; //是否为系统内置角色
- private String description; //描述
- private List<Admin> adminList; //管理员
- private List<Resource> resourceList; //资源
-
- private String fatherId; //父角色id
- private String fatherName; //父角色名称
-
- private String children; //子角色
- private String checked; //节点是否被选中
-
- public String getName() {
- return name;
- }
-
- public void setName(String name) {
- this.name = name;
- }
-
- public Boolean getIsSystem() {
- return isSystem;
- }
-
- public void setIsSystem(Boolean isSystem) {
- this.isSystem = isSystem;
- }
-
- public String getDescription() {
- return description;
- }
-
- public void setDescription(String description) {
- this.description = description;
- }
-
- public List<Admin> getAdminList() {
- return adminList;
- }
-
- public void setAdminList(List<Admin> adminList) {
- this.adminList = adminList;
- }
-
- public List<Resource> getResourceList() {
- return resourceList;
- }
-
- public void setResourceList(List<Resource> resourceList) {
- this.resourceList = resourceList;
- }
-
- public String getFatherId() {
- return fatherId;
- }
-
- public void setFatherId(String fatherId) {
- this.fatherId = fatherId;
- }
-
- public String getFatherName() {
- return fatherName;
- }
-
- public void setFatherName(String fatherName) {
- this.fatherName = fatherName;
- }
-
- public String getChildren() {
- return children;
- }
-
- public void setChildren(String children) {
- this.children = children;
- }
-
- public String getChecked() {
- return checked;
- }
-
- public void setChecked(String checked) {
- this.checked = checked;
- }
- }
三、将角色封装成无限层级的json数据形式的关键代码,前端js调用方法this
Java代码 spa

- //存放转换后数据的集合
- List<Map<String,Object>> comboTreeList =new ArrayList<Map<String,Object>>();
-
- /**
- * 返回 treeGrid(树形表格)须要的json格式数据
- * 前端调用的就是这个方法
- */
- @SuppressWarnings("unchecked")
- public String backComboTreeTreeRole(){
- //获得全部角色
- List<Role> list = roleService.getRoleAll();
-
- //调用方法实现角色树
- createComboTreeTree(list,"0");
-
- //将集合转换为json输出到页面
- Gson gson = new Gson();
- String json = gson.toJson(comboTreeList);
-
- try {
- ServletActionContext.getResponse().getWriter().print(json);
- ServletActionContext.getResponse().getWriter().flush();
- ServletActionContext.getResponse().getWriter().close();
- }catch (IOException e) {
- e.printStackTrace();
- }
-
- System.out.println(json);
- return null;
- }
-
-
- /**
- * 将角色封装成树开始
- * @param list
- * @param fid 父id
- */
- private void createComboTreeTree(List<Role> list, String fid) {
- for (int i = 0; i < list.size(); i++) {
- Map<String, Object> map = null;
- Role role = (Role) list.get(i);
- if (role.getFatherId().equals("0")) {
- map = new HashMap<String, Object>();
- //这里必需要将对象角色的id、name转换成ComboTree在页面的显示形式id、text
- //ComboTree,不是数据表格,没有在页面经过columns转换数据的属性
- map.put("id", list.get(i).getId()); //id
- map.put("text",list.get(i).getName()); //角色名
- map.put("children", createComboTreeChildren(list, role.getId()));
- }
- if (map != null)
- comboTreeList.add(map);
- }
- }
-
-
- /**
- * 递归设置role树
- * @param list
- * @param fid
- * @return
- */
- private List<Map<String, Object>> createComboTreeChildren(List<Role> list, String fid) {
- List<Map<String, Object>> childList = new ArrayList<Map<String, Object>>();
- for (int j = 0; j < list.size(); j++) {
- Map<String, Object> map = null;
- Role treeChild = (Role) list.get(j);
- if (treeChild.getFatherId().equals(fid)) {
- map = new HashMap<String, Object>();
- //这里必需要将对象角色的id、name转换成ComboTree在页面的显示形式id、text
- //ComboTree,不是数据表格,没有在页面经过columns转换数据的属性
- map.put("id", list.get(j).getId());
- map.put("text", list.get(j).getName());
- map.put("children", createComboTreeChildren(list, treeChild.getId()));
- }
-
- if (map != null)
- childList.add(map);
- }
- return childList;
- }
-
- 参考博客
http://x125858805.iteye.com/blog/2229087.net