bootstrap-treeview分級展示列表樹的實現

html頁面：

　　要引用

"/webapp/common/css/bootstrap-treeview.css"

"/webapp/common/js/bootstrap-treeview.js",

<div class="row">
   <div class="col-md-3" style="width: 350px;">
      <!--<div class="btn-group" role="group" >-->
         <!--<button type="button" class="btn btn-default" onclick="dosome(1)">全選</button>-->
         <!--<button type="button" class="btn btn-default" onclick="dosome(2)">反選</button>-->
         <!--<button type="button" class="btn btn-default" onclick="dosome(4)">展開</button>-->
         <!--<button type="button" class="btn btn-default" onclick="dosome(3)">折疊</button>-->
         <!--<button type="button" class="btn btn-default" onclick="getDisabled()">取值</button>-->
      <!--</div>-->
      <!--<input  type="button" onclick="getDisabled()" value="選中項的個數"/></br></br>-->
      <!--<label>選中父級，子級默認選中</label></br></br>-->
      <div id="treeview1"></div>
   </div>
   <!--<div style="display: none;" id="treeviewVal">-->
      <!--&lt;!&ndash;[{"id":1,"text":"城市管理","level":0,"tag":0,"nodes":[{"id":1001,"text":"北京","level":0,"tag":0,"href":"account!editAccount.html"},{"id":1003,"text":"條件","level":0,"tag":0,"href":"system!listGroup.html"},{"id":1002,"text":"黃河入海流","level":0,"tag":0,"href":"account!list.html"},{"id":1004,"text":"欲窮千里目","level":0,"tag":0,"href":"account!chgPasswd.html"},{"id":1005,"text":"辦事處管理","level":0,"tag":0,"href":"td!officeList.html"},{"id":1006,"text":"工作組管理","level":0,"tag":0,"href":"group!list.html"},{"id":1007,"text":"工作區管理","level":0,"tag":0,"href":"workSpace!list.html"},{"id":1008,"text":"業務員管理","level":0,"tag":0,"href":"marketingaAccount!listSalesman.html"},{"id":1009,"text":"日照香爐生紫煙","level":0,"tag":0,"href":"td!hotelList.html"},{"id":1010,"text":"更上一層樓","level":0,"tag":0,"href":"td!saleList.html"},{"id":1022,"text":"幫助文檔","level":0,"tag":0,"href":"fileDownload!downloadX.html"}],"href":""},{"id":9,"text":"匯總數據","level":0,"tag":0,"nodes":[{"id":1020,"text":"禮拜","level":0,"tag":0,"href":"calculation!edit.html"},{"id":1021,"text":"杜甫","level":0,"tag":0,"href":"calculationRecrd!list.html"}],"href":""},{"id":2,"text":"業務記錄模塊","level":0,"tag":0,"nodes":[{"id":1011,"text":"酒樓變更記錄","level":0,"tag":0,"href":"hotelChange!list.html"},{"id":1013,"text":"吉拉拉","level":0,"tag":0,"href":"tdyhRecord!patBarcodeRecordList.html"},{"id":1014,"text":"竄貨記錄","level":0,"tag":0,"href":"tdyhRecord!tranGoodsRecordList.html"},{"id":1027,"text":"業務員調動記錄","level":0,"tag":0,"href":"logInfo!personChange.html"},{"id":1029,"text":"組長調動記錄","level":0,"tag":0,"href":"logInfo!groupLeaderChange.html"},{"id":1030,"text":"竄貨統計","level":0,"tag":0,"href":"tdyhRecord!statTranGoodsList.html"},{"id":1031,"text":"竄貨配置","level":0,"tag":0,"href":"tdyhRecord!tranSet.html"}],"href":""},{"id":3,"text":"賬務信息模塊","level":0,"tag":0,"nodes":[{"id":1015,"text":"組長待確認賬單","level":0,"tag":0,"href":"td!groupLeaderStatementList.html?type=0"},{"id":1018,"text":"組長已確認賬單","level":0,"tag":0,"href":"td!groupLeaderStatementList.html?type=1"},{"id":1019,"text":"組長已掛起賬單","level":0,"tag":0,"href":"td!groupLeaderStatementList.html?type=2"}],"href":""},{"id":5,"text":"財務對賬模塊","level":0,"tag":0,"nodes":[{"id":5001,"text":"待確認賬單","level":0,"tag":0,"href":"finance!list.html"},{"id":5002,"text":"已確認賬單","level":0,"tag":0,"href":"finance!confirmList.html"}],"href":""},{"id":6,"text":"未兌換積分數據","level":0,"tag":0,"nodes":[{"id":5004,"text":"未兌換積分匯總","level":0,"tag":0,"href":"td!surplusSummary.html"}],"href":""},{"id":7,"text":"積分兌換數據","level":0,"tag":0,"nodes":[{"id":5003,"text":"積分兌換匯總","level":0,"tag":0,"href":"td!pointSummary.html"}],"href":""},{"id":8,"text":"積分數據","level":0,"tag":0,"nodes":[{"id":5005,"text":"積分匯總","level":0,"tag":0,"href":"td!integralSummary.html"},{"id":5006,"text":"積分記錄","level":0,"tag":0,"href":"td!integralSummaryList.html"}],"href":""},{"id":10,"text":"微信管理","level":0,"tag":0,"nodes":[{"id":1023,"text":"微信紅包設置","level":0,"tag":0,"href":"wx!list.html"},{"id":1024,"text":"微信積分配置","level":0,"tag":0,"href":"wxIntegral!list.html"},{"id":1025,"text":"拍碼設置","level":0,"tag":0,"href":"patBarcode!edit.html"},{"id":1026,"text":"微信修改日志查詢","level":0,"tag":0,"href":"logInfo!list.html"}],"href":""},{"id":11,"text":"微信兌換數據","level":0,"tag":0,"nodes":[{"id":1028,"text":"微信兌換記錄","level":0,"tag":0,"href":"td!pointSummaryList1.html?pointType=2"}],"href":""},{"id":12,"text":"活動管理","level":0,"tag":0,"nodes":[{"id":1201,"text":"活動管理","level":0,"tag":0,"href":"activity!list.html"},{"id":1202,"text":"活動統計","level":0,"tag":0,"href":"activityPlay!list.html"}],"href":""}]&ndash;&gt;-->
   <!--</div>-->
</div>

后台上送頁面json值：

dataJson =

[{"id":1,"text":"城市管理","level":0,"tag":0,"nodes":[{"id":1001,"text":"北京","level":0,"tag":0,"href":"account!editAccount.html"},{"id":1003,"text":"條件","level":0,"tag":0,"href":"system!listGroup.html"},{"id":1002,"text":"黃河入海流","level":0,"tag":0,"href":"account!list.html"},{"id":1004,"text":"欲窮千里目","level":0,"tag":0,"href":"account!chgPasswd.html"},{"id":1005,"text":"辦事處管理","level":0,"tag":0,"href":"td!officeList.html"},{"id":1006,"text":"工作組管理","level":0,"tag":0,"href":"group!list.html"},{"id":1007,"text":"工作區管理","level":0,"tag":0,"href":"workSpace!list.html"},{"id":1008,"text":"業務員管理","level":0,"tag":0,"href":"marketingaAccount!listSalesman.html"},{"id":1009,"text":"日照香爐生紫煙","level":0,"tag":0,"href":"td!hotelList.html"},{"id":1010,"text":"更上一層樓","level":0,"tag":0,"href":"td!saleList.html"},{"id":1022,"text":"幫助文檔","level":0,"tag":0,"href":"fileDownload!downloadX.html"}],"href":""},{"id":9,"text":"匯總數據","level":0,"tag":0,"nodes":[{"id":1020,"text":"禮拜","level":0,"tag":0,"href":"calculation!edit.html"},{"id":1021,"text":"杜甫","level":0,"tag":0,"href":"calculationRecrd!list.html"}],"href":""},{"id":2,"text":"業務記錄模塊","level":0,"tag":0,"nodes":[{"id":1011,"text":"酒樓變更記錄","level":0,"tag":0,"href":"hotelChange!list.html"},{"id":1013,"text":"吉拉拉","level":0,"tag":0,"href":"tdyhRecord!patBarcodeRecordList.html"},{"id":1014,"text":"竄貨記錄","level":0,"tag":0,"href":"tdyhRecord!tranGoodsRecordList.html"},{"id":1027,"text":"業務員調動記錄","level":0,"tag":0,"href":"logInfo!personChange.html"},{"id":1029,"text":"組長調動記錄","level":0,"tag":0,"href":"logInfo!groupLeaderChange.html"},{"id":1030,"text":"竄貨統計","level":0,"tag":0,"href":"tdyhRecord!statTranGoodsList.html"},{"id":1031,"text":"竄貨配置","level":0,"tag":0,"href":"tdyhRecord!tranSet.html"}],"href":""},{"id":3,"text":"賬務信息模塊","level":0,"tag":0,"nodes":[{"id":1015,"text":"組長待確認賬單","level":0,"tag":0,"href":"td!groupLeaderStatementList.html?type=0"},{"id":1018,"text":"組長已確認賬單","level":0,"tag":0,"href":"td!groupLeaderStatementList.html?type=1"},{"id":1019,"text":"組長已掛起賬單","level":0,"tag":0,"href":"td!groupLeaderStatementList.html?type=2"}],"href":""},{"id":5,"text":"財務對賬模塊","level":0,"tag":0,"nodes":[{"id":5001,"text":"待確認賬單","level":0,"tag":0,"href":"finance!list.html"},{"id":5002,"text":"已確認賬單","level":0,"tag":0,"href":"finance!confirmList.html"}],"href":""},{"id":6,"text":"未兌換積分數據","level":0,"tag":0,"nodes":[{"id":5004,"text":"未兌換積分匯總","level":0,"tag":0,"href":"td!surplusSummary.html"}],"href":""},{"id":7,"text":"積分兌換數據","level":0,"tag":0,"nodes":[{"id":5003,"text":"積分兌換匯總","level":0,"tag":0,"href":"td!pointSummary.html"}],"href":""},{"id":8,"text":"積分數據","level":0,"tag":0,"nodes":[{"id":5005,"text":"積分匯總","level":0,"tag":0,"href":"td!integralSummary.html"},{"id":5006,"text":"積分記錄","level":0,"tag":0,"href":"td!integralSummaryList.html"}],"href":""},{"id":10,"text":"微信管理","level":0,"tag":0,"nodes":[{"id":1023,"text":"微信紅包設置","level":0,"tag":0,"href":"wx!list.html"},{"id":1024,"text":"微信積分配置","level":0,"tag":0,"href":"wxIntegral!list.html"},{"id":1025,"text":"拍碼設置","level":0,"tag":0,"href":"patBarcode!edit.html"},{"id":1026,"text":"微信修改日志查詢","level":0,"tag":0,"href":"logInfo!list.html"}],"href":""},{"id":11,"text":"微信兌換數據","level":0,"tag":0,"nodes":[{"id":1028,"text":"微信兌換記錄","level":0,"tag":0,"href":"td!pointSummaryList1.html?pointType=2"}],"href":""},{"id":12,"text":"活動管理","level":0,"tag":0,"nodes":[{"id":1201,"text":"活動管理","level":0,"tag":0,"href":"activity!list.html"},{"id":1202,"text":"活動統計","level":0,"tag":0,"href":"activityPlay!list.html"}],"href":""}]

js代碼：

var ids = null;
$(function() {

    $('#treeview1').treeview({
        // data: $("#treeviewVal").html(),
        data: dataJson,
        showCheckbox : true,
        levels:1,
        onNodeChecked: function(event, data){
            //選中父節點，則自動選擇子節點

            if(data.nodes != null) {

                var arrayInfo = data.nodes;
                for (var i = 0; i < arrayInfo.length; i++) {
                    // $('#treeview1').treeview('checkNode', [ arrayInfo[i].nodeId, { silent: true } ]);
                    $('#treeview1').treeview('toggleNodeChecked', [ arrayInfo[i].nodeId, { silent: true } ]);

                }
            }

            ids = null;
            getIds(ids);

        },
        onNodeUnchecked: function(event, data){
            //取消選中父節點，則自動取消選擇子節點
            if(data.nodes != null)
            {
                var arrayInfo = data.nodes;
                for (var i = 0; i < arrayInfo.length; i++) {
                    // $('#treeview1').treeview('checkNode', [ arrayInfo[i].nodeId, { silent: true } ]);
                    $('#treeview1').treeview('toggleNodeChecked', [ arrayInfo[i].nodeId, { silent: true } ]);
                }
            }

            ids = null;
            getIds(ids);

        }
    });


});

function dosome( num){
    if(num == 1)
    {
        $('#treeview1').treeview('checkAll', { silent: true });//全選
    }else if(num == 2){
        $('#treeview1').treeview('uncheckAll', { silent: true });//取消全選
    }else if(num == 3){
        $('#treeview1').treeview('collapseAll', { silent: true });//折疊
    }else if(num == 4){
        $('#treeview1').treeview('expandAll', { levels: 2, silent: true });//展開所有二級節點
    }
}
function getDisabled(){
    var checkedArr = $('#treeview1').treeview('getChecked','');
    console.log(checkedArr[0].id);
    console.log(checkedArr[0].text);

}
function getIds(ids) {
    var checkedArr  = $('#treeview1').treeview('getChecked');
    for (var i = 0; i < checkedArr.length; i++) {
        console.log("checkedArr["+i+"].id="+checkedArr[i].id);

        if (i == checkedArr.length -1) {
            ids = ids + checkedArr[i].id;
        } else {
            ids = ids + checkedArr[i].id + ",";
        }

    }
    console.log("ids="+ids);

    //如果ids只包含一個子id的時候，則ajax去后台查對應顯示信息；
    if(ids != null && ids.toString().indexOf(",") < 0 ) {
        //反顯

    } else {
        //清空
    }

}