jsGrid預加載頁面前

Question

我想要一頁一頁的加載項目，因爲我有大量數據的表格，但是我不想在用戶單擊它時加載每個頁面的項目。相反，我寧願預先加載1000個項目（例如），只有當用戶移動到我仍未獲取數據的頁面時才獲取更多結果。 這可能嗎？

Answer 1

我找到了解決這個問題的方法。

這裏是基本的邏輯：

1. 創建一個本地數據緩存對象，將舉行成果爲每個頁面的陣列。
2. 從服務器獲取數據時，總是返回提前幾頁的數據並將它們存儲在本地緩存對象中
3. 編寫controller.loadData的方法，該方法將檢查您是否具有所需的頁面結果本地緩存對象，如果是這樣的話 - 返回該數組，如果不是的話 - 返回一個承諾，它將爲前幾頁提供一些額外數據的結果。

本地高速緩存對象的快照的一個例子：

{ 
    "1": [{name: "ff"}, {name: "fdd"}], 
    "2": [{name: "fds"}, {name: "dsr"}], 
    "3": [{name: "drr"}, {name: "ssr"}] 
} 

Answer 2

腳本部分

<script type="text/javascript"> 
    $(document).ready(function() { 
     List(); 
    }); 
    function List() { 
     //$(function() { 
     loadjsgrid(); 
     $("#jsGrid").jsGrid({ 
      height: "auto", 
      width: "100%", 
      filtering: true, 
      editing: false, 
      sorting: true, 
      autoload: true, 
      paging: true, 
      pageSize: 10, 
      pageButtonCount: 5, 
      pageLoading: true, 
      controller: { 
       loadData: function (filter) { 
        var startIndex = (filter.pageIndex - 1) * filter.pageSize; 
        var d = $.Deferred(); 
        $.ajax({ 
         type: 'GET', 
         url: '@Url.Action("[ActionName]", "[Controllername]")', 
         data: filter, 
         contentType: 'application/json; charset=utf-8', 
         dataType: 'json', 
         success: function (data) { 
          if (data.Message == "Failed") { 
           data.Result = []; 
           data.Count = 0; 
          } 
          console.log(data); 
          d.resolve(data); 
         } 
        }); 
        return d.promise().then(function (q) { 
         return { 
          data: q.Result, 
          itemsCount: q.Count 
         } 
        }); 


       } 
      }, 


      }, 
      fields: [ 

       { name: "rct_no", type: "text", title: 'Serial Number', autosearch: true, width: '10%' } 

      ], 

     }); 
     $("#pager").on("change", function() { 
      var page = parseInt($(this).val(), 10); 
      $("#jsGrid").jsGrid("openPage", page); 
     }); 
    } 

控制器部

public ActionResult getList(int pageIndex = 1, int pageSize = 10) 
     { 
      try 
      { 

       var query = @" from rd_receipt_header 
       var irList = DAL.db.Fetch<[className]>(pageIndex, pageSize, @"select * " + query); 
       var count = DAL.db.ExecuteScalar<int>("select count(*) " + query); 
       return Json(new { Message = "Success", Result = irList, Count = count }, JsonRequestBehavior.AllowGet); 
      } 
      catch (Exception ex) { return Json(new { Message = "Failed", Result = ex.Message }, JsonRequestBehavior.AllowGet); } 

我用ajax從服務器獲取數據的ajax格式