如何用新数据重绘 jstree 树？答案

【问题标题】：How to redraw jstree tree with new data?如何用新数据重绘 jstree 树？
【发布时间】：2014-03-15 19:51:00
【问题描述】：

所以，我的问题。我用一些数据初始化了我的树：

$('#tree').jstree({
    'core' : {
        'data' : [
            'Simple root node',
            {
                'id' : 'node_2',
                'text' : 'Root node with options',
                'state' : { 'opened' : true, 'selected' : true },
                'children' : [ { 'text' : 'Child 1' }, 'Child 2']
            }
        ]
    });

但经过一些操作后，我想用新数据重绘树。我尝试使用 API 中的 refresh 和 redraw 方法，但没有成功。

你能给我建议吗，如何刷新树（不破坏 -> 创建新实例（它可以工作，但会影响性能））？

【问题讨论】：

有两个常用的 jQuery 插件，叫做 jsTree。此问题适用于此处找到的问题：jstree.com，看起来像是 v3.0 语法。我还想吹走我加载的一棵树，并将其替换为仅包含根节点的新树。在修补 create 或 create_node 以开始创建新树时没有太多运气。我在 JS 中没有收到任何错误，但没有看到正在呈现任何树更改。因此，对这个问题的任何反馈也非常感兴趣，因为这与我要问的问题完全相同。
最终对我有用（没有看到替换树，即使使用“刷新”命令）是在核心参考中包含 check_callback 参数并将其设置为 true。然后我可以看到我替换的树。将发布包含这些详细信息的答案。

标签： jquery jstree

【解决方案1】：

在版本 3 中，您可以重新加载树：

$('#treeId').jstree(true).settings.core.data = newData;
$('#treeId').jstree(true).refresh();

【讨论】：

我希望 OP 没有一直在等待。
可能没有，但它确实帮助了我。

【解决方案2】：

refresh() 将树刷新到它的初始状态，这意味着新创建的节点被删除

你想要的是redraw(true)

【讨论】：

【解决方案3】：

尝试在您的核心设置中包含 check_callback 参数（包括初始加载）并确保将其设置为 true。然后您应该能够看到所做的任何更改。没有这个，我发现我看不到替换数据，只有原始数据。

$('#tree').jstree({
'core' : {
    'check_callback' : true,
    'data' : [
        'Simple root node',
        {
            'id' : 'node_2',
            'text' : 'Root node with options',
            'state' : { 'opened' : true, 'selected' : true },
            'children' : [ { 'text' : 'Child 1' }, 'Child 2']
        }
    ]
});

这为我处理了刷新部分，但根据您的操作，您也可以致电 $('#tree').jstree('refresh');。

【讨论】：

我尝试包含 'check_callback': true，但对我来说没有成功
您可能希望包含所有代码，包括一个 JS 小提琴，以防问题在于您如何更改数据而不是如何刷新？此外，要回答第二个问题，从用户的角度来看，销毁效率较低，但在时间上并不明显，所以如果这对您有用，如果事实证明这不容易解决，您可能希望坚持下去。跨度>

【解决方案4】：

你需要这个

$('#tree').jstree(true).refresh(false, true);

刷新参数:skip_loading?: boolean, forget_state?: any 参数：

skip_loading=false

意思是：你想看到加载指示器

forget_state=true: forget previous state (selections, data, etc)

【讨论】：