javascript jQueryMobile：使用列切换将行动态添加到表后刷新
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16917605/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQueryMobile: refresh after dynamically adding rows to a table with column toggle
提问by Dominik
I have a problem regarding the jQueryMobile "column toggle table mode".
我有关于 jQueryMobile“列切换表模式”的问题。
After adding rows dynamically via Javascript, the toggling gets wrong. Not that it doesn't work at all, but it somehow gets confused, swaps columns or similar strange behaviour.
通过 Javascript 动态添加行后，切换出错。并不是说它根本不起作用，而是以某种方式混淆、交换列或类似的奇怪行为。
I am fully aware that there is a "refresh"-methodexactly for this scenario, but it doesn't work in my example. I also looked at How to refresh JQuery mobile table after a row is added dynamically, but it doesn't really apply to my problem. The only other similar question I found was old and related to version <=1.3.0 of JQM, when no refresh-method existed.
我完全知道有一个完全适用于这种情况的“刷新”方法，但它在我的示例中不起作用。我还查看了如何在动态添加行后刷新 JQuery 移动表，但它并不真正适用于我的问题。我发现的唯一其他类似问题是旧的并且与版本 <=1.3.0 的 JQM 相关，当时不存在刷新方法。
I have this table
我有这张桌子
<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>
And this Javascript code that updates it:
这个 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");
.
.
Please see this JSFiddle for a minimized -but working- demo of my problem: http://jsfiddle.net/kkppd/
请参阅此 JSFiddle 以了解我的问题的最小化但有效的演示：http: //jsfiddle.net/kkppd/
If you try the JSFiddle, please compare it to my findings:
如果您尝试使用 JSFiddle，请将其与我的发现进行比较：
- "Run" the code. The webpage should show up with some sample data which is hardcoded in the HTML. The columns are toggling correctly.
- Click the button that triggers an update similar to the way it would be updated automatically in my original application. This empties the table and re-adds the same content. Afterwards I call the refresh-method of JQM.
- The table seems as it was before - but have a try on the "toggle columns" button: "Maximum" toggles "Minimum", "Minimum" toggles "#", "#" toggles "Data Code", etc.
- “运行”代码。该网页应显示一些在 HTML 中硬编码的示例数据。列正确切换。
- 单击触发更新的按钮，类似于在我的原始应用程序中自动更新的方式。这会清空表格并重新添加相同的内容。之后我调用 JQM 的刷新方法。
- 该表看起来和以前一样 - 但请尝试“切换列”按钮：“最大值”切换“最小值”，“最小值”切换“#”，“#”切换“数据代码”等。
What did I do wrong?
我做错了什么？
采纳答案by nbunderson
It appears this is bug in the jquery mobile table refresh method. In your jsfiddle you can just call the table refresh without changing the table data and the problem still shows up. I just tried this with the 1.4.0 alpha release and it looks like they fixed it.
看来这是 jquery 移动表刷新方法中的错误。在您的 jsfiddle 中，您可以在不更改表数据的情况下调用表刷新，但问题仍然存在。我刚刚在 1.4.0 alpha 版本中尝试了这个，看起来他们修复了它。
回答by Blue
I had the same problem. After a bit of hacking through the JQueryMobile code, I've came with this workaround:
我有同样的问题。在对 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++;
});
