0

jQueryのソート可能なメソッドを使用して、入力タグのグループを並べ替えています。これらのタグのname属性は、 （foo[n]グループに1つの入力がある場合）または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>

つまり、並べ替え可能な各リストアイテムには、単一の入力フィールド（input、textarea、またはselectタグ）を含めるか、各リストアイテムにinput、textarea、または一緒に使用するselectアイテムのグループを含めることができます。単純なスケーラー値のベクトルまたはオブジェクト値のベクトルのいずれかと考えてください。

フォームに複数の（個別にソート可能な）ブロックがあります。私は次のような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 に答える