码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2020-06-14 13:07:04      阅读:89      评论:0      收藏:0      [点我收藏+]

标签:bsp   javascrip   mil   color   gets   ajax   name   jquery   选中   

如何解决

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

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

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

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>

 

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

标签:bsp   javascrip   mil   color   gets   ajax   name   jquery   选中   

原文地址:https://www.cnblogs.com/zbchina/p/13124133.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!