Tự duy trì điểm đánh dấu ô bẩn trên phân trang trong lưới Kendo

Question

Tôi có lưới Kendo có thể chỉnh sửa nơi tôi có thể chỉnh sửa ô và lưới sẽ thêm dấu đỏ vào góc trên bên trái của ô.

Tôi truy cập trang khác và sau đó quay lại trang nơi chỉnh sửa diễn ra và dấu đỏ đã biến mất nhưng giá trị mới được thêm vào trong ô vẫn còn. Tôi thấy một phản ứng với điều này trên trang web Kendo, nơi nó được thông báo rằng: "Để hiển thị" cờ bẩn "mỗi khi lưới được phục hồi, nó sẽ phải lặp qua tất cả các mô hình, kiểm tra tất cả các trường nếu thay đổi và hiển thị trong "

Tôi giả định điều này sẽ cần phải được thực hiện trên sự kiện DataBound() của lưới (dường như kích hoạt khi tôi chuyển trang), nơi tôi sẽ áp dụng lớp k-dirty-cell theo cách thủ công vào ô nhưng tôi có thể ' t tìm ra cách để thực hiện công việc này trong mã. Ý kiến ​​nào cũng được hoan nghênh.

$(function() { 
        $("#grid").kendoGrid({ 
         height: 550, 
         scrollable: true, 
         sortable: true, 
         filterable: true, 
         resizable: true, 
         reorderable: true, 
         groupable: false, 
         editable: true, // enable editing 
         columns: [ 
            //REMOVED TO SHORTEN EXAMPLE  
            ], 
         toolbar: [{name: "save", text: "Save All Records"}, "cancel"], 
         dataSource: { 
          schema: { 
           data: "d", 
           total: function(data) { 
            return data.d.length; 
           }, 
           model: { 
            //REMOVED TO SHORTEN EXAMPLE 
            } 
           } 
          }, 
          batch: true, 
          pageSize: 10, 
          transport: { 
           read: { 

           }, 
           parameterMap: function (data, operation) { 
            if (operation == "read") { 
             //WEB SERVICE CALLS REMOVED... YOU GET THE POINT 
            } 
            else if(operation == "update") { 
             //WEB SERVICE CALLS REMOVED... YOU GET THE POINT 
            } 
           } 
          }, 
         }, 
         selectable: true, 
         pageable: true, 
         dataBound: function() 
         { 
           //THIS IS FIRED WHEN I CHANGE PAGEs BUT 
           //NOT SURE WHAT CODE GOES HERE TO 
           //REAPPLY DIRTY CELL MARKER 
       }; 

Answer 1

Sự kiện databound là một nơi tốt để tái áp dụng điều này, nhưng tôi ghi nhớ rằng khi Looping qua dataItems của lưới điện, có một lá cờ bẩn cho mỗi hàng, nhưng KHÔNG từng lĩnh vực. Rất có thể tôi không biết cách chỉ để tham khảo những thay đổi đang chờ xử lý trong một mạng lưới, nhưng tôi đã viết một hệ thống nhỏ một cách để theo dõi những thay đổi như vậy ở mức độ chi tiết hơn.

Trong hệ thống của mình, tôi lưu trữ các thay đổi đang chờ xử lý của lưới trong một biến toàn cục có tên là PendingChanges.

Sau đó, tôi chỉ định hai sự kiện. Đầu tiên là change event trong dataSource của lưới. Mã này lưu trữ các thông tin bạn cần từ những sự thay đổi đó chỉ xảy ra:

var PendingChanges = []; 
    function GridEdit(e) { 
     var cellHeader = $("#grid").find("th[data-title='" + e.field + "']"); 
     if (cellHeader[0] != undefined) { 
      var pendingChange = new Object(); 
      //Holds field name 
      pendingChange.PropertyName = e.field; 
      //Keeps track of which td element to select when re-adding the red triangle 
      pendingChange.ColumnIndex = cellHeader[0].cellIndex; 
      //used to pull row. Better than the row's id because you could have 
      //multiple rows that have been inserted but not saved (ie. all have 
      //ID set to 0 
      pendingChange.uid = e.items[0].uid; 
      //Remember to clear this out after you save 
      PendingChanges.push(pendingChange); 
     } 
    } 

Sau đó, tôi sử dụng dataBound event để kiểm tra những thay đổi cấp phát là xung quanh và thiết lập các tế bào liên quan đến hiển thị hình tam giác màu đỏ:

function GridDataBound(e) { 
    for (var i = 0; i < PendingChanges.length; i++) { 
     var row = this.tbody.find("tr[data-uid='" + PendingChanges[i].uid + "']"); 
     var cell = row.find("td:eq(" + PendingChanges[i].ColumnIndex + ")"); 

     if (!cell.hasClass("k-dirty-cell")) { 
      cell.addClass("k-dirty-cell"); 
      cell.prepend("<span class='k-dirty'></span>"); 
     } 
    } 
} 

Trong đoạn mã trên this đang đề cập đến The widget instance which fired the event.. Đó là trực tiếp từ Tài liệu giao diện người dùng Kendo.

Hy vọng điều này ít nhất là điểm bạn đi đúng hướng. Nếu bạn đang tiết kiệm lưới, đừng quên xóa mảng PendingChanges khi bạn đã lưu thành công. Tôi đề nghị sử dụng sự kiện RequestEnd cho điều đó.