сортировка jquery, обновить поле заказа - PullRequest
0 голосов
/ 25 августа 2011

Я пытаюсь использовать сортировку jquery, и когда элемент перемещается, он обновляет скрытое поле заказа? Кто-нибудь делал это раньше? Я пробовал несколько разных вещей, но он не проходит через текущий порядок элемента.

Вот мой код:

jQuery(document).ready(function() { 
  jQuery(".sortable").sortable({ 
    opacity: 0.6, 
    cursor: 'move',
    update: function(event, ui) {
      var ordering = $(this).sortable('toArray').toString();
      alert(ordering);
    }
  });
}); 

А вот сортируемая часть моего стола:

<tbody class="sortable ui-sortable">
  <tr>
    <td width="5" align="center" class="cols sort">&nbsp;</td>
    <td align="left"><a onclick="getUsrInfo(1)" class="__productTBLink"><strong>Leanne Seawright</strong>, Web Designer <span class="__rowShowInfo">- view info.</span></a></td>
    <td width="20" align="center"><a class="__productTBLink" onclick="javascript:confdelete(1);"><img width="16" height="16" align="left" title="Delete - click to delete this user" alt="Edit" src="/templates/manufacturers/images/delete.png"></a><input type="text" value="1" id="ordering[1]" name="ordering"></td>
  </tr>
  <tr>
    <td width="5" align="center" class="cols sort">&nbsp;</td>
    <td align="left"><a onclick="getUsrInfo(2)" class="__productTBLink"><strong>George Jetson</strong>, Driver <span class="__rowShowInfo">- view info.</span></a><input type="text" value="2" id="ordering[2]" name="ordering"></td>
    <td width="20" align="center"><a class="__productTBLink" onclick="javascript:confdelete(2);"><img width="16" height="16" align="left" title="Delete - click to delete this user" alt="Edit" src="/templates/manufacturers/images/delete.png"></a></td>
  </tr>
</tbody>

Я просто хочу, чтобы поле ввода "ordering" обновлялось при перемещении элемента с использованием сортировки jquery.

Заранее спасибо:)

1 Ответ

3 голосов
/ 25 августа 2011

Вы должны дать ID вашего tr.Вот это jsfiddle

<tbody class="sortable ui-sortable">
  <tr id="1">
    <td width="5" align="center" class="cols sort">&nbsp;</td>
    <td align="left"><a onclick="getUsrInfo(1)" class="__productTBLink"><strong>Leanne Seawright</strong>, Web Designer <span class="__rowShowInfo">- view info.</span></a></td>
    <td width="20" align="center"><a class="__productTBLink" onclick="javascript:confdelete(1);"><img width="16" height="16" align="left" title="Delete - click to delete this user" alt="Edit" src="/templates/manufacturers/images/delete.png"></a><input type="text" value="1" id="ordering[1]" name="ordering"></td>
  </tr>
  <tr id="2">
    <td width="5" align="center" class="cols sort">&nbsp;</td>
    <td align="left"><a onclick="getUsrInfo(2)" class="__productTBLink"><strong>George Jetson</strong>, Driver <span class="__rowShowInfo">- view info.</span></a><input type="text" value="2" id="ordering[2]" name="ordering"></td>
    <td width="20" align="center"><a class="__productTBLink" onclick="javascript:confdelete(2);"><img width="16" height="16" align="left" title="Delete - click to delete this user" alt="Edit" src="/templates/manufacturers/images/delete.png"></a></td>
  </tr>
</tbody>
...