使用 jQuery 可排序后重新编号输入标签名称字段

Question

我正在使用 jQuery 的可排序方法对输入标签组进行重新排序。这些标签的名称属性的形式为foo[n]（当组中有一个输入时）或foo[n][fieldname]（组中有多个输入时），其中n 是某个数字。

我遇到的问题是提交整体表单时，PHP代码存储在数据库中的输入组的顺序是索引的顺序，而不是屏幕上的顺序。我需要更新名称索引以反映屏幕排序顺序的结果。我不确定该怎么做。 jQuery 的文档并不是特别有用。

生成的 HTML 如下所示：

<ul id="deepwoods_meta_rightbutton-repeatable" class="deepwoods_metabox_repeatable">
  <li><span class="sort hndle">||</span><textarea name="deepwoods_meta_rightbutton[0]" id="deepwoods_meta_rightbutton" cols="60" rows="4">(some text)</textarea><a class="repeatable-remove button" href="#">-</a></li>
  <li> (same as above, except [0] replaced with [1]) </li>
  ...
  <li> (same as above, except [0] replaced with [n]) </li>
</ul>

或者是这样的：

<ul id="deepwoods_meta_buybuttons-repeatable" class="deepwoods_metabox_repeatable">
  <li><span class="sort hndle">||</span>
    <div class="form-table deepwoods-metabox div-as-table">
       <div class="div-as-table-row">
          <span class="span-as-th"><label for="deepwoods_meta_buybuttons">Link</label</span>
          <span class="span-as-td"><input type="text" name="deepwoods_meta_buybuttons[0][thelink]" id="deepwoods_meta_buybuttons" value="..." size="60" class="scrollable" /></span></div>
       <div class="div-as-table-row">
          <span class="span-as-th"><label for="deepwoods_meta_buybuttons">Button</label></span>
          <span class="span-as-td"><input type="text" name="deepwoods_meta_buybuttons[0][thebutton]" id="deepwoods_meta_buybuttons" value="..." size="60" class="scrollable" /></span></div>
       <div class="div-as-table-row">
           <span class="span-as-th"><label for="deepwoods_meta_buybuttons">Text</label></span>
           <span class="span-as-td"><textarea name="deepwoods_meta_buybuttons[0][text]" id="deepwoods_meta_buybuttons" cols="60" rows="4">...</textarea></span></div></div><a class="repeatable-remove button" href="#">-</a></li>
   <li> (much like the previous list item, but [0] replaced with [1] ) </li>
   ...
   <li> nth ([n]) item </li>
</ul>

也就是说，每个可排序的列表项可以包含单个输入字段（输入、textarea 或 select 标记），或者每个列表项可以包含一组输入、textarea 或一起出现的选择项。可以将其视为简单缩放器值的向量或对象值的向量。

我在表单中有多个（可单独排序的）块。我正在使用一个 jQuery 代码，看起来像：

jQuery('.deepwoods_metabox_repeatable').sortable({
            opacity: 0.6,
            revert: true,
            cursor: 'move',
            handle: '.sort',
            containment: 'parent'
});

我想我需要添加一个更新事件处理程序，但我不确定如何从那里开始。 jQuery 文档不清楚（对我来说）。

Answer 1

你有两个选择：

从input标签中删除所有索引，表单默认按顺序发送

或

使用stop 事件更改名称：

jQuery('.deepwoods_metabox_repeatable').sortable({
   stop: function (event, ui) {
        updateNames($(this))
    }
})

function updateNames($list) {
    $list.find('li').each(function (idx) {
        var $inp = $(this).find('input');
        $inp.each(function () {
            this.name = this.name.replace(/(\[\d\])/, '[' + idx + ']');            
        })
    });
}

演示：http://jsfiddle.net/gszfD/

Answer 2

在对 Firebug 进行了几个小时的折腾后，我找到了一个似乎可行的解决方案。可能不是特别优雅，而且可能过于冗长。

jQuery('.deepwoods_metabox_repeatable').sortable({
    opacity: 0.6,
    revert: true,
    cursor: 'move',
    handle: '.sort',
    containment: 'parent',
    update: function(event,ui){ renumber(ui.item); }
});

function renumber(item) {
  ul = item[0].parentNode;
  jQuery('li',ul).each(function(index,element) { 
    renumber_helper(index,element); 
  });
}

function renumber_helper(index,element) {
  inputs = jQuery('input', element);
  for (j = 0; j < inputs.length; j++) {
    input = inputs[j];
    name = input.name;
    input.name = name.replace(/(\d+)/,index);
  }
  textareas = jQuery('textarea',element);
  for (j = 0; j < textareas.length; j++) {
     textarea = textareas[j];
     name = textarea.name;
     textarea.name = name.replace(/(\d+)/,index);
  }
  selects = jQuery('select',element);
  for (j = 0; j < selects.length; j++) {
    select = selects[j];
    name = select.name;
    select.name = name.replace(/(\d+)/,index);
  }
}