zoukankan      html  css  js  c++  java
  • 关于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}],这里要使用[],不然显示不出树来。

    多想,多试
  • 相关阅读:
    集合类说明及区别
    Liferay
    ASP项目部署IIS7.5中遇到的问题
    IBM X3650 M3/M4的服务器装系统
    在table中tr的display:block在firefox下显示布局错乱问题
    Firefox table 不居中解决办法 解决火狐层或 table 不居中
    Java进阶: File类的特点?如何创建File类对象?Java中如何操作文件内容,什么是Io流Io流如何读取和写入文件?字节缓冲流使用原则?
    计算机期末考试高频考试题目,附带题目解析
    java基础使用的集合大总结
    TreeMap集合根据指定元素,进行删除和修改bug梳理
  • 原文地址:https://www.cnblogs.com/junyi0120/p/5381875.html
Copyright © 2011-2022 走看看