jquery sortable with table

วิธี sortable ที่ table จะใช้
เช่น

<table>
<tbody>
   <tr id='1'><td>col1</td><td>col2</td></tr>
   <tr id='2'><td>col1</td><td>col2</td></tr>
</table>

ถ้าเราทำการ sortable จะพบปัญหาเวลาเรา drag ความกว้างของแถวที่เรา drag จะหดลงไม่เป็นขนาด original วิธีแก้ไขให้เราสร้าง helper ดังนี้

$(function() {
// Return a helper with preserved width of cells
var fixHelper = function(e, ui) {
     ui.children().each(function() {
          $(this).width($(this).width());
     });
      return ui;
};

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

ถ้าจะให้มีการ Update Sort Order ทันทีหลังจาก drop ให้เขียนเพิ่มดังนี้

$('tbody').sortable({
       helper: fixHelper,
       update: function (event, ui) {
                           
              //keep id and sortIndex
              var stringDiv = "";
              $("tr").each(function(i) {
                      var tr = $(this);
                      if(typeof(tr.attr("id")) != "undefined"){
                             stringDiv += " "+tr.attr("id") + '=' + i + '&';
                      }
               });
               // POST to server using $.post or $.ajax
               $.ajax({
                           data: stringDiv,
                           type: 'POST',
                           url: '<?php echo site_url() ?>admin/categories/sorting'
                        });
                }
}).disableSelection();

และที่ไฟล์ php ก็นำค่าไปวน update sort order ดังนี้

foreach ( $_POST as $key => $value )
{
      $newRank = $value;
      $this->mod->switchOrder($key,$newRank);
}

Related posts:

This entry was posted in jquery. Bookmark the permalink.