Question

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

Answer 1

我找到了解决问题的方法。

这是基本逻辑：

创建一个本地数据缓存对象，该对象将保存每个页面的结果数组。
从服务器获取数据时，始终提前返回几页数据并将其存储在本地缓存对象中
为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格式

jsGrid预加载页面

2 个答案: