关于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}],这里要使用[],不然显示不出树来。

多想,多试
原文地址:https://www.cnblogs.com/junyi0120/p/5381875.html