基于bootstrap的jQuery多级列表树插件-解决父子节点勾选状态联动

83510998

2020-06-14

关注关注

如何解决

① 如果勾选了父级节点，怎么让子节点全部变为勾选状态？

② 如果只选择了某个子节点，怎么让该节点所有的父节点全部变为选中状态？

③若果子节点都取消了，怎么让所有父节点都变为未选择状态？

coding:

<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基于bootstrup的jQuery多级列表树插件</title>
    <link rel="stylesheet" type="text/css" href="css/default.css">
    <link href="https://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
    <style type="text/css">
        .htmleaf-header{margin-bottom: 15px;font-family: "Segoe UI", "Lucida Grande", Helvetica, Arial, "Microsoft YaHei", FreeSans, Arimo, "Droid Sans", "wenquanyi micro hei", "Hiragino Sans GB", "Hiragino Sans GB W3", "FontAwesome", sans-serif;}
        .htmleaf-icon{color: #fff;}
    </style>
</head>
<body>

    <div class="htmleaf-container">
        <header class="htmleaf-header bgcolor-12">
            <h1>基于bootstrup的jQuery多级列表树插件 <span>Bootstrap Tree View</span></h1>
        
        </header>
        <div class="container">
            <div class="row">
                <hr>
                <h2>Checkable Tree</h2>
                <div class="col-sm-4">
                  <h2>Input</h2>    
                  <div class="form-group">
                    <label for="input-check-node" class="sr-only">Search Tree:</label>
                    <input type="input" class="form-control" id="input-check-node" placeholder="Identify node..." value="Parent 1">
                  </div>
                </div>
                <div class="col-sm-4">
                  <h2>Tree</h2>
                  <div id="treeview-checkable" class=""></div>
                </div>
                <div class="col-sm-4">
                  <h2>Events</h2>
                  <div id="checkable-output"></div>
                </div>
            </div>

        </div>
    </div>
    <!-- <script src="js/jquery-2.1.0.min.js"></script> -->
    <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <!-- <script src="js/bootstrap-treeview.js"></script> -->
    <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-treeview/1.2.0/bootstrap-treeview.min.js"></script>
    <script type="text/javascript">

(function($){
    var defaultData = [
          {
            text: ‘Parent 1‘,
            href: ‘#parent1‘,
            // parentId:0,
            id: 1,
            tags: [‘4‘],
            nodes: [
              {
                text: ‘Child 1‘,
                href: ‘#child1‘,
                // parentId:1,
                id: 2,
                tags: [‘2‘],
                nodes: [
                  {
                    text: ‘Grandchild 1‘,
                    href: ‘#grandchild1‘,
                    // parentId:2,
                    id: 3,
                    tags: [‘0‘],
                    nodes:[
                           {
                            text: ‘sonGrandchild 1‘,
                            href: ‘#songrandchild1‘,
                            // parentId:2,
                            id: 100,
                            tags: [‘0‘],
                            nodes:[
                                {
                                    text: ‘ssGrandchild 1‘,
                                    href: ‘#songrandchild1‘,
                                    // parentId:2,
                                    id: 10000,
                                    tags: [‘0‘]
                                }
                            ]
                        },
                        {
                            text: ‘sonGrandchild 2‘,
                            href: ‘#songrandchild2‘,
                            // parentId:2,
                            id: 200,
                            tags: [‘0‘]
                        },
                    ]
                  },
                  {
                    text: ‘Grandchild 2‘,
                    href: ‘#grandchild2‘,
                    // parentId:2,
                    id: 4,
                    tags: [‘0‘]
                  }
                ]
              },
              {
                text: ‘Child 2‘,
                href: ‘#child2‘,
                // parentId:1,
                id: 5,
                tags: [‘0‘]
              }
            ]
          },
          {
            text: ‘Parent 2‘,
            href: ‘#parent2‘,
            parentId:0,
            id: 6,
            tags: [‘0‘]
          },
          {
            text: ‘Parent 3‘,
            href: ‘#parent3‘,
            parentId:0,
            id: 7,
             tags: [‘0‘]
          },
          {
            text: ‘Parent 4‘,
            href: ‘#parent4‘,
            parentId:0,
            id: 8,
            tags: [‘0‘]
          },
          {
            text: ‘Parent 5‘,
            href: ‘#parent5‘  ,
            parentId:0,
            id: 9,
            tags: [‘0‘]
          }
        ];
        var $checkableTree = $(‘#treeview-checkable‘).treeview({
          data: defaultData,
          showIcon: false,
          levels:5,
          showCheckbox: true,
          onNodeChecked: function(event, node) {
              checkAllNodes("checkNode", node);
          },
          onNodeUnchecked: function (event, node) {
              checkAllNodes("uncheckNode", node);
           
          }
        });

        // Check/uncheck/toggle nodes
        $(‘#input-check-node‘).on(‘keyup‘, function (e) {
          checkableNodes = findCheckableNodess();
          $(‘.check-node‘).prop(‘disabled‘, !(checkableNodes.length >= 1));
        });

       

       function checkAllNodes(method, node) {
            var $tree = $(‘#treeview-checkable‘);
            parentNode = $tree.treeview(‘getParent‘, node);
            if(parentNode.id){
                getParentNode(method, node, $tree);//如果父节点存在，选中/去除父节
            }           
            $(node.nodes).each(function (a, b) {
                $tree.treeview(method, [b.nodeId, {
                    silent: true
                }]);
                if (b.nodes)
                    checkAllNodes(method, b);
            });
        }
        function getParentNode(method, node, tree) {
            if (method == "uncheckNode") { //如果是取消事件，当判断兄弟节点是否存在
                var arr = tree.treeview(‘getSiblings‘, node);//获取兄弟节点
                for (var i = 0; i < arr.length; i++) {
                    var brotherNode = arr[i];
                    if (brotherNode.state.checked) { //判断兄弟节点是否用选中状态
                        return;
                    }
                }
            }
            parentNode = tree.treeview(‘getParent‘, node)
            // if(parentNode.id!==undefined){
            if(parentNode.id!==undefined){
                tree.treeview(method, [parentNode, {
                    silent: true
                }]);
            }else{
                return;
            }
            var pnode = tree.treeview(‘getParent‘, parentNode);
            // if(pnode.id!==undefined){
            if(pnode.id){
                tree.treeview(method, [pnode, {
                    silent: true
                }]);
                getParentNode(method, pnode, tree);
            }
        }



})(jQuery)
        

    </script>

</body>
</html>

jquery