bootstrap-treeview 樹列表 總結整理

<link href="~/Content/bootstrap.css" rel="stylesheet" />
<link href="~/Scripts/bootstrap-treeview/css/bootstrap-treeview.css" rel="stylesheet" />
<!-- JS文件 -->
<script src="~/Scripts/jquery-2.1.3.min.js"></script>
<script src="~/Scripts/bootstrap-treeview/js/bootstrap-treeview.js"></script>
<script src="~/Scripts/artDialog/artDialog.js?skin=simple" type="text/javascript"></script>
<script src="~/Scripts/artDialog/plugins/iframeTools.source.js"></script>

獲取後臺數據

function load_tree(Txt) {
            $.ajax({
                type: "Post",
                url: "/SMS/GetTreeJson",data: { "searchText": Txt },
                dataType: "json",
                success: function (result) {
                    $('#tree').treeview({
                        data: result,         // 數據源
                        showCheckbox: true,   //是否顯示覆選框
                        highlightSelected: true,    //是否高亮選中
                        //nodeIcon: 'glyphicon glyphicon-user',    //節點上的圖標
                        // nodeIcon: 'glyphicon glyphicon-globe',
                        emptyIcon: '',    //沒有子節點的節點圖標
                        multiSelect: true,    //多選
                        onNodeChecked: nodeChecked,   //級聯選擇
                        onNodeUnchecked: nodeUnchecked   //級聯選擇
                    });
                    $('#tree').treeview('collapseAll', { silent: true });

                },
                error: function () {
                    alert("樹形結構加載失敗！")
                }
            });
        }

    //級聯選擇

    var nodeCheckedSilent = false;
    function nodeChecked(event, node) {
        if (nodeCheckedSilent) {
            return;
        }
        nodeCheckedSilent = true;
        checkAllParent(node);
        checkAllSon(node);
        nodeCheckedSilent = false;
    }

    var nodeUncheckedSilent = false;
    function nodeUnchecked(event, node) {
        if (nodeUncheckedSilent)
            return;
        nodeUncheckedSilent = true;
        uncheckAllParent(node);
        uncheckAllSon(node);
        nodeUncheckedSilent = false;
    }

    //選中全部父節點
    function checkAllParent(node) {
        // $('#tree').treeview('checkNode', node.nodeId, { silent: true });
        var parentNode = $('#tree').treeview('getParent', node.nodeId);
        var siblings = $('#tree').treeview('getSiblings', node.nodeId);
        if (!("nodeId" in parentNode)) {
            return;
        }
        var isAllChecked = true;  //是否全部沒選中
        if (node.nodes != null && node.nodes.length > 0) {
            for (var i in node.nodes) {
                if (!node.nodes[i].state.checked) {
                    isAllChecked = false;
                    break;
                }
            }
        }
        for (var j in siblings) {
            if (!siblings[j].state.checked) {
                isAllChecked = false;
                break;
            }
        }
        if (isAllChecked) {
            // checkAllParent(parentNode);
            $('#tree').treeview('checkNode', parentNode, { silent: true });
        }
        //else {
        //    checkAllParent(parentNode);
        //}
    }
    //取消全部父節點
    function uncheckAllParent(node) {
        $('#tree').treeview('uncheckNode', node.nodeId, { silent: true });
        var siblings = $('#tree').treeview('getSiblings', node.nodeId);
        var parentNode = $('#tree').treeview('getParent', node.nodeId);
        if (!("nodeId" 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(node) {
        $('#tree').treeview('checkNode', node.nodeId, { silent: true });
        if (node.nodes != null && node.nodes.length > 0) {
            for (var i in node.nodes) {
                checkAllSon(node.nodes[i]);
            }
        }
    }
    //級聯取消所有子節點
    function uncheckAllSon(node) {
        $('#tree').treeview('uncheckNode', node.nodeId, { silent: true });
        if (node.nodes != null && node.nodes.length > 0) {
            for (var i in node.nodes) {
                uncheckAllSon(node.nodes[i]);
            }
        }
    }

    //獲取選中的子節點數據
    function getChildChecked(node) {
        for (var i in node) {
            idList += node[i].Id + ",";
            //var _index=node[i].text.indexOf("(");
            //var text = node[i].text.substring(0,_index+1)
            //areaList += text + ",";
            var r = /\((\d+)\)/;
            var n = r.exec(node[i].text);
            num += parseInt(n[1]);
            if (node[i].nodes != null && node[i].nodes.length > 0) {
                //有子節點，移除父節點
                var nodeid = node[i].Id;
                idList = idList.toString().replace(nodeid, '-1');
                num -= parseInt(n[1]);
            }
        }
    }

後臺數據格式

//var nodeA = new List<Node>();
            //nodeA.Add(new Node(4, "A01", null));
            //nodeA.Add(new Node(5, "A02", null));
            //nodeA.Add(new Node(6, "A03", null));

            //var nodeB = new List<Node>();
            //nodeB.Add(new Node(7, "B07", null));
            //nodeB.Add(new Node(8, "B08", null));
            //nodeB.Add(new Node(9, "B09", null));

            //var nodes = new List<Node>();
            //nodes.Add(new Node(1, "A01", nodeA));
            //nodes.Add(new Node(2, "B02", nodeB));
            //nodes.Add(new Node(3, "A03", null));

參考地址：

http://www.cnblogs.com/mfc-itblog/p/5233453.html

http://blog.csdn.net/jiang_2992/article/details/62042028