Question

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

有没有办法临时禁用/启用树功能，同时仍保持树在视觉上可用？

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

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

由于

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点照顾这个

禁用整个树

禁用所有呈现的节点 - 通过id 禁用每个节点或获取一组id以对“disable_node”执行单次调用
禁止打开新节点 - 拦截并阻止打开图标上的点击事件
禁止双击打开新节点 - 修改当前树设置
如果树以任何方式可由用户修改，则临时禁用所有修改设置core.check_callback = false

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

请参阅代码段

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

禁用整个jsTree

4 个答案: