jQueryMobile：动态添加行到带有列切换的表后刷新

Posted 2023-02-22

【中文标题】jQueryMobile：动态添加行到带有列切换的表后刷新

【英文标题】：jQueryMobile: refresh after dynamically adding rows to a table with column toggle

【发布时间】：2013-05-30 20:03:13

【问题描述】：

我有一个关于 jQueryMobile“列切换表模式”的问题。

通过 Javascript 动态添加行后，切换出错。并不是说它根本不起作用，而是它以某种方式变得混乱、交换列或类似的奇怪行为。

我完全知道有一个 "refresh"-method 完全适用于这种情况，但它在我的示例中不起作用。我还查看了How to refresh JQuery mobile table after a row is added dynamically，但它并不真正适用于我的问题。我发现的唯一其他类似问题是旧的并且与 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 的刷新方法。 表格看起来和以前一样 - 但请尝试“切换列”按钮： “最大值”切换“最小值”，“最小值”切换“#”，“#”切换“数据代码”等。

我做错了什么？

【问题讨论】：

我有某种解决方法来解决这个问题，但我仍在寻找“真正的”解决方案。解决方法如下： 1. 只保留 1 列（将 data-priority="..." 添加到没有该属性的列之一）。然后切换工作，但仍然混淆第一行和第二行。 2. 交换第 2 列和第 3 列，现在一切都正确了。

【参考方案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++;
);

【参考方案2】：

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