jquery - 引导树视图在根单击时选择子项

Question

我正在使用 Bootstrap Treeview（bootstrap-treeview.js v1.0.2）；如何在单击根时激活对根节点的所有子节点的选择效果？

此代码段未按预期工作

$('#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

我从feiyuw改编了函数“_getChildren” ：

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

var tree = $('#tree').treeview({
    level: 3,
    expandIcon: "fa fa-plus-square",
    collapseIcon: "fa fa-minus-square",
    emptyIcon: "fa fa-truck",
    showTags: true,
    showCheckbox: true,
    selectable: false,
    highlightSelected: false,
    data: getTree()
}).on('nodeChecked', function (event, node){
    var childrenNodes = _getChildren(node);
    $(childrenNodes).each(function(){
        $(trucks).treeview('checkNode', [ this.nodeId, { silent: true } ]);;
    });
}).on('nodeUnchecked', function (event, node){
    var childrenNodes = _getChildren(node);
    $(childrenNodes).each(function(){
        $(trucks).treeview('uncheckNode', [ this.nodeId, { silent: true } ]);;
    });
});

Answer 3

只需选择 = 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

我也遇到了这个问题，下面是我的解决方案（注意：我在这里使用 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 5

我尝试了以前的答案，它有错误。我根据下面的代码修复了它

                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 } ]);
                    }
                });