Bootstrap Tree View 是一个简单而优雅的Bootstrap树形视图解决方案。
可以访问作者的 GitHub页面 了解其用法及更多信息。
https://github.com/jonmiles/bootstrap-treeview
效果图
//新建一个实体类
public class NewTree implements java.io.Serializable {
private String id;
private String text;
private List<NewTree> nodes = new ArrayList<NewTree>();
//下面是getset方法...
//JSONArray.fromObject()引用的包为net.sf.json.JSONArray;
@Controller
public class TestController{
@Resource(name="demoService")
private IDemoService demoService;
/**
* 递归获取整棵树的json
*/
@ResponseBody
@RequestMapping(value="/testTree.do",produces={"application/json;charset=utf8"})
public String testCateTree() throws Exception {
List<NewTree> cateList = new ArrayList<NewTree>();
List<NewTree> demos = demoService.getInfosByParentId("0");
//构建 Data Structure json对象
JSONArray jsonArray = JSONArray.fromObject(demos);
String jsonString = jsonArray.toString().replace(",\"nodes\":[]", "");
return jsonString;
}
}
/**
* 递归获取整棵树的json
* @param string
* @return
*/
@Override
public List<NewTree> getInfosByParentId(String pid) {
//最顶层parentI
//st第一次数据库拿到最顶层的数据,根据顶层parentID获取下面的数据
//allST数据库获取所有的数据对象
List<NewTree> topCateList = new ArrayList<NewTree>();
NewTree twoCate = new NewTree("0","最顶层的标题",new ArrayList<NewTree>());
twoCate.setNodes(recursion(pid,st,allST));
topCateList.add(twoCate);
return topCateList;
}
public List<NewTree> recursion(String pid,List<数据库对象> st1,List<数据库对象> allST) {
List<NewTree> cateList = new ArrayList<NewTree>();
OUTTER:for(数据库对象 st : st1){
INNER:for(int i = 0;i< allST.size();i++){
if(st.getId().equals(allST.get(i).getParentId())){
NewTree cate = new NewTree(st.getId(),st.getName(),new ArrayList<NewTree>());
List<NewTree> twoCateList = recursion(null,getInfos(st.getId()),allST);
cate.setNodes(twoCateList);
cateList.add(cate);
break INNER;
}else if((i+1)==allST.size()){
NewTree cate = new NewTree(st.getId(),st.getName());
cateList.add(cate);
}
}
}
return cateList;
}
下面是前端代码
//刷新模块树
var referchModule = function () {
//发送异步请求加载所有的模块信息
$.ajax({
type:"post",
dataType:"json",
url:getRootPath_web()+"/testTree.do",//getRootPath_web()获取根目录地址的方法,另一篇博客里面有
success:function(defaultData){
// defaultData = JSON.parse(defaultData);
$('#tree').treeview({
data: defaultData,//数据源参数
color: "#428bca",
showBorder: false,
// levels:2,
onNodeSelected: function(event, node) {
alert(node.id+"前面是id,后面是名字"+node.text);//这里拿到id和name,就可以通过函数跳转触发点击事件
},
onNodeUnselected: function (event, node) {
}
});
},error:function(){
alert("加载树异常!");
}
})
}
html代码
<div id="tree"></div>
如果该文章中有哪些不足或者改进,希望您能留下评论告知一声。