Как получить всех дочерних элементов для просмотра дерева?

Question

У меня есть такие данные в формате json

  "data":[ 
      { 
         "taskAssignGroupId":123,
         "taskAssignGroupName":"Parent Pool",
         "taskAssignGroupDesc":"Parent Pool Desc",
         "state": true,
         "childPools":[ 
            { 
               "taskAssignGroupId":124,
               "taskAssignGroupName":"Child Pool Name",
               "taskAssignGroupDesc":"Child Pool Desc",
               "state":true,
               "childPools":[ 
                  { 
                     "taskAssignGroupId":125,
                     "taskAssignGroupName":"Child Child Pool Name",
                     "taskAssignGroupDesc":"Child Child Pool Desc",
                     "state":true,
                     "childPools":[ 

                     ]
                  }
               ]
            }
         ]
      }
]

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

Основная проблема в том, что детский бассейн может быть бесконечным. То есть детских бассейнов может быть 1, 5 и более. Так что в моем коде я могу получить только 1 ребенка.

Как я могу показать все дочерние элементы с помощью функции $.each или другого варианта?

Поэтому я использую $.each для получения таких данных, как

var htmlStr = "";
var checked = '';
$.each(dataSet.data, function (itemId, item) {
    htmlStr += '<li><i class="fa fa-plus"></i> <label> <input id="' + item.taskAssignGroupId+ '"  type="checkbox" />' + item.taskAssignGroupName+ '</label>'
    htmlStr += '<ul>'
    $.each(item.childPools, function (index, child) {
        if (child.state) {
            checked = 'checked=checked';
        }
        else {
            checked = '';

        }
        htmlStr += '<li><label><input ' + checked + ' class="hummingbird-end-node" id="' + child.taskAssignGroupId+ '" type="checkbox" />' + child.taskAssignGroupName+ "-" + child.taskAssignGroupDesc+ '</label></li>'
    });

    htmlStr += '</ul>'
    htmlStr += '</li>'
});

$('#treeview').html(htmlStr)

$("#treeview").hummingbird();

Спасибо!

Answer 1

Взгляните на демо,

Я создал функцию, которую мы вызываем каждый раз, когда у нас есть дочерний пул с данными.

function pool(pools) {
  $.each(pools, function(index, child) {
    if (child.state) {
      checked = 'checked=checked';
    } else {
      checked = '';
    }
    htmlStr += '<li><label><input ' + checked + ' class="hummingbird-end-node" id="' + child.taskAssignGroupId + '" type="checkbox" />' + child.taskAssignGroupName + "-" + child.taskAssignGroupDesc + '</label></li>'

    if (child.childPools.length > 0) {
      htmlStr += '<ul>'
      pool(child.childPools)
      htmlStr += '</ul>'
    }
  });
}

РАБОЧАЯ ДЕМО

var dataSet = {
  "data": [{
    "taskAssignGroupId": 123,
    "taskAssignGroupName": "Parent Pool",
    "taskAssignGroupDesc": "Parent Pool Desc",
    "state": true,
    "childPools": [{
      "taskAssignGroupId": 124,
      "taskAssignGroupName": "Child Pool Name",
      "taskAssignGroupDesc": "Child Pool Desc",
      "state": true,
      "childPools": [{
        "taskAssignGroupId": 125,
        "taskAssignGroupName": "Child Child Pool Name",
        "taskAssignGroupDesc": "Child Child Pool Desc",
        "state": true,
        "childPools": [

        ]
      }]
    }]
  }]
}


var htmlStr = "";
var checked = '';
$.each(dataSet.data, function(itemId, item) {
  htmlStr += '<li><i class="fa fa-plus"></i> <label> <input id="' + item.taskAssignGroupId + '"  type="checkbox" />' + item.taskAssignGroupName + '</label>'
  htmlStr += '<ul>'
  if (item.childPools.length > 0) {
    pool(item.childPools)
  }


  htmlStr += '</ul>'
  htmlStr += '</li>'
});

function pool(pools) {
  $.each(pools, function(index, child) {
    if (child.state) {
      checked = 'checked=checked';
    } else {
      checked = '';
    }
    htmlStr += '<li><label><input ' + checked + ' class="hummingbird-end-node" id="' + child.taskAssignGroupId + '" type="checkbox" />' + child.taskAssignGroupName + "-" + child.taskAssignGroupDesc + '</label></li>'

    if (child.childPools.length > 0) {
      htmlStr += '<ul>'
      pool(child.childPools)
      htmlStr += '</ul>'
    }
  });
}

$('#treeview').html(htmlStr)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="treeview">
</ul>