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