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





  • 2
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值