作为一个jQuery小白,还是不太熟悉使用bootstarp这种控件,遇见问题就方。项目需要展示树形列表,后台接口倒是会写,到前台用jquery的时候就很懵,jQuery.treeview和bootstarp.treeview都不知道怎么用。这个功能最后还是交给前端同事做了,痛定思痛,我要自己解决一遍。
我一开始尝试的时候有很多问题:
1.不知道该用jquery.treeview还是bootstrap.treeview,两个都不会用;
2.不知道两个空间都需要依赖什么js文件,这个问题最严重,因为代码里.treeview()一直报错,工作进行不下去
3.不知道控件需要接收的数据是怎样的,json数组?嵌套Json对象?还是特殊的形式,不知道数据格式也就没法写接口啦
首先问题1,前端同事选择了bootstrap.treeview控件,所以我也就先从bootstrap.treeview开始。
然后问题2,在引入bootstrap-treeview.js之前需要先引入jquery-3.0.0.js和bootstrap.min.js,以及css文件bootstrap.min.css,这个css我用的是线上版本,因为我发现我本地没有图标文件,显示的tree没有图标。
最后问题3,确定了控件,很容易就能找到控件所需的数据格式,bootstrap.treeview格式如下,可以看出是嵌套的json对象,同时,text属性表示节点名称,nodes属性表示子节点数组,因此可以确定,后端接口可以采用递归的方式获取treedata数据
var tree = [
{
text: "Parent 1",
nodes: [
{
text: "Child 1",
nodes: [
{
text: "Grandchild 1"
},
{
text: "Grandchild 2"
}
]
},
{
text: "Child 2"
}
]
},
{
text: "Parent 2"
},
{
text: "Parent 3"
},
{
text: "Parent 4"
},
{
text: "Parent 5"
}
];
我在自己的demo项目里尝试了bootstrap-treeview,后台写了个假接口,一次性返回所有demo数据,代码如下
ServiceImpl方法
public List<Node> getNodeList() {
List<Node> result = new ArrayList<Node>();
for(int i=0;i<10;i++){
Node node = new Node();
node.setId(i+1);
node.setText("Node"+(i+1));
List<Node> nodes = new ArrayList<Node>();
for(int j=0;j<5;j++){
Node child = new Node();
child.setId(11+j);
child.setText("child"+(11+j));
nodes.add(child);
}
node.setNodes(nodes);
result.add(node);
}
return result;
}
Controller方法
@RequestMapping(value="/treeView.do",method = RequestMethod.GET)
@ResponseBody
public String tree(HttpServletRequest request,HttpServletResponse response){
List<Node> list = service.getNodeList();
return JSON.toJSONString(list);
}
返回的数据
[{
"id": 1,
"nodes": [{
"id": 11,
"text": "child11"
}, {
"id": 12,
"text": "child12"
}],
"text": "Node1"
}, {
"id": 2,
"nodes": [{
"id": 11,
"text": "child11"
}, {
"id": 12,
"text": "child12"
}],
"text": "Node2"
}, {
"id": 3,
"nodes": [{
"id": 11,
"text": "child11"
}, {
"id": 12,
"text": "child12"
}],
"text": "Node3"
}, {
"id": 4,
"nodes": [{
"id": 11,
"text": "child11"
}, {
"id": 12,
"text": "child12"
}],
"text": "Node4"
}]
前台采用ajax加载数据,treeview构建树
<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>TreeView</title>
<link href="http://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> <!--加载线上css,确保图标可访问-->
<script src="../static/js/jquery-3.0.0.js"></script>
<script src="../static/js/bootstrap.min.js"></script>
<script src="../static/js/bootstrap-treeview.js"></script>
</head>
<script>
var treedata="";
$(function(){
getData(); //非异步加载treedata
buildTree(); //调用包装器treeview构建树
});
var getData = function () {
$.ajax({
url:"/tree/treeView.do", //获取数据
async:false, //非异步加载,加载数据后执行buildTree
success : function(data) {
treedata=data;
console.log(data);
}
});
}
var buildTree=function(){
$("#tree").treeview({
data:treedata,
levels:5,
showCheckbox:true, //是否显示复选框
icon: "glyphicon glyphicon-stop",
selectedIcon: "glyphicon glyphicon-stop"
});
}
</script>
<body>
<div id="tree"></div>
</body>
</html>
最终结果,加号可以展开,减号可以折叠,方块可以勾选。
至此bootstrap-treeview显示栏目树就完事儿了。其实实现过程不是很难,也不用修改源码,对于我来说,难就难在不了解控件的使用方法,一开始就是懵的,导致不知道该往哪个方向继续,唉呀,修炼的路还是很长滴,jquery已经超出了我的认知,得再多花点精力才行。
下一步尝试用jquery.treeview解决这个问题。