jQuery可排序按钮单击时将行移到顶部

时间:2017-03-06 05:56:24

标签: php jquery jquery-ui jquery-ui-sortable

我正在使用jQuery Sortable成功拖放重新排序表行。我还试图在每一行上添加一个move to top row按钮。我能够将行移到顶部,但是当移动行时,为POST创建序列化数组顺序的jQuery sortable不会更新。这就是我所拥有的:

HTML

<table>
 <thead>
  <tr>
   <th>&nbsp</th>
   <th>Id</th>
   <th>Name</th>
  </tr>
 </thead>
 <tbody id="order">
  <tr class='position' id='{$record['IapId']}-{$order}'>
   <td><a id='move-to-top' href='#' class='btn btn-info btn-xs' role='button'><i class='icon-arrow-up'></i></a></td>
   <td>21</td>
   <td>Red Car</td>
  </tr>
 </tbody>
</table>

JQUERY

<script type="text/javascript">
$(document).ready(function(){

  $('tbody#order').sortable({
    axis: 'y',
    stop: function (event, ui) {
      var data = $(this).sortable('serialize');
        $('#output').val(data);
      }
  });

  $('a#move-to-top').click(function() {
    row = $(this).closest('tr');
    $(this).closest('tbody#order').prepend(row);
  });   

});
</script> 

用于发布的SERIALIZED OUTPUT

<input type="hidden" name="cars" id="output" />

有关如何获得TR之前的<tbody>以反映jQuery Sortable的序列化输出的建议?

1 个答案:

答案 0 :(得分:0)

试试这个..

var data = $(this).sortable('toArray');

或者在这里寻找答案:https://api.jqueryui.com/sortable/#method-serialize