Могу ли я установить флажок jstree только для родителей с детьми?

1

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

Что-то вроде этого. Я могу выбрать одного ребенка или его непосредственного родителя, который выберет всех детей.

parent01
    parent02
        parent03[]
            child01[]
            child02[]
            child03[]
                parent04[]
                    child04[]
        parent05[]
            child05[]
    parent06
        parent07
            parent08[]
                child06[]
                child07[]
Теги:
checkbox
jstree

2 ответа

0

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

Чтобы скрытые флажки не проверялись щелчком по узлу, свойства плагина флажка whole_node и tie_selection должны быть установлены в false.

Следующий код читает данные дерева и проверяет для каждого узла дерева, есть ли у родительского узла родительский узел - давайте назовем его родительским узлом. Если это так, свойство видимости css флажка узла-прародителя устанавливается на скрытое.

var to_hide = []; // ids of nodes that won't have checkboxes

/* get the tree data and find the nodes that have 
   children with children
*/
function getGrandparents() {
  // tree data
  var item = $('#data').jstree(true).get_json('#', {flat:true});
  console.log(JSON.stringify(item, undefined, 2));
  var parent, grandparent;
  // var nodeIds = item.map(x => x.id);  // ids of nodes in object item
  var nodeIds = item.map(function(x){return x.id;});  // ids of nodes in object item
  for (var i = 0; i < item.length; i += 1) {
    if (has_parent(item[i])) {
      parent = item[nodeIds.indexOf(item[i].parent)];
      if (has_parent(parent)) {
        grandparent = parent.parent + '_anchor';  // node with id grandparent is parent of parent
                                                  // and therefore shouldn't have a checkbox
        if (to_hide.indexOf(grandparent) < 0) {
          to_hide[to_hide.length] = grandparent;  // load id into array of checkboxes that will 
                                                  // be hidden
        }
      }
    }
  }
  function has_parent(who) {
    return ((typeof who.parent !== 'undefined') && (who.parent !== '#'));
  }
}

function hideGrandparents() {
  var gpa;
  // set visibility of checkbox nodes in to_hide to hidden
  for (var n = 0; n < to_hide.length; n += 1) {
    gpa = document.getElementById(to_hide[n]);
    if (gpa != null ) {
      gpa.getElementsByClassName('jstree-checkbox')[0].style.visibility = 'hidden';
    }
  }
}
  
$('#data').jstree({
  'core' : {
    'data' : [
      { "text" : "Root node",
        "children" : [
	      { "text" : "Child node 1 1", 
            "children" : [
              { "text" : "Child node 1 1 1" },
              { "text" : "Child node 1 1 2" }
            ] 
          },
          { "text" : "Child node 1 2",
            "children" : [
              { "text" : "Child node 1 2 1",
                "children" : [
                  { "text" : "Child node 1 2 1 1" },
                  { "text" : "Child node 1 2 1 2" }
                ]                
              },
              { "text" : "Child node 1 2 2" }
            ]          
          }
        ]
      },
      { "text" : "Root node 2",
        "children" : [
          { "text" : "Child node 2 1" },
        ]
      }
    ]
  },
  'checkbox': {
    three_state: false,
    whole_node: false,    // should be set to false. otherwise checking the hidden checkbox
                          // could be possible by clicking the node
    tie_selection: false, // necessary for whole_node to work
    cascade: 'up down'
  },
  'plugins': ["checkbox"]
}).on("ready.jstree", function() {
  getGrandparents();
  hideGrandparents();  // hide checkboxes of root nodes that have children with children
}).on("open_node.jstree", hideGrandparents);
<link href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.1.1/themes/default/style.min.css" rel="stylesheet"/>

<div id="data"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.7/jstree.min.js"></script>
  • 0
    Обновленный ответ с живым примером. IE поддерживается в Версии 9 или выше из-за Array.prototype.indexOf .
  • 0
    Спасибо, это то, что я искал.
Показать ещё 1 комментарий
0

Рабочий пример этого демонстрируется на этом сайте:

demos.wijmo.com/TreeView

Этот пример, однако , не ограничивает флажки только для родителей с детьми

  • 0
    В вопросах конкретно говорится «только на родителя, у которого есть дети без детей». Это не так с этим примером;
  • 0
    Однако я понимаю, что этот пример отвечает всем другим требованиям, которые запрашивал ОП

Ещё вопросы

Сообщество Overcoder
Наверх
Меню