jQuery Bootstrap treeview 在根单击时选择子项

Bootstrap treeview Select children on root click

提问by zuk

i am using Bootstrap Treeview (bootstrap-treeview.js v1.0.2); how can i activate selection effect on all chidren of root node on click of root?

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

This snippet doesn't work as expected

此代码段未按预期工作

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

and this works only on the first child

这仅适用于第一个孩子

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

回答by xgao

Refer to my code below,
note that you need make sure your data option "multiSelect" is true.

请参考我下面的代码，
请注意您需要确保您的数据选项“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 } ]);
        }
    }
});

回答by Aline Matos

I adapted the function "_getChildren" from feiyuw:

我改编自功能“_getChildren” feiyuw：

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

回答by Denis Rohlinsky

just make select = true

只需使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" - is example of file extension to select files instead folders

doit() - is your code to continue

“.doc” - 是选择文件而不是文件夹的文件扩展名示例

doit() - 是您要继续的代码

回答by feiyuw

I also meet this problem, below is my solution (NOTE: I use lodash here):

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