码迷,mamicode.com
首页 > 其他好文 > 详细

boostrap中的树图--treeview

时间:2016-07-25 16:21:14      阅读:722      评论:0      收藏:0      [点我收藏+]

标签:

以下将要介绍下 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^....看到的童鞋凑合着看吧

boostrap中的树图--treeview

标签:

原文地址:http://www.cnblogs.com/tongbk/p/5703758.html

(1)
(1)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!