bootstrap-treeview怎么實(shí)現(xiàn)多級(jí)樹(shù)形菜單=

小編給大家分享一下bootstrap-treeview怎么實(shí)現(xiàn)多級(jí)樹(shù)形菜單=，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

樹(shù)形列表菜單的數(shù)據(jù)組織形式一般有兩種：一種是一次性向服務(wù)器請(qǐng)求所有節(jié)點(diǎn)的數(shù)據(jù)，一種是先請(qǐng)求根目錄的節(jié)點(diǎn)，當(dāng)用戶點(diǎn)擊該節(jié)點(diǎn)時(shí)，再去請(qǐng)求該節(jié)點(diǎn)的子葉節(jié)點(diǎn)的數(shù)據(jù)。這里我們的需求是第一種。

樹(shù)形菜單是我們經(jīng)常會(huì)用到的一種菜單展現(xiàn)方式，這里我推薦bootstrap-treeview，它是一款效果非?？岬幕赽ootstrap的jQuery多級(jí)列表樹(shù)插件。該jQuery插件基于Twitter Bootstrap，以簡(jiǎn)單和優(yōu)雅的方式來(lái)顯示一些繼承樹(shù)結(jié)構(gòu)，如視圖樹(shù)、列表樹(shù)等。

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

使用方法

首先要在頁(yè)面中引入依賴的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元素來(lái)作為該列表樹(shù)的容器：

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

調(diào)用

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

數(shù)據(jù)源要求的數(shù)據(jù)格式：

 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']
  }
  ];

看到這個(gè)數(shù)據(jù)結(jié)構(gòu)，我們首先想到的是數(shù)據(jù)結(jié)構(gòu)中的二叉樹(shù)。歐拉，我們不妨可以把它理解成，這樣的數(shù)據(jù)結(jié)構(gòu)：

創(chuàng)建一個(gè)實(shí)例，組織所需要的數(shù)據(jù)結(jié)構(gòu)的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;
 
 //子葉節(jié)點(diǎn)
 private List<BootstrapUiTreeNode> nodes = new ArrayList<>();
 
 //統(tǒng)計(jì)該節(jié)點(diǎn)分類下文檔的數(shù)量
 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;
 }
 
 
 
 /**
 * 加載第一層樹(shù)節(jié)點(diǎn) 父節(jié)點(diǎn)的根目錄的父id必須為"NONE",包含字段名ID,PARENTID,NAME
 * 
 * @param parentId
 *  父親節(jié)點(diǎn)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();
 //利用反射獲取對(duì)象集合
 return result.getObjectList(TypeBrief.class);
 } catch (SQLException e) {
 log.error(e.toString());
 return new ArrayList<TypeBrief>();
 }
 }
 
 
 
 /**
 * 遍歷集合獲得對(duì)象
 * 
 * @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());
 //統(tǒng)計(jì)該節(jié)點(diǎn)下分類的文檔數(shù)
 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;
 }
 
 /**
 * 先用遞歸構(gòu)造除第一層幾個(gè)根節(jié)點(diǎn)外的類多叉樹(shù)結(jié)構(gòu)
 * @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) {
 
 //獲取該根節(jié)點(diǎn)下的所有子節(jié)點(diǎn)
 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) {
 //遞歸繼續(xù)查詢
 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;
 }
 
 /**
 * 補(bǔ)上第一層的幾個(gè)根節(jié)點(diǎn)
 * @param parentId
 * @param sortTitle
 * @param tableTitle
 * @param id_title
 * @param parentId_title
 * @param name_title
 * @return
 * 
 * 注意：所以會(huì)存在葉子節(jié)點(diǎn)中的nodes沒(méi)有數(shù)據(jù)的情況，這個(gè)時(shí)候會(huì)出現(xiàn)葉子節(jié)點(diǎn)是可以伸縮的，
 * 因?yàn)閚odes屬性就是一個(gè)對(duì)象數(shù)組，它會(huì)被認(rèn)為它還有子節(jié)點(diǎn)，其實(shí)是沒(méi)有的。
 * 
 */
 public static List<BootstrapUiTreeNode> createTreeNodes(String parentId, String sortTitle, String tableTitle, String id_title,
 String parentId_title, String name_title) {
 //統(tǒng)計(jì)所有節(jié)點(diǎn)分類對(duì)應(yīng)的文檔數(shù)目
 List<TypeBrief> typeBriefs = getPopTypesForReadDoc();
 
 List<BootstrapUiTreeNode> nodes = new ArrayList<>();
 //查詢第一層根節(jié)點(diǎn)
 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();
 }
 }

訪問(wèn)結(jié)果：

最終樹(shù)形菜單效果：

看完了這篇文章，相信你對(duì)“bootstrap-treeview怎么實(shí)現(xiàn)多級(jí)樹(shù)形菜單=”有了一定的了解，如果想了解更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！