Bootstrap Tree View从前端到后台的例子

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>

如果该文章中有哪些不足或者改进，希望您能留下评论告知一声。