jquery UI Tablo ve tr genişliği ile sıralanabilir

Benim tablo ızgara sıralanabilir yapmak için sıralanabilir jQuery UI kullanıyorum. Kod iyi çalışıyor gibi görünüyor ama ben tds genişlik eklemiyorum çünkü sürüklediğimde triçeriği daraltır.

Örneğin; sürüklemeye başladığımda tablo satırım 500 piksel ise, 300 piksel olur. Bunun olduğunu düşünüyorum çünkü ızgarada genişlik tanımlanmadı. Çünkü tds ( fixve liquid) için iki sınıf kullanıyorum .

fixSınıf yapar tdiçerik genişliğine eşit ve liquidyapar tdgenişliğe,% 100. Bu, tds'ye genişlik atamak zorunda kalmadan ızgara tablosu için yaklaşımım .

Yaklaşımımla nasıl sıralanabilir işler yapılacağına dair bir fikrin var mı?

Cevabı burada buldum .

Orijinaline genişlik eklemek yerine satırı klonlamak için biraz değiştirdim:

  helper: function(e, tr)
  {
    var $originals = tr.children();
    var $helper = tr.clone();
    $helper.children().each(function(index)
    {
      // Set helper cell sizes to match the original sizes
      $(this).width($originals.eq(index).width());
    });
    return $helper;
  },

Bence yardımcı olabilir:

.ui-sortable-helper {
    display: table;
}

Burada seçilen cevap gerçekten güzel bir çözüm, ancak orijinal JS kemanında görünen bir ciddi hata var ( http://jsfiddle.net/bgrins/tzYbU/ ): en uzun satırı sürüklemeyi deneyin ( God Bless You, Mr Rosewater ) ve hücre genişliklerinin geri kalanı çöker.

Bu, sürüklenen hücreye hücre genişliklerini sabitlemenin yeterli olmadığı anlamına gelir - ayrıca genişlikleri tabloya sabitlemeniz gerekir.

$(function () {
    $('td, th', '#sortFixed').each(function () {
        var cell = $(this);
        cell.width(cell.width());
    });

    $('#sortFixed tbody').sortable().disableSelection();
});

JS Fiddle: http://jsfiddle.net/rp4fV/3/

Bu, ilk sütunu sürükledikten sonra tablonun daraltılması sorununu giderir, ancak yeni bir sütun ekler: tablonun içeriğini değiştirirseniz, hücre boyutları artık düzeltilmiştir.

İçerik eklerken veya değiştirirken bu sorunu çözmek için, ayarlanan genişlikleri temizlemeniz gerekir:

$('td, th', '#sortFixed').each(function () {
    var cell = $(this);
    cell.css('width','');
});

Ardından içeriğinizi ekleyin, ardından genişlikleri tekrar düzeltin.

Bu hala tam bir çözüm değildir, (özellikle bir tablo ile) bir damla yer tutucusuna ihtiyacınız vardır. Bunun için başlangıçta yer tutucuyu oluşturan bir işlev eklememiz gerekir:

$('#sortFixed tbody').sortable({
    items: '> tr',
    forcePlaceholderSize: true,
    placeholder:'must-have-class',
    start: function (event, ui) {
        // Build a placeholder cell that spans all the cells in the row
        var cellCount = 0;
        $('td, th', ui.helper).each(function () {
            // For each TD or TH try and get it's colspan attribute, and add that or 1 to the total
            var colspan = 1;
            var colspanAttr = $(this).attr('colspan');
            if (colspanAttr > 1) {
                colspan = colspanAttr;
            }
            cellCount += colspan;
        });

        // Add the placeholder UI - note that this is the item's content, so TD rather than TR
        ui.placeholder.html('<td colspan="' + cellCount + '">&nbsp;</td>');
    }
}).disableSelection();

JS Fiddle: http://jsfiddle.net/rp4fV/4/

Görünüşe göre satır klonlama IE8'de iyi çalışmıyor, ancak orijinal çözüm işe yarıyor.

JsFiddle ile test edilmiştir .

Tablonuz sıralanmaya hazır olduğunda bu kodu çağırın, bu td öğelerinizin tablo yapısını bozmadan sabit bir şekilde olmasını sağlar.

 $(".tableToSort td").each(function () {
            $(this).css("width", $(this).width());
        });  

jsFiddle

Birçok farklı denemeden sonra, Dave James Miller'ın çözümünü tamamlayan ve en büyük satırı sürüklerken büzülme tablosunu önlemek için basit bir çözüm denedim. Umarım yardımcı olur :)

// Make sure the placeholder has the same with as the orignal
var start = function(e, ui) {
    let $originals = ui.helper.children();
    ui.placeholder.children().each(function (index) {
        $(this).width($originals.eq(index).width());
    });
}
// Return a helper with preserved width of cells
var helper = function(e, tr) {
    let $helper = tr.clone();
    let $originals = tr.children();
    $helper.children().each(function (index) {
        $(this).width($originals.eq(index).outerWidth(true));
    });
    return $helper;
};

Keith'in çözümü gayet iyi ancak Firefox'ta küçük bir tahribat yarattı, bu da colspans'leri eklemedi ancak onları işaret etti. (Eski js diz tipi ağrı diz)

bu satırın değiştirilmesi:

 cellCount += colspan;

ile:

 cellCount += colspan-0;

Sorunu düzeltir. (Js değişkenleri dize yerine sayı olarak işlemeye zorlandığından)

Dave James Miller'ın yanıtı benim için çalıştı, ancak sayfamdaki kapsayıcı bölümlerinin düzeni nedeniyle, fare imleciyle sürüklenen yardımcı faremin konumundan sapıyor. Bunu düzeltmek için yardımcı geri aramaya aşağıdakileri ekledim

$(document.body).append($helper);

Yukarıdaki satır eklendiğinde tam geri arama:

helper: function (e, tr) {
  var $originals = tr.children();
  var $helper = tr.clone();
  $helper.children().each(function (index) {
    // Set helper cell sizes to match the original sizes
    $(this).width($originals.eq(index).width());
  });

  // append it to the body to avoid offset dragging
  $(document.body).append($helper);

  return $helper;
}

Bunu Dave'in cevabına bir yorum olarak eklerdim, ancak bu hesapta yeterli temsilcim yoktu.

Öyle görünüyor disableSelection()- yöntem bugünlerde kötü ve kullanımdan kaldırıldı. Artık sıralanabilir satır içindeki metin girişlerini kullanamıyorum Mozilla Firefox 35.0. Artık odaklanamaz.

$(function() {
    $( "#sort tbody" ).sortable({
        update: function () {
                                var order = $(this).sortable("toArray").join();
                                $.cookie("sortableOrder", order);
                        }
    });
    if($.cookie("sortableOrder")){
        var order = $.cookie("sortableOrder").split(",");
        reorder(order, $("#sort tbody"));
    }
    function reorder(aryOrder, element){
      $.each(aryOrder, function(key, val){
              element.append($("#"+val));
      });
    }
  });

.sortable({
    helper: function (e, ui) {
        ui.children().each(function () {
            $(this).width($(this).width());
        });
        return ui;
    }
});

Sıralanabilirliği tablonun tbody öğesine uygulayın ve jquery-ui'nin API'sında açıklandığı gibi yardımcıyı 'klon' olarak ayarlayın

$("$my-table-tbody").sortable({
    helper: "clone"
});