Question

我正在使用this plugin来展示树。

是否有任何功能可以在检查父节点时检查所有子节点？

目前我无法找到任何方法。

为了实现这个功能，我编写了递归函数来查找root下的每个节点并使用checkNode函数进行检查。

当大约150个节点的树的深度超过3时，我看到了性能问题。经过调查，我发现checkNode bootstrap-treeview.js函数在每次检查节点时使用render，是否有人可以告诉我使用此render函数？

我们可以删除render的使用吗？

Answer 1

我也在使用递归解决方案来解决性能问题，但我找到了一种更有效的替代解决方案。对checkAll的调用很快，即使对于大树也是如此，因为它只调用render，而使用checkNode递归执行此检查会调用render正如你所指出的那样，不必要地多次。

我在文档中找不到此内容，但我注意到checkNode在其实现中调用forEachIdentifier，与checkAll相同，因此您实际上可以传入节点或nodeId数组，而不仅仅是单个nodeId，在检查完所有节点后，它只会调用render一次。 checkAll的唯一区别是它专门传递树中的所有nodeIds。

因此，您可以在事件处理程序中添加一些代码，通过查看最后一个子节点的id并构建范围，为父级下的所有节点生成nodeId列表，然后调用checkNode一次

function onNodeChecked(event, node_data) {
    var first_index, last_index, last_node, nodes, range, i;
    nodes = node_data.nodes;
    if (nodes != null) {
      first_index = node_data.nodeId;
      last_node = nodes[nodes.length - 1];
      while (last_node.nodes != null) {
        nodes = last_node.nodes;
        last_node = nodes[nodes.length - 1];
      }
      last_index = last_node.nodeId;
      range = [];
      for (i = first_index; i <= last_index ; i++) {
        range.push(i);
      }
      return $('#tree').treeview('checkNode', [range, {silent: true}]);
    }
}

编辑：修改代码以正确处理最后一个孩子有孩子的情况。

Answer 2

尝试一下。

编辑引导树视图js文件。

找到 toggleCheckedState 函数并在下面替换为

Tree.prototype.toggleCheckedState = function (node, options) {
    if (!node) return;
    this.setCheckedState(node, !node.state.checked, options);
    if (node.nodes && !options.ignoreChildren) {
        $.each(node.nodes, $.proxy(function (index, node1) {
            this.toggleCheckedState(node1,_default.options);
        }, this));
    }
};

Bootstrap treeview性能问题

2 个答案: