Question

我在使用大量行加载jqGrid时遇到了一些困难。一旦我的文档准备就绪，我就调用一个Javascript函数，该函数从API获取对象集合，然后将行数据添加到网格中。一切都运行良好，但现在我有超过20,000行，所以网格永远不会加载。有什么我可以做的来解决这个问题吗？是否可以只绘制用户可以看到的数据？例如，如果寻呼机上的行号设置为50，我只能加载50行而不是全部25,000行？

这是我的网格：

$（function（）{

        $("#grid").jqGrid({
            datatype: "local",
            loadonce: false,
            height: "auto",
            search: true,
            title: false ,
            autowidth: true,
            shrinkToFit: true,
            searchOnEnter: true,
            colNames: ['ID', 'BDO Number', 'BDO Date', 'Delivery Date', 'Miles', 'Zip Code', 'Zone', 'Fuel Surcharge', 'Driver', 'Driver Rate', 'Total Driver Pay', 'Order', 'Driver ID',
                        'Vendor ID', 'Vendor', 'Airport', 'Airline', 'Claim Reference', 'Clear Date', 'Mileage', 'Mileage Cost', 'Special', 'Special Cost', 'Exc Cost', 'Pickup Date', 'Total Delivery Cost',
                        'Vendor Profit', 'Driver Percent', 'Driver Fuel Surcharge', 'Total Driver Reported', 'Payment', 'User Cleared', 'Excess Costs', 'Additional Fees', 'DriverCostSchemaID'],
            colModel: [
                { name: 'ID', index: 'ID', hidden: true },
                { name: 'BDONumber', index: 'BDONumber', align: 'center', classes: 'gridButton' },
                { name: 'BDODate', index: 'BDODate', width: 250, align: 'center', formatter: 'date', formatoptions: { newformat: 'l, F d, Y g:i:s A' } },
                { name: 'DeliveryDate', index: 'DeliveryDate', width: 250, align: 'center', formatter: 'date', formatoptions: { newformat: 'l, F d, Y g:i:s A' } },
                { name: 'Miles', index: 'Miles', width: 40, align: 'center' },
                { name: 'ZipCode', index: 'ZipCode', width: 55, align: 'center' },
                { name: 'Zone', index: 'Zone', width: 40, align: 'center' },
                { name: 'FuelFloat', index: 'FuelFloat', width: 50, align: 'center', formatter: money, sorttype: 'float' },
                { name: 'DriverName', index: 'DriverName', width: 125, align: 'center' },
                { name: 'RateFloat', index: 'RateFloat', width: 75, align: 'center', formatter: money, sorttype: 'float' },
                { name: 'PayFloat', index: 'PayFloat', width: 75, align: 'center', formatter: money, sorttype: 'float' },
                { name: 'Order', index: 'Order', hidden: true },
                { name: 'Driver', index: 'Driver', hidden: true },
                { name: 'Vendor', index: 'Vendor', hidden: true },
                { name: 'Airport', index: 'Airport', hidden: true },
                { name: 'Airline', index: 'Airline', hidden: true },
                { name: 'VendorName', index: 'VendorName', hidden: true },
                { name: 'ClaimReference', index: 'ClaimReference', hidden: true },
                { name: 'ClearDate', index: 'ClearDate', hidden: true, formatter: 'date', formatoptions: { newformat: 'l, F d, Y g:i:s A' } },
                { name: 'Mileage', index: 'Mileage', hidden: true },
                { name: 'MileageCost', index: 'MileageCost', hidden: true, formatter: money },
                { name: 'Special', index: 'Special', hidden: true },
                { name: 'SpecialCost', index: 'SpecialCost', hidden: true, formatter: money },
                { name: 'ExcCost', index: 'ExcCost', hidden: true, formatter: money },
                { name: 'PickupDate', index: 'PickupDate', hidden: true, formatter: 'date', formatoptions: { newformat: 'l, F d, Y g:i:s A' } },
                { name: 'TotalDeliveryCost', index: 'TotalDeliveryCost', hidden: true, formatter: money },
                { name: 'VendorProfit', index: 'VendorProfit', hidden: true, formatter: money },
                { name: 'DriverPercent', index: 'DriverPercent', hidden: true },
                { name: 'DriverFuelSurcharge', index: 'DriverFuelSurcharge', hidden: true, formatter: money },
                { name: 'TotalDriverReported', index: 'TotalDriverReported', hidden: true, formatter: money },
                { name: 'Payment', index: 'Payment', hidden: true },
                { name: 'UserCleared', index: 'UserCleared', hidden: true },
                { name: 'ExcCost', index: 'ExcCost', hidden: true },
                { name: 'AdditionalFees', index: 'AdditionalFees', hidden: true, formatter: money },
                { name: 'DriverCostSchemaID', index: 'DriverCostSchemaID', hidden: true },
            ],
            rowNum: 100,
            rowList: [100, 500, 1000, 100000],
            viewrecords: true,
            pager: "pager",
            sortorder: "desc",
            sortname: "DeliveryDate",
            ignoreCase: true,
            headertitles: true,
            emptyrecords: "There are no results.",           
        })

        $("#grid").jqGrid('filterToolbar', { stringResult: true, searchOnEnter: true, defaultSearch: 'cn' });

        GetBDOs();
    });

GetBDOs功能：

函数GetBDOs（）{

        var request = $.ajax({
            url: "@Url.Action("GetBDOs", "DPAdmin")",
            type: "GET",
            cache: false,
            async: true,
            dataType: "json"

        });

        request.done(function (results) {

            var thegrid = $("#grid");
            thegrid.clearGridData();
            for (var i = 0; i < 100; i++) {
                thegrid.addRowData(i + 1, results[i]);
            }
            thegrid.trigger("reloadGrid");

        });
    }

这称之为：

        [Authorize]
        public JsonResult GetBDOs()
        {
            List<BDO> BDOs= new List<BDO>();

            // Get all BDOs
            BDOs = WebInterface.GetBDOs();

            var jsonResult = Json(BDOs.ToArray(), JsonRequestBehavior.AllowGet);
            jsonResult.MaxJsonLength = int.MaxValue;
            return jsonResult;
        }

WebInterface.GetBDOs只需点击数据库并抓取所有当前BDO对象，现在介于20,000 - 25,000之间并冻结网格。对此有何帮助？

Answer 1

在将数据发送回浏览器之前，您应该在服务器端对这些数据进行分页。然后你需要做的就是获取下一个/上一页并重新绘制网格。

Answer 2

部分

var thegrid = $("#grid");
thegrid.clearGridData();

for (var i = 0; i < 100; i++) {
    thegrid.addRowData(i + 1, results[i]);
}
thegrid.trigger("reloadGrid");

GetBDOs函数的

确定性能问题。不应在循环中调用addRowData，而应将data参数设置为results setGridParam：

var thegrid = $("#grid");
thegrid.clearGridData();
thegrid.jqGrid("setGridParam", {data: results});
thegrid.trigger("reloadGrid");

此外，向jqGrid添加gridview: true选项非常重要。

在我看来，将url: "@Url.Action("GetBDOs", "DPAdmin")"替换为jqGrid参数以及datatype: "json"和loadonce: true更好。它将对服务器进行相同的Ajax调用，并使用所有20000或25000行数据填充网格，但在网格中只放置100个第一行。

还有一项建议是在key: true列中使用ID属性。它将通知jqGrid使用ID列中的值作为rowid（网格的id元素的<tr>属性的值）。您还应考虑删除大量隐藏列，并仅将数据保存在网格的内部data选项中。

加载jqGrid 25,000行的问题

2 个答案: