如何向 sortable/nestedSortable 响应添加和 return 一个额外的（第二个）属性？

Question

我有一个使用 sortable/nestedSortable 的列表。我想要的是 return 第二个属性。我的意思是除了默认的 returning id (menuItem_n) 我还想 return 第二个属性，例如数据类型。我知道我可以自定义属性并更改默认属性（即 id），但如何添加额外的属性。

例如：

  <ol class="sortable">
    <li id="menuItem_1" data-type="type_1">Item A1</li>
    <li id="menuItem_2" data-type="type_1">Item A2</li>
    <li id="menuItem_3" data-type="type_1">Item A3</li>
    <li id="menuItem_4" data-type="type_2">Item B1</li>
    <li id="menuItem_5" data-type="type_2">Item B2</li>
    <li id="menuItem_6" data-type="type_2">Item B3</li>
  </ol>

然后用类似的东西传递它：

$('ol.sortable').nestedSortable('serialize', {attribute: 'id, data-type'});

Answer 1

好吧，我错过了一些关于 nestedSortable plugin. Actually I missed it because it was an update 的东西，它还没有添加到插件的文档中（还）。根据此更新，您现在可以将 data-* 属性添加到 li 元素，稍后您可以 return 使用 toHierarcy 输出。至于例子：

  <ol class="sortable">
    <li id="menuItem_1" data-type="type_1">Item A1</li>
    <li id="menuItem_2" data-type="type_1">Item A2</li>
    <li id="menuItem_3" data-type="type_1">Item A3</li>
    <li id="menuItem_4" data-type="type_2">Item B1</li>
    <li id="menuItem_5" data-type="type_2">Item B2</li>
    <li id="menuItem_6" data-type="type_2">Item B3</li>
  </ol>

所以当你使用：

$('ol.sortable').nestedSortable('toHierarchy');

你会return一个像这样的字符串：

      array (
        'id' => '1',
        'type' => 'type_1',
      ),
      1 => 
      array (
        'id' => '2',
        'type' => 'type_1',
      ),
      2 => 
      array (
        'id' => '3',
        'type' => 'type_1',
      ),
      3 => 
      array (
        'id' => '3',
        'type' => 'type_2',
      ),
      4 => 
      array (
        'id' => '4',
        'type' => 'type_2',
      ),
      5 => 
      array (
        'id' => '5',
        'type' => 'type_2',
      )

当然，之后您必须将字符串转换为数组，这没什么大不了的。 只需将结果放入一个变量中，这样就得到了数组。请注意，id 仍然是拆分的，因此您只得到数字部分，但您将得到 data-* 属性作为一个整体。