Json到嵌套列表:第一个节点未捕获

Json to nested list : First node not captured

本文关键字：节点 第一个 嵌套 列表 Json      更新时间：2023-09-26

我正在使用以下javascript函数将JSON转换为html列表，但由于第一个节点没有被很好地捕获，因此脚本无法工作。要使用le NestedSortable jQuery插件，所有节点都必须封装在div标记中。此外，第一个节点（名为Flare）应该包含他的所有子节点，而不是顶部的唯一节点。Thx为您的灯光

function getList(item, $list) {
  if ($.isArray(item)) {
    $.each(item, function(key, value) {
      getList(value, $list);
    });
    return;
  }
  if (item) {
    console.log(item);
    var $li = $('<li />');
    if (item.name) {
      $li.append($('<div>' + item.name + '</div>'));
    }
    if (item.children && item.children.length) {
      var $sublist = $("<ol/>");
      getList(item.children, $sublist)
      $li.append($sublist);
    }
    $list.append($li)
  }
}
$(function() {
  var $ol = $('<ol id="sTree2" class="sTree2"></ol>');
  $.getJSON('https://bitbucket.org/john2x/d3test/raw/2ce4dd5112448088fe357b8179d1088ef19524b8/d3/examples/data/flare.json', function(json) {
    $.each(json, function(key, value) {
      getList(value, $ol);
    })
  });
  //getList(value.node, $ul);
  $ol.appendTo("#main-lists-container");
  $('.sTree2').nestedSortable({
    disableNesting: 'no-nest',
    forcePlaceholderSize: true,
    handle: 'div',
    helper: 'clone',
    items: 'li',
    maxLevels: 0,
    opacity: .6,
    placeholder: 'placeholder',
    revert: 250,
    tabSize: 25,
    tolerance: 'pointer',
    toleranceElement: '> div',
    /* The magic tric: */
    connectWith: '.sortable'
  });
});
ol.sTree{ padding:0px; background-color:#151515; }
ol.sTree2 li, ol#sortableListsBase li { padding-left:50px; margin:5px; border:1px solid #3f3f3f; background-color:#3f3f3f; }
ol li div { padding:7px; background-color:#222; Nborder:1px solid #3f3f3f; }
ol li, ol li div { border-radius: 3px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="http://mjsarfatti.com/sandbox/nestedSortable/jquery.mjs.nestedSortable.js"></script>
<div id="main-lists-container"></div>

主要问题是在每个函数内部调用getList。。。但是http调用返回的对象不是数组

function getList(item, $list) {
  if ($.isArray(item)) {
    $.each(item, function(key, value) {
      getList(value, $list);
    });
    return;
  }
  if (item) {
    console.log(item);
    var $li = $('<li />');
    if (item.name) {
      $li.append($('<div>' + item.name + '</div>'));
    }
    if (item.children && item.children.length) {
      var $sublist = $("<ol/>");
      getList(item.children, $sublist)
      $li.append($sublist);
    }
    $list.append($li)
  }
}
$(function() {
  var $ol = $('<ol id="sTree2" class="sTree2"></ol>');
  $.getJSON('https://bitbucket.org/john2x/d3test/raw/2ce4dd5112448088fe357b8179d1088ef19524b8/d3/examples/data/flare.json', function(json) {
      
      getList(json, $ol);
   
  });
  //getList(value.node, $ul);
  $ol.appendTo("#main-lists-container");
  $('.sTree2').nestedSortable({
    disableNesting: 'no-nest',
    forcePlaceholderSize: true,
    handle: 'div',
    helper: 'clone',
    items: 'li',
    maxLevels: 0,
    opacity: .6,
    placeholder: 'placeholder',
    revert: 250,
    tabSize: 25,
    tolerance: 'pointer',
    toleranceElement: '> div',
    /* The magic tric: */
    connectWith: '.sortable'
  });
});
ol.sTree{ padding:0px; background-color:#151515; }
ol.sTree2 li, ol#sortableListsBase li { padding-left:50px; margin:5px; border:1px solid #3f3f3f; background-color:#3f3f3f; }
ol li div { padding:7px; background-color:#222; Nborder:1px solid #3f3f3f; }
ol li, ol li div { border-radius: 3px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="http://mjsarfatti.com/sandbox/nestedSortable/jquery.mjs.nestedSortable.js"></script>
<div id="main-lists-container"></div>

相关文章：