Манипуляция jstree checkbox

У меня есть jstree с флажком для каждого узла. Я хочу добиться следующего. Позвольте мне знать, какой метод или часть api помогает нам это сделать.

Я не хочу проверять дочерние узлы, когда выбран родительский node. В настоящее время все дети выбираются.
Если отмечен какой-либо дочерний элемент node, проверьте все его родительские node. В настоящее время родительские узлы частично проверяются (квадрат). Я хочу полностью удалить частичный выбор. То есть я хочу полностью изменить поведение флажков jstree.

Я искал API-документы, но ничего не нашел.

Ответ 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]');
        })

Вам, вероятно, потребуется изменить поведение привязки, чтобы он проверял родителя при проверке дочернего элемента.

Ответ 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.

каскад. Этот параметр определяет, как каскадные и неопределенные узлы применяются. Если "вверх" находится в строке - включен режим каскадирования, если "down" находится в строке - включен режим каскадирования вниз, если "undefined" находится в строке - будут использоваться неопределенные узлы. Если three_stateустановлен на true, эта настройка автоматически устанавливается на "Вверх + вниз + неопределенными. По умолчанию".".

Эта документация была найдена внутри исходного кода для v.3.1.1

EDIT Я только что проверил v3.3.0, и хотя документация изменилась для этих атрибутов (по-моему, к худшему), работает так же. Тем не менее, похоже, что эти атрибуты перечислены в их API: three_state и cascade, а на момент написания это, похоже, имеет лучшую документацию, чем исходный код.

Имейте в виду, что если у вас есть несколько дочерних узлов под родителем, проверка только одного из них не будет проверять родителя. Все узлы должны быть проверены, чтобы вступить в силу для родителя.

Надеюсь, это поможет!

Ответ 3

У меня было аналогичное требование в соответствии с вопросом и попытался ответить на @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"
    ]
})

Ответ 4

Это то, что я использовал. Это не так сложно, как другие, но работает:

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