禁用整个 jsTree

Question

我正在使用 jsTree 并在其右侧有一个基于可以编辑/保存的选定节点的表单。目标是防止用户在编辑表单时单击树上的任何其他位置。

是否有任何方法可以临时禁用/启用树功能，同时仍保持树在视觉上可用？

我尝试使用disable_node(obj) 方法并将其应用于树的根，但似乎不是解决方案。

有什么建议吗？或者这不是 jsTree 库的可能功能？

谢谢

Answer 1

要禁用选定的节点，这样做：

var node = $("#tree").jstree().get_selected();
$("#tree").jstree().disable_node(node);

要禁用所有节点，请使用：

$('#tree li').each( function() {
    $("#tree").jstree().disable_node(this.id);
})

更新

我没有找到阻止打开禁用节点的方法，所以我也只是禁用了已关闭节点的所有子节点。

查看演示：Fiddle

Answer 2

编辑正如@charles 指出的那样禁用节点不会禁用菜单插件（至少使用自定义菜单）或拖放 - 添加第 4 点来解决这个问题

禁用整棵树

1. 禁用所有渲染节点 - 通过 id 禁用每个节点或获取一个 id 数组以对“disable_node”进行一次调用
2. 禁止打开新节点 - 拦截并阻止打开图标上的点击事件
3. 禁止双击打开新节点-修改当前树设置
4. 如果用户可以以任何方式修改树，请暂时禁用所有修改设置core.check_callback = false

注意第 2 点基于未记录的功能，并且（鉴于 jstree 插件的历史）可能在未来的版本中不起作用

查看 sn-p 以获取演示

var data1 = [{
  "id": "W",
  "text": "World",
  "state": { "opened": true },
  "children": [{"text": "Asia"}, 
               {"text": "Africa"}, 
               {"text": "Europe",
                "state": { "opened": false },
                "children": [ "France","Germany","UK" ]
  }]
}];

$('#Tree').jstree({ 
    core: {data: data1, 
    check_callback: true
  }, 
  plugins: ['dnd','contextmenu','checkbox']
})

function DisableFlawed() {
  // this is not enough 
  $('#Tree li.jstree-node').each(function() {
    $('#Tree').jstree("disable_node", this.id)
  })
}  
function Disable() {
  // disable visible nodes
  $('#Tree li.jstree-node').each(function() {
    $('#Tree').jstree("disable_node", this.id)
  })
  // block open new nodes
  $('#Tree i.jstree-ocl')
  .off('click.block')
  .on('click.block', function() {
    return false;
    });
  // eventually... dbl click
  $('#Tree').jstree().settings.core.dblclick_toggle = false;
  // eventually... block all edits
  $('#Tree').jstree().settings.core.check_callback = false;
}  
function Enable() {
  // enable again visible nodes
  $('#Tree li.jstree-node').each(function() {
    $('#Tree').jstree("enable_node", this.id)
  });
  // ublock open new nodes
  $('#Tree i.jstree-ocl')
  //
  .off('click.block');
  // eventually... dbl click
  $('#Tree').jstree().settings.core.dblclick_toggle = true;
  // eventually... unblock all edits
  // set to true OR reset to whatever user defined function you are using
  $('#Tree').jstree().settings.core.check_callback = true;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" type="text/css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
<button onclick="DisableFlawed()">Disable (bad)</button>
<button onclick="Disable()">Disable (ok)</button>
<button onclick="Enable()">Enable</button>
<div id="Tree"></div>

Answer 3

除了 Nikolay Ermakov 的回答之外，禁用节点不会禁用菜单插件（至少使用自定义菜单）或拖放。如果你想这样做，你需要在这些函数中添加一个额外的检查（用JsTree 3.2.1测试）

$('#tree').jstree({
    // ...
    contextmenu: {
        items: customMenu
    },
    dnd: {
        is_draggable: function (node) {
            return !node[0].state.disabled;
        }
    },
});

function customMenu(node)
{
    if (node.state.disabled)
        return false;

    // usual menu generation code
}

另一种方法是使用 jQuery BlockUI plugin 在 jsTree 之外进行一些常规阻塞。

Answer 4

这个怎么样？

// get an instance of jstree.
var tree = $.jstree.create('#tree', { ... });

// disable all nodes with one line.
tree.disable_node(tree.get_json(null, { flat: true }));