欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

bootstrap-treeview 树列表 总结整理

程序员文章站 2022-06-08 10:40:50
...
<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