Jstree чекбокс манипуляции - PullRequest
Новая
       5

Jstree чекбокс манипуляции

13 голосов
/ 28 марта 2012

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

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

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

Ответы [ 4 ]

8 голосов
/ 14 мая 2015

Начиная с версии 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' - включено каскадное уменьшение, если в строке 'undefined' - будут использоваться неопределенные узлы.Если для three_state установлено значение true, для этого параметра автоматически устанавливается значение «вверх + вниз + не определено».По умолчанию используется значение ''.

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

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

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

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

8 голосов
/ 26 апреля 2012

Посмотрите на опции 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]');
        })

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

1 голос
/ 12 мая 2014

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

$('#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);
  }
});
1 голос
/ 10 мая 2013

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