我对 jQueryMobile“列切换表模式”有疑问。
通过 Javascript 动态添加行后,切换出错。并不是说它根本不起作用,而是它以某种方式变得混乱、交换列或类似的奇怪行为。
我完全清楚这种情况有一个“刷新”方法,但它在我的示例中不起作用。我还查看了如何在动态添加一行后刷新 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 中硬编码的示例数据。列正确切换。
- 单击触发更新的按钮,类似于在我的原始应用程序中自动更新的方式。这会清空表格并重新添加相同的内容。之后我调用了 JQM 的刷新方法。
- 该表看起来和以前一样 - 但请尝试“切换列”按钮:“最大值”切换“最小值”,“最小值”切换“#”,“#”切换“数据代码”等。
我做错了什么?