jQueryMobile: odśwież po dynamicznym dodawaniu wierszy do tabeli z przełączaniem kolumn

Question

Mam problem dotyczący trybu tabeli przełączania kolumn jQueryMobile ".

Po dynamiczne dodawanie wierszy za pośrednictwem kodu JavaScript powoduje nieprawidłowe przełączanie. Nie to, że w ogóle nie działa, ale w jakiś sposób się myli, zamienia kolumny lub podobne dziwne zachowanie.

Jestem w pełni świadomy, że istnieje "odśwież" - metoda dokładnie dla tego scenariusza, ale nie działa w moim przykładzie. Spojrzałem również na How to refresh JQuery mobile table after a row is added dynamically, ale tak naprawdę nie ma to zastosowania do mojego problemu. Jedyne inne podobne pytanie, które znalazłem, było stare i związane z wersją < = 1.3.0 JQM, gdy nie istniała metoda odświeżania.

mam tej tabeli

<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> 

a ten kod JavaScript, który aktualizuje go:

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"); 

.

---

Proszę zobaczyć ten JSFiddle o zminimalizowanym -ale robotniczej demo mojego problemu: http://jsfiddle.net/kkppd/

---

Jeśli spróbujesz JSFiddle, proszę porównać go do moich ustaleń:

1. "Uruchom" kod. Strona powinna pokazać się z przykładowymi danymi, które są zakodowane w kodzie HTML. Kolumny są poprawnie przełączane.
2. Kliknij przycisk, który uruchamia aktualizację podobną do tej, w jakiej byłby automatycznie aktualizowany w mojej oryginalnej aplikacji. Spowoduje to opróżnienie tabeli i ponowne dodanie tej samej treści. Następnie wołam metodę odświeżania JQM.
3. Tabela wygląda tak, jakby była wcześniej - ale spróbuj na przycisku "przełącz kolumny": "Maximum" przełącza "Minimum", "Minimum" przełącza "#", "#" przełącza "Kod danych", itp.

Co zrobiłem źle?

Answer 1

Wygląda na to jest błąd w tabeli jquery mobile metody odświeżania. W twoim jsfiddle możesz po prostu wywołać odświeżenie tabeli bez zmiany danych tabeli, a problem nadal się pojawia. Po prostu próbowałem tego z wersją 1.4.0 alpha i wygląda na to, że to naprawili.

Answer 2

Miałem ten sam problem. Po nieco włamania poprzez kod JQueryMobile, ja przyszedł z tego rozwiązania:

$("#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++; 
});