Question

我正在使用Bootstrap Treeview（bootstrap-treeview.js v1.0.2）; 如何在点击root上激活根节点的所有chidren上的选择效果？

此代码段无法按预期工作

$('#tree')
    .on('nodeSelected', function (event, node) {
        children=node['nodes'];
        for (var i = 0; i < children.length; i++) {
            children[i].states.expanded = true;
            children[i].states.selected = true;
        }
});

这只适用于第一个孩子

$('#tree')
    .on('nodeSelected', function (event, node) {
        children=node['nodes'];
        for (var i = 0; i < children.length; i++) {
            nodeId=children[i]['nodeId'];
            console.log(nodeId);
            $('.node-tree[data-nodeid="'+nodeId+'"]').click();
        }
});

Answer 1

请参阅下面的代码，
请注意，您需要确保您的数据选项“multiSelect”为真。

var tree = $('#caseview').treeview({
    levels: 2,
    showTags: true,
    showCheckbox: true,
    multiSelect: true,
    data: caseData
});

caseview.on('nodeSelected', function(e, node){
    if (typeof node['nodes'] != "undefined") {
        var children = node['nodes'];
        for (var i=0; i<children.length; i++) {
            caseview.treeview('selectNode', [children[i].nodeId, { silent: true } ]);
        }
    }
});

Answer 2

我也遇到了这个问题，下面是我的解决方案（注意：我在这里使用lodash）：

function _getChildren(node) {
  if (node.nodes === undefined) return [];
  var childrenNodes = node.nodes;
  node.nodes.forEach(function(n) {
    childrenNodes = childrenNodes.concat(_getChildren(n));
  });

  return childrenNodes;
}

$('#tree').treeview({
  data: data,
  levels: 1,
  showCheckbox: true,
  showBorder: false,
  showTags: false,
  selectable: false,
  multiSelect: true,
  highlightSelected: false,
  onNodeChecked: function(event, node) {
    var parentNodes = _getParents([node], $(this));
    var childrenNodes = _.map(_getChildren(node), 'nodeId');
    var allNodes = parentNodes.concat(childrenNodes);
    $(this).treeview('checkNode', [allNodes, {silent: true}]);
  },
});

Answer 3

只需使 select = true

var tree = $('#caseview').treeview({
    selectable: true, // enable here, if exist, otherwise append it line
    data: caseData
})
.on('nodeSelected', function(e, node){
    if (node['text'].includes(".doc") { // text as name of node
        doit()
    }
})

“。doc”-是文件扩展名的示例，用于选择文件而不是文件夹

doit（）-您要继续的代码

Answer 4

我尝试了以前的答案，但有错误。我根据以下代码对其进行了修复

                var treeCheck = $('.treeCheck').treeview({
                    data: res,
                    nodeIcon: "fa fa-desktop",
                    expandIcon: 'fa fa-angle-left',
                    collapseIcon: 'fa fa-angle-down',
                    checkedIcon: 'fa fa-check-circle',
                    uncheckedIcon: 'fa fa-circle-o',
                    showBorder: false,
                    showCheckbox: true
                }).on('nodeChecked', function (event, node){
                    
                    var childrenNodes = _getChildren(node);
                    for (i = 0; i < childrenNodes.length; i++) {
                         $('.treeCheck').treeview('checkNode', [ childrenNodes[i], { silent: true } ]);
                    } 
                    
                }).on('nodeUnchecked', function (event, node){
                    var childrenNodes = _getChildren(node);

                    for (i = 0; i < childrenNodes.length; i++) {
                        $('.treeCheck').treeview('uncheckNode', [ childrenNodes[i], { silent: false } ]);
                    }
                });

Bootstrap treeview根据点击选择子项

4 个答案: