美文网首页
2020-06-14

2020-06-14

作者: bf1762a21f43 | 来源:发表于2020-06-14 11:31 被阅读0次

    ···
    <!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'] } ]; varcheckableTree = $('#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>
    ···

    相关文章

      网友评论

          本文标题:2020-06-14

          本文链接:https://www.haomeiwen.com/subject/vkdxxktx.html