jQuery.repeater 不适用于可排序的 jQuery Ui

Posted 2023-05-08

【中文标题】jQuery.repeater 不适用于可排序的 jQuery Ui

【英文标题】：jQuery.repeater doesn't work with jQuery Ui sortable

【发布时间】：2021-05-07 14:11:21

【问题描述】：

我正在使用jQuery.repater 库来创建可重复的表单。我希望使用jQuery Ui Sortable 库对所有可重复的字段进行排序。

一切正常，但是当我对可重复字段进行排序时，输入名称顺序不会重新索引。如here 所述，ready 事件是可能的。

这是我的代码：

<form class="repeater">
    <div class="sortable" data-repeater-list="group-a">
      <div class="item" data-repeater-item>
        <input type="text" name="text-input" value="A"/>
        <input data-repeater-delete type="button" value="Delete"/>
      </div>
      <div class="item" data-repeater-item>
        <input type="text" name="text-input" value="B"/>
        <input data-repeater-delete type="button" value="Delete"/>
      </div>
    </div>
    <input data-repeater-create type="button" value="Add"/>
</form>

JS：

$(document).ready(function() 
  const form = $(".repeater");
  const sortable = $(".sortable").sortable(
    update: function() 
      console.log(form.serializeArray());
    
  );

  $(".repeater").repeater(
    show: function() 
      $(this).slideDown();
    ,
    hide: function(deleteElement) 
      if (confirm("Are you sure you want to delete this element?")) 
        $(this).slideUp(deleteElement);
      
    ,
    ready: function(setIndexes) 
      sortable.on("sortchange", setIndexes);
    
  );
);

并且生活： https://stackblitz.com/edit/js-pbdssq?file=index.js

【参考方案1】：

我已经解决了这个我一直在等待答案的问题如下：

我在每个可排序的操作中都调用了repeater.repeater("setIndexes") 中继器。 Reference

update: function() 
  myRepeater.repeater("setIndexes");

这样可以正常工作，但是点击Add Button会导致添加多个元素的问题，所以需要修改jquery.repeater.js的源代码。 Reference

在jquery.repeater.js 中，我们必须进行以下更改：

之前：

$filterNested($self.find('[data-repeater-create]'), fig.repeaters).click(function () 
    addItem();
);

之后：

$filterNested($self.find('[data-repeater-create]'), fig.repeaters).click(function (event) 
    addItem();
    event.stopImmediatePropagation();   
);

您可以在 this link 找到工作示例。

它应该不会破坏任何东西，但我没有做过任何详尽的测试。

【讨论】：

谢谢。这是一个很好的解决方案。