如何获取 child 中所有 child 的树视图？

Question

我有一个 return 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":[ 

                     ]
                  }
               ]
            }
         ]
      }
]

正如您在示例中看到的那样，我有一个 parent 池和 parent 池中的 child。

主要问题是child池可以是无限的。我的意思是 child 个池可以是 1 个、5 个或更多。所以在我的代码中我只能得到 1 child。

如何使用 $.each 函数或使用其他选项显示所有 child？

所以我使用 $.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

看看演示，

我创建了一个我们调用的函数，每当我们有一个带有数据的 childPools 时。

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>

如何获取 child 中所有 child 的树视图？

How to get all childs in child for treeview?

treeview

jquery

hummingbird