jQueryMobile: làm mới sau khi tự động thêm hàng vào bảng có cột chuyển đổi

Question

Tôi gặp sự cố liên quan đến chế độ bảng chuyển đổi cột "jQueryMobile".

Sau khi thêm hàng động qua Javascript, việc chuyển đổi bị sai. Không phải là nó không hoạt động chút nào, nhưng nó bằng cách nào đó bị lẫn lộn, hoán đổi cột hoặc hành vi kỳ lạ tương tự.

Tôi hoàn toàn nhận thức được rằng có "làm mới" -method chính xác cho trường hợp này, nhưng nó không hoạt động trong ví dụ của tôi. Tôi cũng nhìn vào How to refresh JQuery mobile table after a row is added dynamically, nhưng nó không thực sự áp dụng cho vấn đề của tôi. Câu hỏi tương tự duy nhất khác mà tôi tìm thấy là cũ và liên quan đến phiên bản < = 1.3.0 của JQM, khi không có phương thức làm mới nào tồn tại.

Tôi có bảng này

<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> 

Và mã này javascript mà cập nhật nó:

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

.

---

Xin xem JSFiddle này cho một giảm thiểu -Nhưng bản demo làm việc nặng nhọc của vấn đề của tôi: http://jsfiddle.net/kkppd/

---

Nếu bạn thử JSFiddle, xin vui lòng so sánh nó với những phát hiện của tôi:

1. "Chạy" mã. Trang web sẽ hiển thị với một số dữ liệu mẫu được mã hóa cứng trong HTML. Các cột đang chuyển đổi chính xác.
2. Nhấp vào nút kích hoạt bản cập nhật tương tự như cách cập nhật tự động trong ứng dụng ban đầu của tôi. Thao tác này làm trống bảng và thêm lại cùng một nội dung. Sau đó tôi gọi phương thức làm mới của JQM.
3. Bảng có vẻ như trước đây - nhưng thử trên nút "cột chuyển đổi": "Tắc" tối đa "Tối thiểu", "Tắc" tối thiểu "#", "#" Toggles "Mã dữ liệu", v.v ... .

Tôi đã làm gì sai?

Answer 1

Có vẻ như đây là lỗi trong phương pháp làm mới bảng di động jquery. Trong jsfiddle của bạn, bạn chỉ có thể gọi làm mới bảng mà không thay đổi dữ liệu bảng và sự cố vẫn hiển thị. Tôi vừa thử với bản phát hành alpha 1.4.0 và có vẻ như họ đã sửa nó.

Answer 2

Tôi đã gặp vấn đề tương tự. Sau một chút hack qua mã JQueryMobile, tôi đã đến với cách giải quyết này:

$("#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++; 
});