1. 程式人生 > >bootstrap-treeview的使用例項使用遞迴後臺拼接Json串

bootstrap-treeview的使用例項使用遞迴後臺拼接Json串

一、引入css和js

<link rel="stylesheet" href="${ctxStatic }/common/css/plugins/treeview/bootstrap-treeview.css">

<script src="${ctxStatic}/common/js/plugins/treeview/bootstrap-treeview.js"></script>

二、後臺資料的拼接(使用遞迴函式)

/**
     * 獲取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<SysOrganize> 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介面的程式碼

<div id="tree"></div>

四、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/