jQueryMobile：列トグル付きテーブルに行を動的に追加した後の更新

Question

jQueryMobileの "列トグルテーブルモード"に関する問題があります。

の後に、JavaScriptをで動的に追加すると、切り替えが正しく行われません。それはまったく動作しませんが、何とか混乱したり、列や同様の奇妙な動作を入れ替えたりします。

このシナリオでは、「更新」メソッドが正確に認識されていますが、私の例では機能しません。私もHow to refresh JQuery mobile table after a row is added dynamicallyを見ましたが、実際には私の問題には当てはまりません。私が見つけた唯一の他の同様の質問は古いもので、リフレッシュメソッドが存在しないときのバージョン< = JQMの1.3.0に関連しています。

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

：

私はこのテーブル

<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コードを持っています。

---

私の問題のworking-デモ - ブタ最小限に抑えるために、このJSFiddleをご覧ください。http://jsfiddle.net/kkppd/

---

あなたがJSFiddleをしようとすると、私の調査結果と比較してください。

1. コードを「実行」します。 Webページには、HTMLにハードコードされたサンプルデータが表示されます。列が正しく切り替わります。
2. 元のアプリケーションで自動的に更新される方法と同様の更新をトリガーするボタンをクリックします。これによりテーブルが空になり、同じ内容が再追加されます。その後、私はJQMのリフレッシュメソッドを呼び出します。
3. 表は以前のように見えますが、「トグル列」ボタンで試してみてください： 「最大」は「最小」を切り替え、「最小」は「＃」を切り替え、「＃」は「データコード」を切り替えます。 。

どうしたのですか？

Answer 1

jqueryのモバイルテーブルのリフレッシュ方法のバグです表示されます。あなたのjsfiddleでは、テーブルのデータを変更せずにテーブルの更新を呼び出すだけで問題は解決します。私は1.4.0アルファリリースでこれを試したところ、修正されたようです。

Answer 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++; 
});