這裏做者將實現,經過數據庫獲取數據,再將數據經過遞歸形式裝成無限層級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