bootstrap-treeview的使用实例

一、引入css和js

二、后台数据的拼接（使用递归函数）

/**
     * 获取tree的数据
     * @return
     */
    @RequestMapping("/getSysOrganizeIdJSON")
    @ResponseBody
    public String getSysOrganizeIdJSON(){
        String StrJSON = getSysOrganizeByParentIdJSON("00000000000000000000000000000001");
        StrJSON=StrJSON.substring(0, StrJSON.length()-1);
        return StrJSON;
    }
    
    /**
     * 机构的JSON拼接
     * @param id
     * @return
     */
    private String getSysOrganizeByParentIdJSON(String id){
        String sonNodes="";
        List list = sysOrganizeService.getSysOrganizeByParentId(id);
        for(SysOrganize sysOrganize : list){
            sonNodes+="{ text: '"+sysOrganize.getOrgName()+"', id: '"+sysOrganize.getOrgId()+"'";
            if(!getSysOrganizeByParentIdJSON(sysOrganize.getOrgId()).isEmpty()){
                
                sonNodes+= ", nodes: ["+getSysOrganizeByParentIdJSON(sysOrganize.getOrgId())+"] ";
                        
            }
            sonNodes+= "},";
        }
        return sonNodes;
    }

三、jsp界面的代码

四、js的函数代码

function getTreeJSON(){
        
    
     $.ajax({
         type: "GET",
         url: "/getSysOrganizeIdJSON.do",
         data: null,
         dataType: "text",
         success: function(data){
             var dt = [{
                 text: '标题',
                 nodes: eval('['+data+']')
             }]
                 
             $('#tree').treeview({
                    data: dt,      
                    expand: false,
                    onNodeSelected: function(event, data) {
                        alert(data['id']);//获取选中node的id
                      }

                });
         
         },
         error: function(XMLHttpRequest, textStatus, errorThrown) {
             alert(XMLHttpRequest.status);
             alert(XMLHttpRequest.readyState);
             alert(textStatus);
               }
     });
    }
    getTreeJSON();

五、补充

参考文档 http://www.bootcdn.cn/bootstrap-treeview/readme/