问题描述
我正在使用 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
解决方法
我已经解决了这个我等了很久的问题的答案如下:
我在每个可排序操作时调用了 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 找到工作示例。
它应该不会破坏任何东西,但我还没有做过任何详尽的测试。