jstree复选框操作

jstree checkbox manipulation

本文关键字：操作 复选框 jstree      更新时间：2023-09-26

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

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

我搜索了API文档，但没有找到任何内容。

查看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]');
        })

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

从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演示

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

来自文件：

three_state：一个布尔值，指示复选框是否应级联并且具有未确定的状态。默认为true。

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

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

EDIT我刚刚检查了v3.3.0，尽管文档中对这些属性进行了更改（在我看来，情况更糟），但代码仍然有效。同时，尽管这些属性似乎在它们的API中列出：three_state和cascade，并且在编写本文时，这些属性似乎比源代码有更好的文档。

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

希望这能有所帮助！

这就是我使用的。没有其他的简洁，但有效：

$('#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);
  }
});

根据这个问题，我有类似的要求，并尝试了@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"
    ]
})
相关文章：