Question

我正在努力研究如何配置jqGrid，超过演示代码中给出的简单分页示例。

我的需求如此：

1）不需要分页，我希望网格成为视口并滚动所有项目（已经限制在400行以下）

2）使用来自ajax调用的响应加载json数据。

3）google就像我可以用来过滤数据的单个文本框。

我遇到的所有样本都在使用分页，我知道这是最常见的用例。

此致斯蒂芬

顺便说一句

jqGrid是我遇到过的最具记录性的网格，它在我的书中很明显，而且Oleg和Co.在回答问题方面非常积极的事实使得学习曲线和采用非常顺利。

编辑1

 var myGrid = $('#favoriteGrid'),
            decodeErrorMessage = function (jqXHR, textStatus, errorThrown) {
                var html, errorInfo, i, errorText = textStatus + '\n' + errorThrown;
                if (jqXHR.responseText.charAt(0) === '[') {
                    try {
                        errorInfo = $.parseJSON(jqXHR.responseText);
                        errorText = "";
                        for (i = 0; i < errorInfo.length; i++) {
                            if (errorText.length !== 0) {
                                errorText += "<hr/>";
                            }
                            errorText += errorInfo[i].Source + ": " + errorInfo[i].Message;
                        }
                    }
                    catch (e) { }
                } else {
                    html = /<body.*?>([\s\S]*)<\/body>/.exec(jqXHR.responseText);
                    if (html !== null && html.length > 1) {
                        errorText = html[1];
                    }
                }
                return errorText;
            };


    myGrid.jqGrid({
        url: '/Buyer/Favorite/ProductGroupService/2976171424',
        datatype: 'json',
        mtype: 'GET',
        height: '100%',
        colNames: ['Row No', 'Qty', 'Features', 'Item Nbr', 'Brand', 'Product', 'Supplier', 'Price', 'UOM', 'Case Pack', 'Remarks', 'Ave Weight', 'Par', 'Last Purchase', 'Sort'],
        colModel: [
            { name: 'Id', index: 'Id', hidden: true },
            { name: 'Quantity', index: 'Quantity', width: 20, editable: true, edittype: 'text', editoptions: { size: 10, maxlength: 15} },
            { name: 'ProductAttributes', index: 'ProductAttributes', width: 50 },
            { name: 'ItemNum', index: 'ItemNum', width: 60, align: "right" },
            { name: 'BrandName', index: 'BrandName', width: 100, align: "left" },
            { name: 'ProducName', index: 'ProducName', width: 150, align: "left" },
            { name: 'SupplierName', index: 'SupplierName', width: 100, align: "left" },
            { name: 'Price', index: 'Price', width: 80, align: "right" },
            { name: 'UOM', index: 'UOM', width: 80, align: "left" },
            { name: 'CasePack', index: 'CasePack', width: 80, align: "left" },
            { name: 'PackageRemarks', index: 'PackageRemarks', width: 80, align: "left" },
            { name: 'AveWeight', index: 'AveWeight', width: 80, align: "right" },
            { name: 'Par', index: 'Par', width: 80, align: "right" },
            { name: 'LastPurchaseDate', index: 'LastPurchaseDate', width: 80, align: "right" },
            { name: 'SortPriority', index: 'SortPriority', hidden: true }
        ],
        multiselect: true,
        //          cellEdit : true,
        //          cellsubmit : 'remote',
        pager: '#favoritePager',
        rowNum: 10,
        rowList: [5, 10, 20, 50],
        sortname: 'Id',
        sortorder: 'desc',
        rownumbers: true,
        viewrecords: true,
        altRows: true,
        altclass: 'myAltRowClass',
        height: '100%',
        gridview: true,
        jsonReader: { cell: "" },
        loadonce: true,
        caption: "Products List",
        loadError: function (jqXHR, textStatus, errorThrown) {
            // remove error div if exist
            $('#' + this.id + '_err').remove();
            // insert div with the error description before the grid
            myGrid.closest('div.ui-jqgrid').before(
                '<div id="' + this.id + '_err" style="max-width:' + this.style.width +
                ';"><div class="ui-state-error ui-corner-all" style="padding:0.7em;float:left;"><span class="ui-icon ui-icon-alert" style="float:left; margin-right: .3em;"></span><span style="clear:left">' +
                decodeErrorMessage(jqXHR, textStatus, errorThrown) + '</span></div><div style="clear:left"/></div>')
        },
        loadComplete: function () { 
            // remove error div if exist
            $('#' + this.id + '_err').remove();
        },
        ondblClickRow: function (rowid, ri, ci) {
            // 
        },
        gridComplete: function () { 
            $("#favoriteGrid").addClass("nodrag nodrop");
            $("#favoriteGrid").tableDnDUpdate();
        }
    });

编辑2 实施了Oleg re：json url的建议并删除了拖放

编辑3 添加了来自服务器的JSON响应

{
"total":321,
"page":1,
"records":1000,
"rows":[
{"Id":0,"Selected":false,"Quantity":1,"ProductAttributes":null,"ItemNum":"6199335","BrandName":"KELLOGG","ProducName":"CEREAL ASST FAMILY PACK","SupplierName":"SYSCO","Price":33.89,"UOM":"CA","CasePack":"72 PK","PackageRemarks":"INDIV","AveWeight":"4.59 LB","Par":null,"SortPriority":19,"LastPurchaseDate":null,"GLCode":"7115-10","OldProductId":null,"CategoryName":"Food-Canned Goods","ProductID":2285668889,"ImageInfo":null},
{"Id":1,"Selected":false,"Quantity":1,"ProductAttributes":null,"ItemNum":"6199335","BrandName":"KELLOGG","ProducName":"CEREAL ASST FAMILY PACK","SupplierName":"SYSCO","Price":34.19,"UOM":"CA","CasePack":"72 PK","PackageRemarks":"INDIV","AveWeight":"4.59 LB","Par":null,"SortPriority":19,"LastPurchaseDate":null,"GLCode":"7115-10","OldProductId":null,"CategoryName":"Food-Canned Goods","ProductID":2285668889,"ImageInfo":null}
]}

Answer 1

您可以使用loadonce: true并且应该立即返回所有数据（但是正确的排序数据）。首次加载网格后，datatype将自动从“json”更改为“local”，因此不会完成更多的Ajax请求。您还可以使用searching filter或advanced searching对话框中的本地数据分页，排序或过滤，或者同时使用两者（请参阅the demo中的the answer）。所有这些都可以在不需要编写任何服务器代码的情况下工作。

如何将jqGrid（4.x）配置为Uber Grid

1 个答案: