jqgrid setGridParam datatype: local

Question

Tôi không muốn nhấn máy chủ và mang lại mọi hàng khi tôi phân trang qua các bản ghi bằng cách sử dụng máy nhắn tin. Tôi đọc rằng nếu tôi đặt datatype = local trong blog hoàn chỉnh trong hàm .ajax VÀ nếu tôi đặt loadonce: true thì tôi sẽ có thể tránh phải đợi cho lưới điện tải lại với dữ liệu.

Tuy nhiên, khi tôi làm những việc này lưới sẽ không chuyển sang trang tiếp theo. Nó chỉ bị treo ...
Tôi đang làm gì sai?

jQuery(document).ready(function() { 
    jQuery("#list").jqGrid({ 
     datatype: processrequest, 
     mtype: 'POST', 
     jsonReader: { 
      root: "rows", //arry containing actual data 
      page: "page", //current page 
      total: "total", //total pages for the query 
      records: "records", //total number of records 
      repeatitems: false, 
      id: "ID" //index of the column with the PK in it 
     }, 
     colNames: ['Name', 'Title'], 
     colModel: [ 
     { name: 'name', index: 'name', width: 250 }, 
     { name: 'title', index: 'title', width: 250 } 
     ], 
     pager: '#pager', 
     rowNum: 10, 
     rowList: [10, 20, 30], 
     sortorder: "desc", 
     viewrecords: true, 
     height: '250px', 
     caption: 'My first grid', 
     loadonce: true 
    }).navGrid('#pager', {edit: false, add: false, del: false}); 
}); 

function processrequest(postdata) { 
... 
$.ajax({ 
... 
    complete: function (jsondata, stat) { 
     if (stat == "success") { 
      var thegrid = jQuery("#list2")[0]; 
      var jsonObject = (eval("(" + jsondata.responseText + ")")); 
      thegrid.addJSONData(jsonObject.d); 
      $(".loading").hide(); 
     } else { 
      $(".loading").hide(); 
      alert("Error with AJAX callback"); 
     } 
     $("#list").setGridParam({ datatype: 'local' }); 
    } 
}); 
} 

Answer 1

Có một số hiểu lầm. Nếu bạn sử dụng datatype: local thì bạn phải điền jqGrid chính mình bằng các phương thức như addRowData hoặc đặt dữ liệu cùng một lúc với thông số data (đối với jqGrid phiên bản 3.7 trở lên). Vì vậy, việc sử dụng datatype: local theo jqGrid không tải bất kỳ dữ liệu nào và thông số datatype: processrequest của bạn sẽ bị bỏ qua.

Nếu bạn muốn sử dụng loadonce: true tham số được hỗ trợ kể từ phiên bản 3.7 của jqGrid, bạn nên có tất cả các thông số của jqGrid cho JSON hay XML (ví dụ datatype: json trong trường hợp của bạn) và một tham số bổ sungloadonce: true. Sau đó, sau khi tải dữ liệu đầu tiên jqGrid sẽ chuyển đổi kiểu dữ liệu thành datatype: local và sau đó nó sẽ hoạt động độc lập trên máy chủ nhưng bỏ qua một số tham số (như datatype: processrequest trong trường hợp của bạn).

Một nhận xét nhỏ hơn nữa. Hầu hết các thuộc tính của jsonReader mà bạn sử dụng trong ví dụ của mình là mặc định (xem this wiki). Các thông số mà bạn sử dụng sẽ được kết hợp với các thuộc tính mặc định, vì vậy nó là đủ để sử dụng tham số như jsonReader: { repeatitems: false, id: "ID"}

CẬP NHẬT: OK Jeff. Dường như với tôi, để giải quyết vấn đề của bạn, bạn cần một số ví dụ mã hơn từ cả hai phía: máy khách và máy chủ. Dưới đây là một ví dụ nhỏ mà tôi đã tạo và thử nghiệm cho bạn.

Trước hết phía máy chủ. Trong dịch vụ web ASMX chúng ta định nghĩa một phương pháp web mà tạo ra một dữ liệu thử nghiệm cho bảng của bạn:

public JqGridData TestMethod() { 
    int count = 200; 
    List<TableRow> gridRows = new List<TableRow> (count); 
    for (int i = 0; i < count; i++) { 
     gridRows.Add (new TableRow() { 
      id = i, 
      cell = new List<string> (2) { 
       string.Format("Name{0}", i), 
       string.Format("Title{0}", i) 
      } 
     }); 
    } 

    return new JqGridData() { 
     total = 1, 
     page = 1, 
     records = gridRows.Count, 
     rows = gridRows 
    }; 
} 

nơi lớp JqGridData và TableRow được định nghĩa như sau:

public class TableRow { 
    public int id { get; set; } 
    public List<string> cell { get; set; } 
} 
public class JqGridData { 
    public int total { get; set; } 
    public int page { get; set; } 
    public int records { get; set; } 
    public List<TableRow> rows { get; set; } 
} 

Ở đây bạn có thể thấy, các trang web phương thức TestMethod không có tham số và bài đăng trả về dữ liệu đầy đủ. Phân trang, sắp xếp và tìm kiếm dữ liệu sẽ được thực hiện bởi jqGrid (phiên bản 3.7 hoặc cao hơn).

Để đọc dữ liệu đó và đưa vào jqGrid chúng ta có thể làm như sau:

$("#list").jqGrid({ 
    url: './MyTestWS.asmx/TestMethod', 
    datatype: 'json', 
    mtype: 'POST', 
    loadonce: true, 
    ajaxGridOptions: { contentType: 'application/json; charset=utf-8' }, 
    serializeGridData: function (postData) { 
     return JSON.stringify(postData); 
    }, 
    jsonReader: { 
     root: function (obj) { return obj.d.rows; }, 
     page: function (obj) { return obj.d.page; }, 
     total: function (obj) { return obj.d.total; }, 
     records: function (obj) { return obj.d.records; } 
    }, 
    colModel: [ 
     { name: 'name', label: 'Name', width: 250 }, 
     { name: 'title', label: 'Title', width: 250 } 
    ], 
    rowNum: 10, 
    rowList: [10, 20, 300], 
    sortname: 'name', 
    sortorder: "asc", 
    pager: "#pager", 
    viewrecords: true, 
    gridview: true, 
    rownumbers: true, 
    height: 250, 
    caption: 'My first grid' 
}).jqGrid('navGrid', '#pager', {edit: false, add: false, del: false, search: true}, 
    {},{},{},{multipleSearch : true}); 

Một số ý kiến ​​về định nghĩa của jqGrid:

Để giao tiếp với dịch vụ web ASMX qua JSON người ta cần phải làm như sau trong yêu cầu jQuery.ajax tương ứng:

• dataType: 'json' phải được đặt.
• contentType:'application/json; charset=utf-8' phải được đặt.
• dữ liệu gửi tới máy chủ phải được mã hóa JSON.

Để làm tất cả những điều này, tôi sử dụng các tham số datatype, ajaxGridOptions và serializeGridData của jqGrid. Tôi mã hóa JSON với chức năng JSON.stringify (có thể tải xuống JavaScript tương ứng từ here).

Sau đó, dữ liệu đã nhận phải được giải mã. Tôi làm điều này với tính năng yêu thích của tôi về jqGrid - jsonReader với các chức năng (xem this SO post và this wiki).

Cuối cùng chúng tôi sử dụng loadonce: true mà thay đổi datatype của jqGrid 'json'-'local' và chúng tôi có thể sử dụng ngay lập tức tất cả các lợi thế của phân trang địa phương, sắp xếp và nâng cao tìm kiếm hiện kể từ jqGrid phiên bản 3.7.

Nếu bạn muốn thực hiện phân trang, phân loại và tìm kiếm trên máy chủ (hoặc tìm kiếm nâng cao) với dịch vụ web ASMX, bạn cũng có thể thực hiện. Để lưu một chỗ nhỏ ở đây và để tách các ví dụ mã, tôi sẽ đăng ví dụ tương ứng vào câu hỏi khác của bạn jqgrid Page 1 of x pager (xem phần CẬP NHẬT).

Answer 2

Điều này phù hợp với tôi. Tôi đã gặp vấn đề với phân trang và sắp xếp không hoạt động. Có lẽ vì các mục .d và __type đã được gửi trở lại trong đối tượng JSON trong .net. Tuy nhiên, với các cấu hình phụ trong ví dụ này. Điều này đã làm việc!

Tôi đã phát điên. Đây là cách để cấu hình lưới nếu bạn đang sử dụng. Net làm webservice của bạn. Nó được cấu hình để phân tích cú pháp và thiết lập chính xác các phần tử dữ liệu từ đối tượng JSON vào đúng vị trí cần thiết trong Grid để cho phép phân trang và phân loại hoạt động.

Tôi đã nhận xét, bởi vì tôi chắc rằng có một vài người ở đó, những người muốn sử dụng Grid này nhưng đang sử dụng .Net làm dịch vụ web của họ.

Answer 3

Đó là một chút muộn, nhưng đây là một (không?) Giải pháp siêu dễ dàng cho bất kỳ giải pháp những người tìm kiếm trong tương lai:

gridComplete: function(){ 
    $("#yourGridID").setGridParam({datatype: 'local'}); 
} 

Vậy là xong. Tôi đang sử dụng 3.7.2, không thể nói cho bất kỳ phiên bản nào khác. Vấn đề (rõ ràng) xuất phát từ 'loadonce' chỉ làm việc với các giá trị kiểu dữ liệu được xác định trước, mà một hàm không phải là. Tôi tin rằng các giá trị tích hợp khác cũng sẽ hoạt động, nhưng 'cục bộ' có ý nghĩa.