boostrap中的树图--treeview

liuian 2024-12-11 15:45 216 浏览

以下将要介绍下 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 就好了

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

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

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

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

bootstrap label