jsgrid - jsGrid 预先加载页面

Question

我想按页加载项目，因为我有包含大量数据的表，但是一旦用户单击它，我不想为每个页面加载项目。相反，我宁愿提前预加载 1000 个项目（例如），并且只在用户移动到我仍然没有获取数据的页面时获取更多结果。可能吗？

Answer 1

脚本部分

<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 格式从服务器获取数据

Answer 2

我找到了解决它的方法。

这是基本逻辑：

1. 创建一个本地数据缓存对象，该对象将保存每个页面的结果数组。
2. 从服务器获取数据时，总是返回前几页的数据，并将它们存储在本地缓存对象中
3. 为 controller.loadData 编写一个方法，该方法将检查本地缓存对象中是否有所需的页面结果，如果有 - 返回该数组，如果没有 - 返回一个承诺，该承诺将使用一些额外数据获取结果前面几页。

本地缓存对象快照示例：

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