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

    多想,多试
  • 相关阅读:
    Win8系统 Python安装
    一些安卓开源框架整理
    Android 媒体键监听以及模拟媒体键盘的实现 demo
    android View 自动 GONE 问题
    Android 定时器TimerTask 简单使用
    关于Android studio 相对 eclipse 优点
    Java序列化与反序列化
    android shape的使用 边框
    Android Studio 修改 包名 package name
    Android WebView Long Press长按保存图片到手机
  • 原文地址:https://www.cnblogs.com/junyi0120/p/5381875.html
Copyright © 2011-2022 走看看