10

ile bir tabloya dinamik olarak satır ekledikten sonra yenilemek jQueryMobile "sütun geçişi tablo modu" ile ilgili bir sorunum var.jQueryMobile: sütun geçişi

Javascript aracılığıyla dinamik olarak satır ekledikten sonra, geçiş yanlış olur. Hiç işe yaramadı, ama bir şekilde karıştı, sütunları ya da benzer garip davranışları takas ediyor.

Tam olarak bu senaryo için bir "refresh" -method olduğunu biliyorum, ancak örneğimde çalışmaz. Ayrıca How to refresh JQuery mobile table after a row is added dynamically'a da baktım, ama sorunuma gerçekten uygun değil. Bulduğum tek diğer benzer soru, eskiydi ve hiçbir yenileme yöntemi olmadığında, < = JQM'nin 1.3.0 sürümü ile ilgiliydi.

for (var i = 0; i < rows.length; i++) { 
    html = html + "<tr>\n"; 
    for (var j = 0; j < rows[i].length; j++) { 
     html = html + "<td>" + rows[i][j] + "</td>\n"; 
    } 
    html = html + "</tr>\n\n"; 
} 

$("#table > tbody").append(html); 
$("#table").table("refresh"); 

:

Ben bu tabloyu

<table data-role="table" id="table" data-mode="columntoggle" class="ui-body-d ui-shadow table-stripe ui-responsive" data-column-btn-theme="b" data-column-btn-text="Columns to display..." data-column-popup-theme="a"> 
      <thead> 
       <tr class="ui-bar-d"> 
        <th data-priority="1">#</th> 
        <th data-priority="1">Data Code</th> 
        <th>Data Name</th> 
        <th>Value</th> 
        <th data-priority="1">Minimum</th> 
        <th data-priority="1">Maximum</th> 
       </tr> 
      </thead> 
      <tbody> 
      ... 
      </tbody> 
</table> 

Ve ister günceller bu Javascript kodu var.


benim sorunun -ama minimize çalışma-demo için bu JSFiddle bakın: Eğer JSFiddle çalışırsanız http://jsfiddle.net/kkppd/


, buluşlarımla karşılaştırın lütfen:

  1. Kodu "çalıştırın". Web sayfası, HTML'de kodlanmış bazı örnek verilerle gösterilmelidir. Sütunlar doğru şekilde geçiş yapıyor.
  2. Orijinal uygulamanızda otomatik olarak güncellenme şekline benzer bir güncelleştirmeyi tetikleyen düğmeyi tıklatın. Bu tabloyu boşaltır ve aynı içeriği tekrar ekler. Daha sonra JQM'nin yenileme yöntemini arıyorum.
  3. Tablo daha önce olduğu gibi görünüyor - ama "geçiş sütunları" düğmesini deneyin: "Maksimum" "Minimum" geçiş yapar, "Minimum" geçiş yapar "#", "#" geçiş yapar "Veri Kodu", vb. (

Neyi yanlış yaptım?

+0

Sorun için bir çeşit çözümüm var, ancak hala "gerçek" bir çözüm arıyorum. Çözüm şu şekildedir: 1. Yalnızca 1 sütunu kalıcı hale getirin (bu özniteliksiz sütunlardan birine veri önceliği = "..." ekleyin). Açma o zaman çalışır, ama yine de birinci ve ikinci sırayı karıştırır. 2. Sütun 2 ve 3'ü değiştirin ve şimdi her şey doğru. – Dominik

cevap

1

jquery mobil tablo yenileme yönteminde hata olduğunu görünür. Jsfiddle'ınızda, tablo verisini değiştirmeden tablo yenilemeyi arayabilirsiniz ve problem hala ortaya çıkmaktadır. Bunu sadece 1.4.0 alfa sürümü ile denedim ve düzeltmiş gibi görünüyor.

7

Aynı problem vardı. JQueryMobile kodu ile hack biraz sonra bu geçici çözüm ile geldi ettik:

$("#table > tbody").append(html); 
$("#table").table("refresh"); 

// Code to add 
var columnIndex = 0; 
$("#table-popup fieldset").find("input").each(function(){ 
    var sel = ":nth-child(" + (columnIndex + 1) + ")"; 
    $(this).jqmData("cells", $("#table").find("tr").children(sel)); 
    columnIndex++; 
});