Question

我正在使用以下javascript函数将JSON转换为html列表但由于第一个节点未被很好地捕获，因此脚本不起作用。要使用le NestedSortable jQuery插件，必须将所有节点封装在div标记中。此外，第一个节点（名为Flare）应该满足他所有的孩子，而不是顶部的唯一节点。对你的灯来说是

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>

Answer 1

主要问题是你在每个函数中调用hg import --no-commit changes.patch ...但是从http调用返回的对象不是数组

getList

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; }

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

1 个答案: