将JSON数据呈现到Bootstrap嵌套HTML-JQuery插件

Question

I am trying to create a plugin that accepts data in JSON format. 我正在尝试创建一个接受JSON格式数据的插件。 I would like the output to look like this: https://jsfiddle.net/ann7tctp/330/ 我希望输出看起来像这样： https : //jsfiddle.net/ann7tctp/330/

I am trying to setup a recursive function but cannot get my head around it. 我正在尝试设置递归函数，但无法解决。 The nested list depth is unknown. 嵌套列表的深度未知。 Please see the updated fiddle for more about what I am trying to achieve. 请参阅更新的小提琴，以获取有关我要实现的目标的更多信息。

Any help is much appreciated! 任何帮助深表感谢！

<html>
<style>
.list-group.list-group-root {
    padding: 0;
    overflow: hidden;
}

.list-group.list-group-root .list-group {
    margin-bottom: 0;
}

.list-group.list-group-root .list-group-item {
    border-radius: 0;
    border-width: 1px 0 0 0;
}

.list-group.list-group-root > .list-group-item:first-child {
    border-top-width: 0;
}

.list-group.list-group-root > .list-group > .list-group-item {
    padding-left: 30px;
}

.list-group.list-group-root > .list-group > .list-group > .list-group-item {
    padding-left: 45px;
}

.list-group-item .glyphicon {
    margin-right: 5px;
}

</style>
<h1>Expected Output</h1>
<ul class="list-group list-group-root well">

  <li href="#item-1" class="list-group-item" data-toggle="collapse">
    <i class="glyphicon glyphicon-chevron-right"></i>Item 1
  </li>

  <ul class="list-group collapse" id="item-1">

    <li href="#item-1-1" class="list-group-item" data-toggle="collapse">
      <i class="glyphicon glyphicon-chevron-right"></i>Item 1.1
    </li>

    <ul class="list-group collapse" id="item-1-1">
      <li href="#" class="list-group-item">Item 1.1.1</li>
      <li href="#" class="list-group-item">Item 1.1.2</li>
      <li href="#" class="list-group-item">Item 1.1.3</li>
    </ul>

    <li href="#item-1-2" class="list-group-item" data-toggle="collapse">
      <i class="glyphicon glyphicon-chevron-right"></i>Item 1.2
    </li>

    <ul class="list-group collapse" id="item-1-2">
      <li href="#" class="list-group-item">Item 1.2.1</li>
      <li href="#" class="list-group-item">Item 1.2.2</li>
      <li href="#" class="list-group-item">Item 1.2.3</li>
    </ul>

    <li href="#item-1-3" class="list-group-item" data-toggle="collapse">
      <i class="glyphicon glyphicon-chevron-right"></i>Item 1.3
    </li>
    <ul class="list-group collapse" id="item-1-3">
      <li href="#" class="list-group-item">Item 1.3.1</li>
      <li href="#" class="list-group-item">Item 1.3.2</li>
      <li href="#" class="list-group-item">Item 1.3.3</li>
    </ul>

  </ul>

</ul>

<h1>JSON Data Output</h1>

<div id="nested-categories"></div>

<script>
$(function() {

var data = [
  {
    "id": 1,
    "name": "Uncategorized",
    "children": []
  },
  {
    "id": 3,
    "name": "Parent 1",
    "children": [
      {
        "id": 4,
        "name": "Child 1"
      },
      {
        "id": 5,
        "name": "Child 2"
      },
      {
        "id": 6,
        "name": "Child 3"
      }
    ]
  },
  {
    "id": 7,
    "name": "Parent 2",
    "children": [
      {
        "id": 8,
        "name": "Child 1"
      },
      {
        "id": 9,
        "name": "Child 2"
      },
      {
        "id": 10,
        "name": "Child 3"
      }
    ]
  }
];

var isInitTree = true;

    function buildTreeWithJSONArray(json,root) {

            if(isInitTree){
                isInitTree = false;
                //Create Initial element
                root.append('<ul class="list-group list-group-root in well"></ul>');
            }else{
                root.find("ul:first").append('<ul class="list-group"></ul>');
            }

            for (var i = 0; i < json.length; i++) {

                var $li = $("<li class='list-group-item' data-id='" + json[i].id + "'><span class='list-group-content'>" + json[i].name + "</span></li>");

                root.find("ul:first").append($li);

                if (typeof json[i].children !== 'undefined') {

                    //$li.data("toggle","collapse").prepend('<i class="fa fa-arrow-right"></i> ').attr('href','#list-'+json[i].id);

                    //root.find('ul.list-group:first').attr("id",'list-'+json[i].id).addClass('collapse');

                    buildTreeWithJSONArray(json[i].children, $li);
                }
            }
        }


        //Run the Recursive function..

   buildTreeWithJSONArray(data,$("#nested-categories"));




  $('.list-group-item').on('click', function() {
    $('.glyphicon', this)
      .toggleClass('glyphicon-chevron-right')
      .toggleClass('glyphicon-chevron-down');
  });

});
</script>
</html>

Answer 1

What is happening with your code is, when you are calling the recursive function, you are validating whether the root is the init Tree, and of course it will not be as it the variable isInitTree has been updated to false , hence your code says, it should find a ul inside the root element, when in your case, is the li element you are sending as a parameter. 您的代码正在发生的事情是，当您调用递归函数时，您正在验证根是否为init树，并且当然不会，因为变量isInitTree已更新为false ，因此您的代码说，它应该在根元素内找到一个ul在这种情况下，是您要作为参数发送的li元素。

It will not find any ul elements as there are not any inside the li you have sent so it will do nothing. 它不会找到任何ul元素，因为您发送的li内部没有任何元素，因此它不会执行任何操作。

try: 尝试：

if(isInitTree){
    isInitTree = false;
    //Create Initial element
    root.append('<ul class="list-group list-group-root in well"></ul>');
 }else{
    root.append('<ul class="list-group"></ul>');
}

Please see your updated fiddle , which will hopefully put you in the right direction. 请查看更新的小提琴，希望它将为您提供正确的方向。

将JSON数据呈现到Bootstrap嵌套HTML-JQuery插件

问题描述

1 个解决方案

解决方案1
1 已采纳 2017-04-27 19:25:32

将JSON数据呈现到Bootstrap嵌套HTML-JQuery插件

问题描述

1 个解决方案

解决方案1 1 已采纳 2017-04-27 19:25:32

解决方案1
1 已采纳 2017-04-27 19:25:32