0

我正在使用 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 文档不清楚（对我来说）。

4

2 回答 2

4

您有 2 个选择：

从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/

于 2013-02-16T15:24:52.657 回答
0

在对 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);
  }
}
于 2013-02-17T14:32:29.707 回答