标签:
以下将要介绍下 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^....看到的童鞋凑合着看吧
标签:
原文地址:http://www.cnblogs.com/tongbk/p/5703758.html