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;@Controllerpublic 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>

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