Bootstrap TreeView Demo
这是一个bootstrap treeview的demo
本项目通过springboot整合bootstrap实现从前台通过ajax向后台发送请求,后台通过通过字符拼接返回json数组给前台,前台再通过字符拼接结合TreeView实现树形控件的显示。
1.TreeView实现单点收起展示的小技巧
这个就直接给链接了原作者写的很好
给bootstrap-treeview增加点击事件,单击菜单也能展开和折叠
https://blog.csdn.net/zsg88/article/details/50805800
给点小提示:
在修改完bootstrap-treeview.js的源码之后第二部实现的onClick方法要在自己需要使用树形控件的html网页中通过script的方式添加
例如:
<script type="text/javascript">
function itemOnclick(target){
//找到当前节点id
var nodeid = $(target).attr('data-nodeid');
var tree = $('#tree');
//获取当前节点对象
var node = tree.treeview('getNode', nodeid);
if(node.state.expanded){
//处于展开状态则折叠
tree.treeview('collapseNode', node.nodeId);
} else {
//展开
tree.treeview('expandNode', node.nodeId);
}
}
</script>
2.搭建环境导入html需要的css以及js
<!-- Required Stylesheets -->
<link href="css/bootstrap.css" rel="stylesheet" />
<link href="css/bootstrap-treeview.css" rel="stylesheet" />
<!-- Required Javascript -->
<script src="js/jquery-3.4.1.js"></script>
<script src="js/bootstrap-treeview.js"></script>
<script src="js/bootstrap.min.js"></script>
3.编写ajax向后台发送请求获取数据(拼接的字符串
function getTreeJson(){
$.ajax({
type: "GET",
url: "/getData",
data: null,
dataType: "text",
success: function(data){
var dt = [{
text: '标题',
nodes: eval('[' + data +']')
}]
$('#tree').treeview({
data: dt
})
},
error: function(XMLHttpRequest){
alert(XMLHttpRequest.status);
}
});
}
同时在html页面中添加id为tree的div
<div class="container">
<div class="row" >
<div class="col-sm-6 col-md-offset-3" id="tree"></div>
<!-- <div class="col-sm-6" id="aa"></div> -->
</div>
</div>
4.后台实现
通过RESTful风格的请求返回所有对应的的html网页,以及获取数据
package com.wzb.treeviewdemo.controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
/**
* @author Satsuki
* @time 2019/9/3 21:07
* @description:
*/
@Controller
public class TestController {
@RequestMapping("/{page}")
public String showPage(@PathVariable String page){
return page;
}
@RequestMapping("/getData")
@ResponseBody
public String getData(){
String res = getDataString();
System.out.println(res);
return res;
}
public String getDataString(){
StringBuilder nodesData = new StringBuilder("");
//后续需要参考android端的取数据的实现
//这里先简易的通过自己的手写拼字段返回
nodesData.append("{text: 'Parent 1',nodes: [{text: 'Child1',nodes: [{text: 'Grandchild1'},{text: 'Grandchild2'}]},{text: 'Child2'}]}," +
"{text: 'Parent 2'}," +
"{text: 'Parent 3'}," +
"{text: 'Parent 4'}," +
"{text: 'Parent 5'}"
);
return nodesData.toString();
}
}
5.源码
github页面:
https://github.com/luoziling/treeviewdemo
欢迎大家star fork