JQuery ui sortable tablerows обновляет числовую позицию внутри

В html-таблице у меня в каждой строке есть ячейка со своим номером позиции. Как я могу правильно обновить этот номер позиции после сортировки с помощью jQueryUI?

Это мой простой html:

<table border="0">
<thead>
      <tr>
        <th scope="col">Position number</th>
        <th scope="col">Name</th>
      </tr>
  </thead>
  <tbody>
      <tr>
        <td>1</td>
        <td>Text</td>
      </tr> 
      <tr>
        <td>2</td>
        <td>Text</td>
      </tr>
  </tbody>        
</table>

И это мой js:

    var fixHelper = function(e, ui) { ui.children().each(function() { $(this).width($(this).width()); }); return ui; };

    $("table tbody").sortable({ 
        helper: fixHelper
    }).disableSelection();

Теперь я хотел бы правильно изменить порядок значений числовых значений после полной сортировки.

Как я могу это сделать?

Любая помощь будет оценена по достоинству.


jquery html-table jquery-ui jquery-ui-sortable
person bobighorus    schedule 05.01.2012    source источник

Ответы (2)


arrow_upward
25
arrow_downward

После сортировки сделайте следующее..

$("table tbody").sortable({ 
    update: function(event, ui) {  
        $('table tr').each(function() {
            $(this).children('td:first-child').html($(this).index())
        });
    },
    helper: fixHelper
}).disableSelection();

вы можете попробовать (не проверено): вместо $('table tr').each используйте $(this).parents('table').find('tr').each

Объяснение.. Он перебирает каждый из тегов tr в таблице, а затем изменяет содержимое первого td-child со значением индекса tr

person Gaurav Shah    schedule 05.01.2012
comment
Большое спасибо, хороший ответ и хорошее объяснение, все работает отлично. Я принимаю и голосую за ваш ответ, вы можете сделать то же самое для моего вопроса, если хотите. Большое спасибо! - person bobighorus; 05.01.2012
comment
Мне тоже помогло - отличный ответ и вопрос - person cantera; 18.04.2012

arrow_upward
3
arrow_downward

Если кому-то понравился приведенный выше ответ, как и мне, вот Coffeescript

jQuery ->
  $("ul.sortableEdit").sortable
            stop: (event, ui) ->  
             $('ul.sortableEdit li').each( ->
               $(this).children('input.sortableItemPos').val($(this).index())
             )
person Brendan Murphy    schedule 23.08.2012