jstree复选框操作

Question

我有一个 jstree，每个节点都有一个复选框。我想实现以下目标。让我知道 api 的哪个方法或部分可以帮助我们做到这一点。

1. 我不想在选择父节点时检查任何子节点。目前所有孩子都被选中。
2. 如果检查了任何子节点，则检查其所有父节点。目前父节点被部分检查（正方形）。我想完全删除部分选择。那就是我想完全改变 jstree 复选框的行为。

我搜索了 API 文档，但一无所获。

Answer 1

看看 real_checkboxes 选项。这可能会让你开始：

        $("#jstree").jstree({
           "checkbox": {
              real_checkboxes: true,
              real_checkboxes_names: function (n) {
                 var nid = 0;
                 $(n).each(function (data) {
                    nid = $(this).attr("nodeid");
                 });
                 return (["check_" + nid, nid]);
              },
              two_state: true
           },
           "plugins": ["themes", "json_data", "ui", "checkbox"]
        })
        .bind('open_node.jstree', function (e, data) {
           $('#jstree').jstree('check_node', 'li[selected=selected]');
        })

您可能需要更改绑定行为，以便在检查子项时检查父项。

Answer 2

从 JSTree 3.1.1 版开始，我会这样做：

$('#data').jstree({
    'core' : {
        'data' : [
            { "text" : "Root node", "children" : [
                    { "text" : "Child node 1" },
                    { "text" : "Child node 2" }
            ]},
            { "text" : "Root node 2", "children" : [
                    { "text" : "Child node 1" },
            ]}
        ]
    },
    'checkbox': {
        three_state: false,
        cascade: 'up'
    },
    'plugins': ["checkbox"]
});

JSFiddle Demo

请注意，这里的神奇之处在于复选框参数。

来自文档：

three_state：一个布尔值，指示复选框是否应该向下级联 并且处于未确定状态。默认为true。

---

级联：此设置控制级联和未确定节点的方式 被应用。如果 'up' 在字符串中 - 启用级联，如果 “down”在字符串中 - 如果“未确定”，则启用级联向下 在字符串中 - 将使用未确定的节点。如果three_state 设置为true 此设置自动设置为 “上+下+未确定”。默认为 ''。

此文档位于 v.3.1.1 的源代码中

编辑我刚刚检查了 v3.3.0，尽管文档更改了这些属性（在我看来，更糟），code works just the same。与此同时，虽然看起来这些属性列在它们的 API 中：three_state 和 cascade，并且在撰写本文时，它的文档似乎比源代码更好。

请记住，如果您在父节点下有多个子节点，则仅检查其中一个子节点不会检查父节点。必须检查所有节点才能在父节点上生效。

希望这会有所帮助！

Answer 3

这是我用的。不像其他的那样简洁，但有效：

$('#jstree').jstree( {
  "plugins" : ["checkbox"],
  "checkbox": {
    "three_state": false
  }
}).on("select_node.jstree", function (e, data) {
  var selectedNode;
  if (data.selected.length == 1) {
    lastSelected = data.selected.slice(0);
    selectedNode = data.selected[0];
  } else {
    // Get the difference between lastselection and current selection
    selectedNode = $.grep(data.selected, function(x) {return $.inArray(x, lastSelected) < 0});
    lastSelected = data.selected.slice(0); // trick to copy array
  }
  // Select the parent
  var parent = data.instance.get_node(selectedNode).parent;
  data.instance.select_node(parent);
}).on("deselect_node.jstree", function (e, data) {
  // Get the difference between lastselection and current selection
  var deselectedNode = $.grep(lastSelected,function(x) {return $.inArray(x, data.selected) < 0})
  , children = data.instance.get_children_dom(deselectedNode);
  if (children.length) {
    children.each(function(i, a) {
      data.instance.deselect_node(a);
      lastSelected = data.selected.slice(0);
    });
  } else {
    lastSelected = data.selected.slice(0);
  }
});

Answer 4

根据问题，我有类似的要求，并尝试了上面的@chris 答案，但建议的答案没有成功。

这是我为使其正常工作所做的工作

.bind('check_node.jstree', function (e, data) { //check all parent nodes
    //var currentNode = data.rslt.obj.attr("id");
        var parentNode =  data.rslt.obj.attr("parent_id")
        $('#demo').jstree('check_node', '#'+parentNode);
})
.bind('uncheck_node.jstree', function (e, data) {//uncheck all child nodes
    var allChildNodes = data.inst._get_children(data.rslt.obj);
        allChildNodes.each(function(idx, listItem) { 
            $('#demo').jstree('uncheck_node', '#'+$(listItem).attr("id"));
        });
})
.jstree({ 
// List of active plugins
    "checkbox": {
        real_checkboxes: true,
            two_state: true,
            checked_parent_open: true,
            override_ui:true
    },
    "plugins" : [ 
        "themes","json_data","ui","cookies","dnd","search","types","hotkeys","contextmenu","crrm", "checkbox"
    ]
})