zoukankan      html  css  js  c++  java
  • bootstrap-treeview 如何实现全选父节点下所有子节点及反选

    转(https://www.augsky.com/992.html)

    选中父节点时,父节点下所有子节点也都全部选中

    1,HTML代码

    1 <h2>TreeView Checkable</h2>
    2 <div id="treeview-checkable"></div>

    2,Json数据

     1  function getTvStateData() {
     2             var defaultData = [
     3                 {
     4                     text: 'Parent 1',
     5                     href: '#parent1',
     6                     tags: ['4'],
     7                     state: {
     8                         checked: true
     9                     },
    10                     nodes: [
    11                         {
    12                             text: 'Child 1',
    13                             href: '#child1',
    14                             tags: ['2'],
    15                             nodes: [
    16                                 {
    17                                     text: 'Grandchild 1',
    18                                     href: '#grandchild1',
    19                                     tags: ['0']
    20                                 },
    21                                 {
    22                                     text: 'Grandchild 2',
    23                                     href: '#grandchild2',
    24                                     tags: ['0']
    25                                 }
    26                             ]
    27                         },
    28                         {
    29                             text: 'Child 2',
    30                             href: '#child2',
    31                             tags: ['0']
    32                         }
    33                     ]
    34                 },
    35                 {
    36                     text: 'Parent 2',
    37                     href: '#parent2',
    38                     tags: ['0'],
    39                     nodes: [
    40                         {
    41                             text: 'Child 1',
    42                             href: '#child1',
    43                             tags: ['2'],
    44                             nodes: [
    45                                 {
    46                                     text: 'Grandchild 1',
    47                                     href: '#grandchild1',
    48                                     tags: ['0']
    49                                 },
    50                                 {
    51                                     text: 'Grandchild 2',
    52                                     href: '#grandchild2',
    53                                     tags: ['0']
    54                                 }
    55                             ]
    56                         },
    57                         {
    58                             text: 'Child 2',
    59                             href: '#child2',
    60                             tags: ['0']
    61                         }
    62                     ]
    63                 },
    64                 {
    65                     text: 'Parent 3',
    66                     href: '#parent3'
    67                 },
    68                 {
    69                     text: 'Parent 4',
    70                     href: '#parent4',
    71                     tags: ['0']
    72                 },
    73                 {
    74                     text: 'Parent 5',
    75                     href: '#parent5',
    76                     tags: ['0']
    77                 }
    78             ];
    79 
    80             return defaultData;
    81         }
    View Code

    3,JS数据绑定,加载TreeView

     1  $(function() {
     2  var $checkableTree = $('#treeview-checkable')
     3                 .treeview({
     4                     data: getTvStateData(), //数据
     5                     showIcon: false,
     6                     showCheckbox: true,
     7                     levels: 1,
     8                     onNodeChecked: function(event, node) { //选中节点
     9                         var selectNodes = getChildNodeIdArr(node); //获取所有子节点
    10                         if (selectNodes) { //子节点不为空,则选中所有子节点
    11                             $('#treeview-checkable').treeview('checkNode', [selectNodes, { silent: true }]);
    12                         }
    13                         var parentNode = $("#treeview-checkable").treeview("getNode", node.parentId);
    14                         setParentNodeCheck(node);
    15                     },
    16                     onNodeUnchecked: function(event, node) { //取消选中节点
    17                         var selectNodes = getChildNodeIdArr(node); //获取所有子节点
    18                         if (selectNodes) { //子节点不为空,则取消选中所有子节点
    19                             $('#treeview-checkable').treeview('uncheckNode', [selectNodes, { silent: true }]);
    20                         }
    21                     },
    22                     onNodeExpanded:
    23                         function(event, data) {
    24                             if (data.nodes === undefined || data.nodes === null) {
    25                                
    26                             } else if (data.tags[0] === "2") {
    27                                 alert("Tags 2");
    28                             } else {
    29                                 alert("1111");
    30                             }
    31                         }
    32                 });
    33  });
    View Code

    4,选中/取消选中父节点时,选中/取消选中所有子节点,以及选中所有子节点时,选中父节点

     1  function getChildNodeIdArr(node) {
     2             var ts = [];
     3             if (node.nodes) {
     4                 for (x in node.nodes) {
     5                     ts.push(node.nodes[x].nodeId);
     6                     if (node.nodes[x].nodes) {
     7                         var getNodeDieDai = getChildNodeIdArr(node.nodes[x]);
     8                         for (j in getNodeDieDai) {
     9                             ts.push(getNodeDieDai[j]);
    10                         }
    11                     }
    12                 }
    13             } else {
    14                 ts.push(node.nodeId);
    15             }
    16             return ts;
    17         }
    18 
    19         function setParentNodeCheck(node) {
    20             var parentNode = $("#treeview-checkable").treeview("getNode", node.parentId);
    21             if (parentNode.nodes) {
    22                 var checkedCount = 0;
    23                 for (x in parentNode.nodes) {
    24                     if (parentNode.nodes[x].state.checked) {
    25                         checkedCount ++;
    26                     } else {
    27                         break;
    28                     }
    29                 }
    30                 if (checkedCount === parentNode.nodes.length) {
    31                     $("#treeview-checkable").treeview("checkNode", parentNode.nodeId);
    32                     setParentNodeCheck(parentNode);
    33                 }
    34             }
    35         }
    View Code
  • 相关阅读:
    CSU 1333 Funny Car Racing
    FZU 2195 检查站点
    FZU 2193 So Hard
    ZOJ 1655 FZU 1125 Transport Goods
    zoj 2750 Idiomatic Phrases Game
    hdu 1874 畅通工程续
    hdu 2489 Minimal Ratio Tree
    hdu 3398 String
    洛谷 P2158 [SDOI2008]仪仗队 解题报告
    POJ 1958 Strange Towers of Hanoi 解题报告
  • 原文地址:https://www.cnblogs.com/cpcpc/p/7217845.html
Copyright © 2011-2022 走看看