1

我有一个 jQuery 脚本，可以克隆可排序的输入字段行。该脚本是可配置的，您可以在开头 (insertBefore) 或末尾 (insertAfter) 插入新的克隆行。最后插入新的克隆没有问题，并且可以按预期工作。但是在开头插入会带来编号排序的问题。

两个例子：

  1. 假设您在数据库中保存了 4 行。当您克隆最后一行并将其插入到第一行之前时，该数字会增加到 5。但是此后的每个克隆仍然克隆到 5，因为第 4 行仍在使用中。

  2. 将其切换到克隆第一行并将其插入到第一行之前的位置...递增从 2、3 等开始，最终将在保存时替换先前保存的行。

有什么想法可以让 insertBefore 正确递增吗？每次触发克隆点击事件时，是否可以重新排序所有行？我不确定哪种类型的解决方案可以在这里工作。

这是我为此使用的代码：

$('.add-row').on('click', function(event) {
    function incrementProp(index, prop) {
        return prop.replace(/(\d+)/, function(fullMatch, n) {
            return Number(n) + 1;
        });
    }

    var clone_row,
        insert_location,
        clone_var = $(this).parents('.sortable');

    if (clone_var.is('.before')) {
        clone_row = clone_var.find('.sort-group .row:last');
        insert_location = clone_var.find('.sort-group .row:first');
        insert = 'insertBefore';
    } else {
        clone_row = clone_var.find('.sort-group .row:last');
        insert_location = clone_var.find('.sort-group .row:last');
        insert = 'insertAfter';
    }

    clone_row.clone(true)[insert](insert_location)
        .addClass('add').removeClass('first')
        .find('input[type=text], input[type=hidden], textarea, select').val('').attr('name', incrementProp).end()
        .find('input, textarea, select').attr('id', incrementProp);

    return false;
});

任何可以提供的帮助将不胜感激！

更新：添加了一个基本的小提琴。http://jsfiddle.net/85FY6/1/

4

1 回答 1

1

如果您只需要id值是唯一的并且不关心id值的顺序是否与行的顺序匹配，则可以使用行数来获取下一个id值：

$('.add-row').on('click', function (event) {

    var newIndex = $('.sort-group').find('.row').length + 1;

    function incrementProp(index, prop) {
        return prop.replace(/(\d+)/, newIndex);
    }

    ...

jsfiddle

您可能想要重命名incrementProp()，因为它的名称不再适合。

于 2014-01-03T05:00:44.330 回答