bootstrap实现treeview，带复选框树结构（父子节点级联）

bootstrap的树结构插件，包括树结构显示复选框、复选框回显功能，在此记录一下实现过的功能，便于以后使用~

使用方法：

一、首先引用css和js，仅写自己使用的

jquery-1.11.3.min.js、bootstrap-3.3.7.css、bootstrap-3.3.7.js、bootstrap-treeview.js

不过看别的博客说是这样的区间范围：Bootstrap v3.3.4 (>= 3.0.0) jQuery v2.1.3 (>= 1.9.0)

参考地址：https://blog.csdn.net/security_2015/article/details/79527313

    <script type="text/javascript" th:src="@{/jquery/jquery-1.11.3.min.js}"></script>
    <link rel="stylesheet" type="text/css" th:href="@{/bootstrap/bootstrap-3.3.7/css/bootstrap.css}"></link>
    <link rel="stylesheet" type="text/css" th:href="@{/bootstrap/select/bootstrap-select.min.css}"/>
    <script type="text/javascript" th:src="@{/bootstrap/bootstrap-3.3.7/js/bootstrap.js}"></script>
    <script type="text/javascript" th:src="@{/bootstrap/bootstrap-treeview/js/bootstrap-treeview.js}"></script>
    <script type="text/javascript" th:src="@{/bootstrap/select/bootstrap-select.min.js}"></script>

二、js和html分开写，先写html页面内容

html：

1.定义div，设置树结构
       <div id="tree" style="overflow: auto; margin-left: 0; margin-top: 0;padding-left:170px;"></div>

2.在js中定义：

//定义属性，来实现父子级联和全选全不选

var nodeCheckedSilent = false;
var nodeUncheckedSilent = false;

function init(){
    loadMenuTree();//加载树结构
}

3.加载的树结构

function loadMenuTree(){
    $('#tree').treeview({
        data : getTree(), // 实现树形结构的展示树形规则，后续展示实体类属性内容
        levels : 2,