bootstrap-treeview實現多級樹形菜單后臺JSON格式如何組織?

2019-11-19 11:07:46

字體：大中小

來源：轉載

供稿：網友

樹形列表菜單的數據組織形式一般有兩種：一種是一次性向服務器請求所有節點的數據，一種是先請求根目錄的節點，當用戶點擊該節點時，再去請求該節點的子葉節點的數據。這里我們的需求是第一種。

樹形菜單是我們經常會用到的一種菜單展現方式，這里我推薦bootstrap-treeview，它是一款效果非常酷的基于bootstrap的jQuery多級列表樹插件。該jQuery插件基于Twitter Bootstrap，以簡單和優雅的方式來顯示一些繼承樹結構，如視圖樹、列表樹等。

前端頁面的編寫，比較簡單，故簡略描述，我們著重將后端如何按照要求組織返回所需的Json。

使用方法

首先要在頁面中引入依賴的css樣式和 bootstrap-treeview.js文件。

<!-- Required Stylesheets --><link href="./css/bootstrap.css" rel="external nofollow" rel="stylesheet"> <!-- Required Javascript --><script src="./js/jquery.js"></script><script src="./js/bootstrap-treeview.js"></script>

可以使用任何HTML DOM元素來作為該列表樹的容器：

<div id="tree"></div>

調用

<script type="text/javascript"> $(function() {$.ajax({  type: "Get",  url: "doctype/FarmDoctypeLoadTreeNodes.do",  data: {id: ""},  dataType: "json",  success: function (result) {  $("#tree").treeview({  data: result.nodes,  // 數據源  levels:1, //設置繼承樹默認展開的級別  showTags: true, //是否在每個節點右邊顯示tags標簽。tag值必須在每個列表樹的data結構中給出  onNodeSelected: function (event, data) {   /* console.log(data); */   /* alert(data.nodeId); */   window.location = basePath + "webtype/view" + data.id + "/Pub1.html";   }   });   },  error: function () {  alert("加載失??！")  } });   });</script>

數據源要求的數據格式：

 var tree = [  {  text: "Parent 1",  tags: ['2'],  nodes: [   {   text: "Child 1",   tags: ['3'],   nodes: [   {   text: "Grandchild 1",   tags: ['1']   },   {   text: "Grandchild 2",   tags: ['1']   }   ]   },   {   text: "Child 2",   tags: ['1']   }  ]  },  {  text: "Parent 2",   tags: ['1']  },  {  text: "Parent 3",   tags: ['1']  },  {  text: "Parent 4",   tags: ['1']  },  {  text: "Parent 5",   tags: ['1']  }  ];

看到這個數據結構，我們首先想到的是數據結構中的二叉樹。歐拉，我們不妨可以把它理解成，這樣的數據結構：

創建一個實例，組織所需要的數據結構的json.

public class BootstrapUiTreeNode implements Serializable { private static final long serialVersionUID = 1L; static final Logger log = Logger.getLogger(BootstrapUiTreeNode.class);  private String id; private String parentId; private String text;  //子葉節點 private List<BootstrapUiTreeNode> nodes = new ArrayList<>();  //統計該節點分類下文檔的數量 private List<String> tags = new ArrayList<>(); // tags: ['NUM']  public BootstrapUiTreeNode(String id, String parentId, String text) { super(); this.id = id; this.parentId = parentId; this.text = text; }   public BootstrapUiTreeNode(String id, String parentId, String text, List<BootstrapUiTreeNode> nodes) { super(); this.id = id; this.parentId = parentId; this.text = text; this.nodes = nodes; }   public String getParentId() { return parentId; }   public void setParentId(String parentId) { this.parentId = parentId; }   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 List<BootstrapUiTreeNode> getNodes() { return nodes; }  public void setNodes(List<BootstrapUiTreeNode> nodes) { this.nodes = nodes; }   public List<String> getTags() { return tags; }   public void setTags(List<String> tags) { this.tags = tags; }    /** * 加載第一層樹節點 父節點的根目錄的父id必須為"NONE",包含字段名ID,PARENTID,NAME *  * @param parentId *  父親節點id * @param SortTitle *  排序字段index * @param tableTitle *  表名index * @param id_title *  表id的index * @param parentId_title *  表parentid的index * @param name_title *  表name的index * @param icon_title */ public static List<Map<String, Object>> queryTreeNodeOne(String parentId, String SortTitle, String tableTitle, String id_title, String parentId_title, String name_title) { if (StringUtils.isEmpty(parentId)) { parentId = "NONE"; } DataResult nodeResult = null; DBSort sort = new DBSort("a." + SortTitle, "ASC"); DataQuery query = DataQuery.getInstance("1",  id_title + "," + parentId_title + " as " + parentId_title + "," + name_title + " as " + name_title, tableTitle + " a"); query.setPagesize(100); query.addSort(sort); DataQuerys.wipeVirus(parentId); query.setSqlRule("and " + parentId_title + "='" + parentId + "'"); try { nodeResult = query.search(); } catch (SQLException e) { log.error(e.getMessage()); } return nodeResult.getResultList(); }  public static List<TypeBrief> getPopTypesForReadDoc() { DataQuery query = DataQuery.init(new DataQuery(), "(SELECT a.NAME as NAME,a.SORT as SORT, a.ID as ID, a.READPOP as READPOP,a.WRITEPOP AS WRITEPOP, a.AUDITPOP AS AUDITPOP, a.PARENTID AS PARENTID, (SELECT COUNT(B1.ID) FROM FARM_DOC B1 LEFT JOIN FARM_RF_DOCTYPE B2 ON B1.ID = B2.DOCID LEFT JOIN FARM_DOCTYPE B3 ON B3.ID = B2.TYPEID WHERE B1.STATE='1' and B3.TREECODE LIKE CONCAT(A.TREECODE,'%') AND B1.STATE='1') AS NUM,f.oid as OID,f.FUNTYPE as FUNTYPE FROM farm_doctype AS a left join FARM_DOCTYPE_POP as f on f.TYPEID=a.ID WHERE 1 = 1 AND (TYPE = '1' OR TYPE = '3') AND PSTATE = '1' ) AS e", "NAME,ID,PARENTID,NUM,OID,READPOP,AUDITPOP,WRITEPOP,FUNTYPE,SORT"); query.setPagesize(1000); query.setNoCount(); query.setCache(Integer.valueOf(0), CACHE_UNIT.second); query.addSort(new DBSort("SORT", "ASC")); try { DataResult result = query.search(); //利用反射獲取對象集合 return result.getObjectList(TypeBrief.class); } catch (SQLException e) { log.error(e.toString()); return new ArrayList<TypeBrief>(); } }    /** * 遍歷集合獲得對象 *  * @param nodeList * @return */ public static List<BootstrapUiTreeNode> findNode(List<TypeBrief> typeBriefs, List<Map<String, Object>> data, String id_title, String parentId_title, String name_title) { List<BootstrapUiTreeNode> nodeList = new ArrayList<>(); try { for (Map<String, Object> node : data) { if (node.get(id_title) == null) { continue; } BootstrapUiTreeNode item = new BootstrapUiTreeNode(node.get(id_title).toString(),  node.get(parentId_title).toString(), node.get(name_title).toString()); //統計該節點下分類的文檔數 for(TypeBrief typeBrief : typeBriefs) { if(typeBrief.getId().equals(node.get(id_title).toString())) { item.getTags().add(typeBrief.getNum() + ""); break; } } nodeList.add(item); } } catch (Exception e) { throw new RuntimeException(e); } return nodeList; }  /** * 先用遞歸構造除第一層幾個根節點外的類多叉樹結構 * @param node * @param parentId * @param sortTitle * @param tableTitle * @param id_title * @param parentId_title * @param name_title * @return */ public static BootstrapUiTreeNode createSubtreeTreeNodes(List<TypeBrief> typeBriefs, BootstrapUiTreeNode node, String parentId, String sortTitle, String tableTitle, String id_title, String parentId_title, String name_title) {  //獲取該根節點下的所有子節點 List<Map<String, Object>> data = queryTreeNodeOne(parentId, sortTitle, tableTitle, id_title, parentId_title, name_title); List<BootstrapUiTreeNode> roots = findNode(typeBriefs, data, id_title, parentId_title, name_title);  if(null != roots && roots.size() > 0) { //遞歸繼續查詢 for(BootstrapUiTreeNode child : roots) { BootstrapUiTreeNode treeNode = createSubtreeTreeNodes(typeBriefs, child, child.getId(), sortTitle, tableTitle, id_title, parentId_title, name_title); node.getNodes().add(treeNode); }  } else { node.setNodes(null);  }  return node; }  /** * 補上第一層的幾個根節點 * @param parentId * @param sortTitle * @param tableTitle * @param id_title * @param parentId_title * @param name_title * @return *  * 注意：所以會存在葉子節點中的nodes沒有數據的情況，這個時候會出現葉子節點是可以伸縮的， * 因為nodes屬性就是一個對象數組，它會被認為它還有子節點，其實是沒有的。 *  */ public static List<BootstrapUiTreeNode> createTreeNodes(String parentId, String sortTitle, String tableTitle, String id_title, String parentId_title, String name_title) { //統計所有節點分類對應的文檔數目 List<TypeBrief> typeBriefs = getPopTypesForReadDoc();  List<BootstrapUiTreeNode> nodes = new ArrayList<>(); //查詢第一層根節點 List<Map<String, Object>> data = queryTreeNodeOne(parentId, sortTitle, tableTitle, id_title, parentId_title, name_title); List<BootstrapUiTreeNode> treeNodes = findNode(typeBriefs, data, id_title, parentId_title, name_title);  for(BootstrapUiTreeNode node : treeNodes) { BootstrapUiTreeNode treeNode = createSubtreeTreeNodes(typeBriefs, node, node.getId(), sortTitle, tableTitle, id_title, parentId_title, name_title); nodes.add(treeNode); }  return nodes; }}

控制器：

@RequestMapping("/FarmDoctypeLoadTreeNodes") @ResponseBody public Map<String, Object> loadTreeNodes(DataQuery query, HttpServletRequest request, String id) { query = EasyUiUtils.formatGridQuery(request, query); try { List<BootstrapUiTreeNode> treeNodes = BootstrapUiTreeNode.createTreeNodes(id, "SORT", "FARM_DOCTYPE", "ID", "PARENTID", "NAME"); return ViewMode.getInstance().putAttr("nodes", treeNodes).returnObjMode(); } catch (Exception e) { log.error(e.getMessage()); return ViewMode.getInstance().setError(e.getMessage()).returnObjMode(); } }

訪問結果：