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

var nodeCheckedSilent = false;
var nodeUncheckedSilent = false;

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

3.加载的树结构

function loadMenuTree(){
    $(&＃8216;#tree&＃8217;).treeview({
        data : getTree(), // 实现树形结构的展示树形规则，后续展示实体类属性内容
        levels : 2,
        expandIcon : &＃8220;glyphicon glyphicon-chevron-right&＃8221;,//图案可以自己选择
        collapseIcon : &＃8220;glyphicon glyphicon-chevron-down&＃8221;,
        emptyIcon:&＃8221;glyphicon glyphicon-th-large&＃8221;,//设置没有子节点的菜单前的图标
        showBorder : false,
        showTags : true,
        highlightSelected : false,
        highlightSearchResults : true,
        selectedBackColor : false,
        showIcon : true,
        multiSelect : 1,
        showCheckbox: 1,//复选框设置，也可以是true
        onNodeChecked: function(event, data) {
            if(nodeCheckedSilent){
                return;
            }
            nodeCheckedSilent = true;//开始父子节点级联全选全不选
            checkAllParent(data);
            checkAllSon(data);
            nodeCheckedSilent = false;
        },
        onNodeUnchecked : function(event, data) {
            if(nodeUncheckedSilent){
                return;
            }
            nodeUncheckedSilent = true;//开始父子节点级联全选全不选
            uncheckAllParent(data);
            uncheckAllSon(data);
            nodeUncheckedSilent = false;
        
        }

    });
}

4.获取树结构内容，以便于展示树结构，树结构展示的内容

function getTree() {
    var menus;
    $.ajax({
        async : false,
        url : “获取的树结构的内容”,//自己定义的接口
        type : &＃8220;post&＃8221;,
        contentType : &＃8220;application/json;charset=UTF-8&＃8221;,
        dataType : &＃8220;json&＃8221;,
        data : null,
        error : function(data) {
            alert(data.toString());
        },
        success : function(data) {
            menus = data;
        },
        error:function(data){
            alert(&＃8220;加载失败&＃8221;);
        }
    });
    return menus;
}

5.实现父子节点级联和全选全不选：

//选中全部父节点
function checkAllParent(data){
    $(&＃8216;#tree&＃8217;).treeview(&＃8216;checkNode&＃8217;,data.nodeId,{silent:true});
    var parentNode = $(&＃8216;#tree&＃8217;).treeview(&＃8216;getParent&＃8217;,data.nodeId);
    if(!(&＃8220;nodeId&＃8221; in parentNode)){
        return;
    }else{
        checkAllParent(parentNode);
    }
}
//取消全部父节点
function uncheckAllParent(data){
    $(&＃8216;#tree&＃8217;).treeview(&＃8216;uncheckNode&＃8217;,data.nodeId,{silent:true});
    var siblings = $(&＃8216;#tree&＃8217;).treeview(&＃8216;getSiblings&＃8217;, data.nodeId);
    var parentNode = $(&＃8216;#tree&＃8217;).treeview(&＃8216;getParent&＃8217;,data.nodeId);
    if(!(&＃8220;nodeId&＃8221; in parentNode)) {
        return;
    }
    var isAllUnchecked = true;  //是否全部没选中
    for(var i in siblings){
        if(siblings[i].state.checked){
            isAllUnchecked=false;
            break;
        }
    }
    if(isAllUnchecked){
        uncheckAllParent(parentNode);
    }
 
}
 
//级联选中所有子节点
function checkAllSon(data){
    $(&＃8216;#tree&＃8217;).treeview(&＃8216;checkNode&＃8217;,data.nodeId,{silent:true});
    if(data.nodes!=null&&data.nodes.length>0){
        for(var i in data.nodes){
            checkAllSon(data.nodes[i]);
        }
    }
}
//级联取消所有子节点
function uncheckAllSon(data){
    $(&＃8216;#tree&＃8217;).treeview(&＃8216;uncheckNode&＃8217;,data.nodeId,{silent:true});
    if(data.nodes!=null&&data.nodes.length>0){
        for(var i in data.nodes){
            uncheckAllSon(data.nodes[i]);
        }
    }
}

三、下面是树结构要求实现的实体类关系：

    private String id;
    private String parentId;
    private String text;
    private String level;
    private String href;
    
    private String rootId;
    
    private List nodes = new ArrayList();

如果要加入回显选中内容，需要加上：

/**
     * 用于回显(默认选中)
     */
    private static Map stateMap = new HashMap();

    static {
        stateMap.put(&＃8220;checked&＃8221;, true);
    }

    private Map state;

普通的是这些，不过要实现树结构，复选框回显，应该加上一个属性：state,前端的树结构加载的时候会看此节点是否有state:{checked：true}属性，有的话就会自己成选中状态，这样在加载树结构的时候，知道这个节点是选中状态，直接给setstate();就可以给他属性了；

需要注意的是，给树结构选中的属性是在加载树结构的时候，就给他setstate（）属性，不需要请求两次树结构内容

这样在前端显示出来的界面就是已经有的节点是选中状态了：

树结构前面显示的图标是可以进行变化的，

放链接，图标：https://v3.bootcss.com/components/

更改地方，在js中：

文章参考：

父子节点全选全不选参考文章：https://blog.csdn.net/jiang_2992/article/details/62042028

修改图标：https://v3.bootcss.com/components/

自己学习参考文章：

https://blog.csdn.net/u011550710/article/details/79240368

https://www.cnblogs.com/chenhtblog/p/8342534.html

https://blog.csdn.net/u010028869/article/details/44087699

先这些，后续再补充吧~