關於java 展示樹形菜單Tree的一些備忘資訊。[bootstrap tree]

標籤：

最近在項目中，需要迭代，顯示樹形菜單，這裡我們使用的是bootstracp,所以使用的是bootstracp多級列表樹,

使用的時候，非常簡單，只需

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

按照 執行個體，就可以在頁面展示出tree了。

******************我要說的當然不是這個***************************************************

這裡，我想說的是，背景一些技巧。

資料庫中，在我們考慮tree的時候，一般都是ID,和parentID。

以 分類樹 為例， 直接上代碼：

<select id="loadChild" resultMap="categoryResult">    select * FROM P_CATEGORY WHERE  PARENTID = #id#</select>

/**     * 將類別轉換為json資料對象;     * 這裡可以直接返回,SpringMVC支援返回json資料;     * 這裡使用BTree 和Gson，簡化返回的參數.     */    @Override    public String dealListToJson(Category cg) {        cg = childNode( cg);        BTree bt = new BTree();        bt =    covertToTree(bt,cg);        Gson gson =new Gson();        return gson.toJson(bt);    }/**     * 迭代擷取每一級的 子節點，填充完整;     * @param cg     * @return     */    private Category childNode(Category cg) {        cg = listChildNode(cg);        if (cg.getCategoryList().size() > 0) {            for (Category cgTemp : cg.getCategoryList()) {                childNode(cgTemp);            }        }        return cg;    }private BTree covertToTree(BTree bt,Category cg ){        bt.setText(cg.getName());        bt.setId(cg.getId());        List<BTree> btList = new ArrayList<BTree>();        if (cg.getCategoryList().size() > 0) {            for(Category cgTemp : cg.getCategoryList()){                BTree btTemp = new  BTree();                btTemp=covertToTree(btTemp,cgTemp);                btList.add(btTemp);            }        }        bt.setNodes(btList);        return bt;    }/**     * 擷取當前類別的下一級 子節點,【只是擷取下一級】     * @param cg     * @return     */    public Category listChildNode(Category cg) {        cg.setCategoryList(getSqlMapClientTemplate().queryForList("Category.loadChild",cg));        return cg;    }

迭代的時候，每次都去請求 資料庫了，這裡可以用緩衝。。暫時沒還添加。[其實是我們的節點不多]

這裡使用Gson轉換List，其實和其他的一樣,

使用自訂的BTree，這個可以減少一些不必要的屬性加到Tree 的 JSON字串中。

。。

最終返回的資料格式：

{"text":"圖書分類","id":1,"nodes":[{"text":"紡織專業圖書","id":9,"nodes":[{"text":"紡織手工圖書","id":11,"nodes":[]},{"text":"紡織加工圖書","id":12,"nodes":[]}]},{"text":"紡織機械圖書","id":10,"nodes":[]}]}

就是這樣了，

有一點：

    var tree = [${gsonCol}];        $(function(){        //初始化樹         $(‘#tree‘).treeview({                data: tree        });       //節點被選中            $(‘#tree‘).on(‘nodeSelected‘, function(event, data) {            $("#hidClo_parent").val(data.id);       });                $(‘#tree_main‘).treeview({            data: tree        });

在初始化的時候，var tree=[${gsonCol}],這裡要使用[],不然顯示不出樹來。

 

關於java 展示樹形菜單Tree的一些備忘資訊。[bootstrap tree]