JQueryMobile: обновить после динамического добавления строк в таблицу с переключением столбцов

У меня есть проблема с jQueryMobile "column toggle table mode".

После динамического добавления строк с помощью Javascript переключение становится неправильным. Не то, чтобы это вообще не работало, но оно каким-то образом запутывается, свопит столбцы или подобное странное поведение.

Я полностью понимаю, что для этого сценария существует "refresh" -method, но в моем примере это не работает. Я также посмотрел на Как обновить таблицу мобильных телефонов JQuery после динамического добавления строки, но это не относится к моей проблеме. Единственный другой подобный вопрос, который я нашел, был старым и связан с версией <= 1.3.0 JQM, когда не было никакого метода обновления.

У меня есть эта таблица

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

И этот Javascript-код, который его обновляет:

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

.

См. этот JSFiddle для минимизированной рабочей рабочей демонстрации моей проблемы: http://jsfiddle.net/kkppd/

Если вы попробуете JSFiddle, пожалуйста, сравните его с моими выводами:

  • "Запустите" код. Веб-страница должна отображаться с некоторыми примерами данных, которые жестко закодированы в HTML. Столбцы правильно переключаются.
  • Нажмите кнопку, которая запускает обновление, подобное тому, как оно будет автоматически обновляться в моем исходном приложении. Это опустошает таблицу и повторно добавляет один и тот же контент. Впоследствии я вызываю refresh-метод JQM.
  • Таблица выглядит так, как раньше - но попробуйте кнопку "Переключить столбцы": "Максимум" переключает "Минимум", "Минимум" переключает "#", "#" переключает "Код данных" и т.д.

Что я сделал не так?

ОТВЕТЫ

Ответ 1

Похоже, что это ошибка в методе обновления таблицы мобильных jQuery. В jsfiddle вы можете просто вызвать обновление таблицы, не изменяя данные таблицы, и проблема все еще проявляется. Я просто попробовал это с версией 1.4.0 alpha, и похоже, что они исправили ее.

Ответ 2

У меня была та же проблема. После небольшого взлома кода JQueryMobile я пришел с этим обходным путем:

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