jQueryMobile:使用列切换动态地向表添加行后刷新

Question

我有关于jQueryMobile"列切换表模式"的问题.

通过Javascript动态添加行后,切换出错.并不是说它根本不起作用,但它以某种方式混淆,交换列或类似的奇怪行为.

我完全清楚这种情况确实存在"刷新"方法,但它在我的例子中不起作用.我还看了如何在动态添加行后刷新JQuery移动表,但它并不真正适用于我的问题.我发现的唯一其他类似问题是旧的并且与JQM的版本<= 1.3.0相关,当时没有刷新方法.

我有这张桌子

<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,请将其与我的发现进行比较:

1. "运行"代码.该网页应显示一些在HTML中硬编码的样本数据.列正确切换.
2. 单击触发更新的按钮,类似于在原始应用程序中自动更新的方式.这会清空表并重新添加相同的内容.然后我调用JQM的refresh-method.
3. 该表似乎与以前一样 - 但是尝试"切换列"按钮:"最大"切换"最小","最小"切换"#","#"切换"数据代码"等.

我做错了什么？

Answer 1

我有同样的问题.在对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++;
});

Answer 2

看来这是 jquery mobile 表刷新方法中的错误。在 jsfiddle 中，您只需调用表刷新而不更改表数据，问题仍然会出现。我刚刚在 1.4.0 alpha 版本中尝试了这个，看起来他们修复了它。