jquery – 如何在sortable / nestedSortable响应中添加和返回额外(第二个)属性？

2024年1月17日 147次阅读

我有一个使用sortable / nestedSortable的列表.我想要的是返回第二个属性.我的意思是除了默认的返回id(menuItem_n),我想返回第二个属性,例如data-type.我知道我可以自定义属性并更改默认属性(即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'});

最佳答案 好吧,我错过了一些关于
nestedSortable插件的东西.实际上我错过了它,因为它是
update,但没有添加到插件的文档中(尚未).根据此更新,您现在可以将data- *属性添加到li元素,稍后可以使用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');

你将返回一个字符串,如：

      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- *属性.

点赞