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

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 Viewspan>h1>
        
        header>
        div class="container">
            div class="row">
                hr>
                h2>Checkable Treeh2>
                div class="col-sm-4">
                  h2>Inputh2>    
                  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>Treeh2>
                  div id="treeview-checkable" class="">div>
                div>
                div class="col-sm-4">
                  h2>Eventsh2>
                  div id="checkable-output">div>
                div>
            div>

        div>
    div>
    
    script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.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>