bootstrap-treeview的使用实例

一、引入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/