时间戳

首页 > 解决方案 > jQuery.repeater 不适用于可排序的 jQuery Ui

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

问题描述

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

一切都很好，但是当我对可重复的字段进行排序时，输入名称订单不会重新索引。如此处所述，事件是可能的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

标签： jqueryjquery-uijquery-ui-sortablerepeaterjquery.repeater

解决方案

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

在每个可排序的操作中，我都会呼叫repeater.repeater("setIndexes")中继器。参考 

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

这使它可以正常工作，但是单击Add Button会导致添加多个元素的问题，因此需要更改jquery.repeater.js. 参考

在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();   
});

您可以在此链接中找到工作示例。

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

推荐阅读