jsTree Скрыть флажок

Question

Я использую плагин jsTree jQuery для отображения 5-уровневого дерева. Я бы не хотел показывать галочки на последнем уровне. Есть ли способ сделать это в настройке или некоторой обработке jquery, которую я могу сделать впоследствии, чтобы снять эти флажки? Я могу отключить их, используя плагин типов, но я действительно хочу, чтобы они не были видны.

Вот пример моего дерева "[x]" = флажок

[x] lvl 1
  [x] lvl 2
    [x] lvl 3
      [x] lvl 4
        [x] lvl 5a
        [x] lvl 5b
        [x] lvl 5c

Вот пример того, что я хочу "[x]" = флажок

[x] lvl 1
  [x] lvl 2
    [x] lvl 3
      [x] lvl 4
          lvl 5a
          lvl 5b
          lvl 5c

РЕДАКТИРОВАТЬ ОТВЕТ НАЙДЕНО

Нашел ответ. Добавьте .bind, который будет вызываться при загрузке дерева, затем несколько простых jquery, чтобы скрыть флажок.

$("#right-tree2").bind("loaded.jstree", function(event, data) {
   $('.lvl4').find('ins.jstree-checkbox').hide();
})
.jstree({....});

Answer 1

Если вы создаете дерево из JSON, то я обнаружил, что самый простой способ удалить узлы - это использовать некоторые CSS.

1. В реальном JSON установите a_attrполе узлов, которые вы хотите отключить для «no_checkbox», как показано ниже.Это добавит класс «no_checkbox» к элементу <a>, который содержит текст узла, значки и флажки.

   node = { text: "foo", a_attr: { class: "no_checkbox" } }

2. В css создайтеселектор, подобный этому:

   .no_checkbox>i.jstree-checkbox { display:none }

3. Готово!

Это будет выбирать только флажки, которые находятся прямо внутриЭлемент <a> с классом no_checkbox, и он удалит их из макета.Преимущество этого метода перед другими ответами состоит в том, что вы можете вернуть флажок, просто удалив класс no_checkbox из элемента <a>.Например, вы можете сделать это в обработчиках событий для события select_node.jstree, а затем получить узел DOM, который передается в качестве аргумента.

Конечно, если вы вводите данные, используя HTML вместо JSON,вы можете просто добавить класс css в html вручную или с помощью php / другого серверного языка, и он будет работать точно так же.

Answer 2

Чтобы полностью скрыть флажок от определенного узла, учитывая, что данные узла поступают с сервера, добавьте следующий код JS

$('#tree_2').on('ready.jstree', function () {
  $("#tree_2").jstree().get_node("node1_id").a_attr["class"] = "no_checkbox";
  $("#tree_2").jstree().get_node("node2_id").a_attr["class"] = "no_checkbox";

....
});

и в CSS добавьте следующий стиль

.no_checkbox > i.jstree-checkbox {
	display: none;
}

Он будет полностью скрывать флажок от предоставленного идентификатора узла, это сработало для меня. Благодаря этой ссылке .

Answer 3

Вы также можете запретить добавление их в плагин-флажок:

1. Добавьте класс к тегу <a> любого типа узла, для которого вы не хотите устанавливать флажок (я использовал то же, что и мой rel).

2. Редактировать jquery.jstree.js Плагин флажка для добавления классов в оператор .not (), где флажки добавляются в DOM. В 1.0-rc3 это выглядит примерно так (около строки 2870):

   $t.children("a" + (_this.data.languages ? "" : ":eq(0)") ).not(":has(.jstree-checkbox) // ADD THE LIST OF CLASSES HERE - BE SURE TO INCLUDE THE DOTS AND SEPARATE WITH COMMAS ").prepend("<\ins class='jstree-checkbox'>&#160;<\/ins>").parent().not(".jstree-checked, .jstree-unchecked").addClass( ts ? "jstree-unchecked" : c );
   

Таким образом, вам не нужно добавлять, а затем удалять их (плохая практика, если этого можно избежать).

Answer 4

Я нашел другое решение, используя css. Этот простой код скрывает флажок в первом слое

.jstree-container-ul>li>a>i.jstree-checkbox
{
    display:none
}

Answer 5

попробуйте это,

$("#right-tree2").bind("loaded.jstree", function(e, data) {
    var currentNode = data.rslt.obj.attr("id");
    var nodeLevel = data.inst.get_path().length;
    if(nodeLevel == 4){
         $('#'+currentNode).find('> a > .jstree-checkbox').remove();
    }
})