引导树视图性能问题答案

【问题标题】：Bootstrap treeview performance issue引导树视图性能问题
【发布时间】：2017-09-06 06:32:02
【问题描述】：

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

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

目前我找不到任何方法来做到这一点。

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

当大约 150 个节点的树深度超过 3 时，我发现性能问题。经过调查，我发现bootstrap-treeview.js 中的checkNode 函数在每次检查节点时都使用render，谁能告诉我这个render 函数的用法？

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

【问题讨论】：

标签： bootstrap-treeview

【解决方案1】：

我也在使用递归解决方案来提高性能，但我找到了一个更有效的替代方案。对checkAll 的调用很快，即使是大树，因为它只对render 进行一次调用，而使用checkNode 进行此检查的递归实现将不必要地调用render 多次，正如您所指出的.

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

因此，您只需在事件处理程序中添加一些代码，即可通过查看最后一个子节点的 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}]);
    }
}

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

【讨论】：

【解决方案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));
    }
};

【讨论】：