boostrap中的树图--treeview

以下将要介绍下 bootstrap 中treeview 树图的核心代码咯！！

先看下效果图吧：

如上图所见，如果您的前端用的bootstrap，那用treeview 的话 样式就比较统一了。

因为个人局的treeview 其实不是很好的。只不过样式好统一，不然我也不会选他，这玩意方法少，比如你来个异步加载之类的操作，比较麻烦。

因此，用到了它，我觉得最方便的 就是一次性获取他的节点数据，这个要么前台js 使用递归，要么后台使用递归，为了代码 重用性。我选择了后台递归，从数据库检索了数据后，通过递归拼出tree 的每个节点需要的属性，也就是构造节点了。下面贴出一段递归的代码啦，供需要的人参考：

public List<Map<String, Object>> queryDirTree(HttpServletRequest request, HttpServletResponse response, CPcProductFunDir cdt, String orders){
     //从数据库中查找数据 返回集合
     List<PcProductFunDir> ls = productFunPeer.queryDirList(cdt, orders);

     //遍历集合
     for(int i=0; i<ls.size(); i++) {
         //获取每个节点对象
         PcProductFunDir dir = ls.get(i);
         Long parentId = dir.getParentId();
         //判断他们的父节点id是否为空，为空则赋值为0
         if(parentId == null) {
             dir.setParentId(0l);
         }
     }

     //定义分组map  以parentId 分组
     Map<Long, List<PcProductFunDir>> groupMap = BinaryUtils.toObjectGroupMap(ls, "parentId");

     //定义集合用于保存节点
     List<Map<String, Object>> data = new ArrayList<Map<String, Object>>();

     //调用递归方法
     toTreeViewData(groupMap, data, 0l);

     return data;  //返回结果
 }

 /**
  * 递归处理treeview 数据
  * @param groupMap 分组map（按parentId分组）
  * @param childsData 子节点
  * @param parentId 父级id
  */
 private void toTreeViewData(Map<Long, List<PcProductFunDir>> groupMap, List<Map<String, Object>> childsData, Long parentId) {
     //根据父级id从 groupMap中 取出对应的集合
     List<PcProductFunDir> dirChilds = groupMap.get(parentId);

     //判断子级节点集合时候为空
     if(dirChilds==null || dirChilds.size()==0) return ;

     //遍历子级节点集合
     for(int i=0; i<dirChilds.size(); i++) {
         //获取对象
         PcProductFunDir dir = dirChilds.get(i);
         //定义map
         Map<String, Object> map = new HashMap<String, Object>();
         //将treeview 所需属性作为key，与已有对应数据作为value 存入map
         map.put("id", dir.getId());
         map.put("text", "["+dir.getDirCode()+"] " +  dir.getDirName());
         map.put("icon", dir.getIcon());
         map.put("tags", new String[]{String.valueOf(dir.getParentId())});

         //一个节点完成了，存入节点map中
         childsData.add(map);

         //再以当前 取出对象（子级节点）的id 作为父id 从groupMap 中取出对应的集合
         List<PcProductFunDir> ls = groupMap.get(dir.getId());

         //判断 取出的集合是否为空，不为空 则当前子级节点下还有子节点
         if(ls!=null && ls.size()>0) {
             //创建 集合保存子节点
             List<Map<String, Object>> subData = new ArrayList<Map<String, Object>>();

             //递归调用
             toTreeViewData(groupMap, subData, dir.getId());
             //将获取到的 叶子节点 集合放入 当前节点 的 nodes（子节点属性） 中
             map.put("nodes", subData);
         }
     }
 }

ok 啦！！ 当然我给出的只是方法，每个公司 用的框架不一样，这个处理数据的方法通用就行了 

这后台获取数据再递归拼除treeview节点，跟前台那是省了一大堆事呢！我觉得，好了，后台完了，到前台了，简单很多了：

function refreshTreeview() {
    //可以用ajax请求数据
    $.ajax({url:"能获取到后台数据的请求路径",data:{....},success:function(rs) {
        $("#treeview").treeview({
            data: rs,
            levels: 1,
            showIcon: true,
            showBorder: false,
            selectedBackColor:"#d0f0f0",
            selectedColor:"#428bca",
            selectedIcon: "fa fa-stop",
            onNodeSelected:onTreeClick
        });
    }});
}

欧啦！就用ajax获取数据，调用后台的那个方法就好了，至于页面对应id为 treeview 标签，就一个div 就好了，还有被忘记页面要引入相应的css 和js哟

...

<!-- 引入相关css-->
<link href="/js/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<link href="/css/bootstrap-treeview.css" rel="stylesheet">
<!-- 引入相关js -->
<script src="/js/jquery/2.1.1/jquery.min.js"></script>
<script src="/js/bootstrap-treeview.js"></script>

...

<div id="treeview"></div>

...

那么接下来，这个div想怎么放，爱怎么放怎么放吧，嘿嘿^_^....

还有就是js里的 构造treeview的那部分，我给出的样式也比较简单，还有那些 属性就不一一介绍了，去jQuery之家看看就知道了，想要更炫的效果，再加就好。

写完发现，我这不按常理了 ，人家都是从前到后，我是从后往前^o^....看到的童鞋凑合着看吧