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

我有类似的要求，每个问题和以上尝试@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" 
    ] 
}) 

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

由于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：一个boolean值，指示复选框都应该向下级联 和具有不确定的状态。默认为true。

---

级联：此设置控制如何级联和不确定的节点 应用。如果'up'在字符串中 - 级联处于启用状态，如果 'down'在字符串中 - 则启用级联关闭，如果'undetermined' 位于字符串中 - 将使用未确定的节点。如果three_state 设置为true此设置自动设置为 '上+下+未确定'。默认为''。

本文档中发现的源代码内的v.3.1.1

编辑我只是检查V3.3。0，尽管这些属性的文档已更改（在我看来，更糟糕的情况下）是code works just the same。与此同时，尽管看起来这些属性在其API中列出：three_state和cascade，并且在编写此文件时似乎比源代码具有更好的文档。

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

希望这会有所帮助！