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