Получение всех выбранных узлов в jstree при проверке события? - PullRequest
Новая
       7

Получение всех выбранных узлов в jstree при проверке события?

0 голосов
/ 19 декабря 2018

Я использую get_bottom_selected, чтобы получить все отмеченные / выбранные узлы в JSTree.Когда я настраиваю кнопку в моей форме, которая вызывает следующий метод, он работает.Когда я пытаюсь вызвать ту же функцию из события щелчка флажка, она не находит никаких выбранных узлов, даже если они есть. 

function testit() {
    var data = $('#my_tree').jstree(true).get_bottom_selected(true);
    for(var count = 0; count < data.length; count++){
        // Do Stuff 
    }
}

Когда срабатывает следующее событие, я хочу вызвать функцию и получить всевыбранные дочерние узлы, но это не работает.Есть ли что-то конкретное для этого события, которое работает иначе, чем вызов из события нажатия кнопки? 

.on("check_node.jstree uncheck_node.jstree", function(e, data) {
            testit(); // first line of this function does not get any selected data, even if several are selected. When called from a button click event in my form it does work. 
            });

Вот как у меня сейчас есть настройки jstree. 

$('#my_tree')
.on("changed.jstree", function (e, data) {
    // Do Stuff
})
.jstree({
checkbox: {
    "keep_selected_style": false,
    "visible" : true,
    "three_state": true,
    "whole_node" : true,
},
plugins: ['checkbox'],
    'core' : {
    'multiple' : true,
    'data' : {
    "url" : "/static/content_data.json",
    "dataType" : "json" 
    }
}
})
.on("check_node.jstree uncheck_node.jstree", function(e, data) {
    testit();
});

Ответы [ 2 ]

0 голосов
/ 08 января 2019

Согласно этому вы можете получить все выбранные узлы on change событие, как это: 

    $('#jstree').on('changed.jstree', function (e, data) {
    var i, j, r = [];
    for(i = 0, j = data.selected.length; i < j; i++) {
      r.push(data.instance.get_node(data.selected[i]).text);
    }
    $('#event_result').html('Selected: ' + r.join(', '));
  }).jstree();
0 голосов
/ 03 января 2019

Из-за строгого режима вы получите исключение, что если вы попытаетесь использовать get_bottom_checked

TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them. at Function.invokeGetter (<anonymous>:2:14)

Вы можете использовать data.selected со своего чекаили снимите флажок с обработчика событий, если вы просто хотите идентификаторы выбранных узлов, но если вам нужно больше, вы можете использовать data.instance._model.data.Как вы можете видеть в моем примере, я пытаюсь предупредить, если выбран только один элемент, и это состояние открыто.В примере кода вы можете увидеть предупреждение, если откроете «Europe1» и установите флажок. 

var data1 = [{
  "id": "W",
  "text": "World",
  "state": {
    "opened": true
  },
  "children": [{
      "text": "Asia"
    },
    {
      "text": "Africa"
    },
    {
      "text": "Europe",
      "state": {
        "opened": false
      },
      "children": ["France", "Germany", "UK"]
    }
  ]
}];

function testit(data) {
  alert(data.length + ' and ids are ' +data );
  for (var count = 0; count < data.length; count++) {

  }
  
}
$('#Tree').jstree({
  core: {
    data: data1,
    check_callback: false
  },
  checkbox: {
    three_state: false, // to avoid that fact that checking a node also check others
    whole_node: false, // to avoid checking the box just clicking the node 
    tie_selection: false // for checking without selecting and selecting without checking
  },
  plugins: ['checkbox']
})
$('#Tree').on("check_node.jstree uncheck_node.jstree", function(e, data) {
 if (data.selected.length === 1) { alert(data.instance._model.data[data.selected].state['opened']); }
  testit(data.selected);
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" type="text/css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
<div id="Tree"></div>
...