Question

我似乎无法让jqGrid分页工作。当我点击下一个/上一个/重新加载或当我尝试过滤时，它没有提出请求。一旦我点击任何这些按钮，所有记录都会消失。

这是发送的初始请求，因此您可以看到所有这些参数都被传入。

 https://www.xxxxxxx.com/getallorders?contactId=333&bucketId=444&_search=false&nd=1366982305621&rows=2‌0&page=1&sidx=PKId&sord=desc

这会返回正确数量的记录，如果我手动执行它并传入，请说 page = 2 我会得到适当的回复。问题似乎是没有提出请求。

jQuery("#grid").jqGrid({
    url:'/GetAllOrders',
    mtype: "GET", 
    datatype: "json", 
    jsonReader: {
        root: "Rows",
        page: "Page",
        total: "Total",
        records: "Records",
        repeatitems: false,
        userdata: "UserData",
        id: "Id"
    },
    postData: {
        contactId: currentUserId,
        bucketId: currentBucketId
    },
    colNames:[
        'Id',
        'Cancel',
        'Order #',
        'Order Date',
        'Bucket', 
        'Warehouse',
        'Destination',
        'Status',
        'Tracking #',
        'Transport By',
        'Ordered By',
        'Order Items'
    ],
    colModel:[
        {name:'Id',index:'Id', width:5, align:"center", hidden: true},
        {name:'Cancel', index:'Cancel',width:80, align:"center", formatter: cancelLinkFormatter, search:false },
        {name:'OrderNumber',index:'OrderNumber', width:80, align:"center"},
        {name:'OrderDate',index:'OrderDate', width:140, align:'right'},
        {name:'Bucket',index:'Bucket', width:180, align:"center", hidden: false},
        {name:'Warehouse',index:'Warehouse', width:80, align:"center", hidden: true},
        {name:'Destination',index:'Destination', width:150},
        {name:'StatusCode', index:'StatusCode', width:100, align: 'center'},
        {name:'TrackingNumber', index:'TrackingNumber', width:100, align: 'center'},
        {name:'TransportCompany', index:'TransportCompany', width:100, align: 'center'},
        {name:'OrderedBy', index:'OrderedBy', width:100, align: 'center'},
        {name:'OrderItems', index:'OrderItems', width:100, align: 'center'}
    ],
    viewrecords: true, 
    rowNum: 20,
    autowidth: false,
    width: 860,
    height: 450,
    rowList:[10,20,30,40,50],
    pager: jQuery('#pager'),
    sortname: 'Id',
    align: 'center',
    sortorder: "desc",
    loadonce: false,
    ignoreCase: true,
    caption:"Orders"
}).navGrid('#pager',{edit:false,add:false,del:false});
setSearchSelect('StatusCode');
jQuery("#grid").jqGrid('filterToolbar', {stringResult: true, searchOnEnter: false, defaultSearch: "cn"});

这是我在初始加载时从服务器获得的json响应。

{
"Total":2,
"Page":1,
"Records":28,
"Rows":[
    {
        "PKId":1234,
        "OrderNumber":"XXXXXX97",
        "Cancel":"Cancel",
        "OrderDate":"Jul 11 2012 12:37PM",
        "Warehouse":"",
        "Bucket":"xxxxxxxx",
        "StatusCode":"Shipped Complete",
        "StatusLink":"View Info",
        "TrackingNumber":"xxxxxxx",
        "TransportCompany":"xxxxxxxx",
        "Destination":"xxxxxxx",
        "BucketId":110,
        "ShippingEmail":"xxxxxxxx",
        "OrderedBy":"xxxxxxxx",
        "OrderItem":"xxxxxxx"
    },
    .... MORE DATA HERE ... 20 OBJECTS ALL-TOGETHER WITHIN Rows Array
    {
        "PKId":13434,
        "OrderNumber":"XXXXXX97",
        "Cancel":"Cancel",
        "OrderDate":"Jul 11 2012 12:37PM",
        "Warehouse":"",
        "Bucket":"xxxxxxxx",
        "StatusCode":"Shipped Complete",
        "StatusLink":"View Info",
        "TrackingNumber":"xxxxxxx",
        "TransportCompany":"xxxxxxxx",
        "Destination":"xxxxxxx",
        "BucketId":110,
        "ShippingEmail":"xxxxxxxx",
        "OrderedBy":"xxxxxxxx",
        "OrderItem":"xxxxxxx"
    },
],
"UserData":null
}

有什么建议吗？

顺便说一下，当我使用loadonce: true并且我一次加载所有数据时，分页和过滤工作正常，但是，由于记录太多，我只需要切换到服务器端。

修改我发现了这个问题。首先，我很抱歉不包括其余的代码。你看，我也有loadComplete，这对我来说是个问题。问题中的代码是有效的，所以我要感谢大家的参与。

这是造成问题的loadComplete。删除后，它开始正确分页。

        loadComplete: function() {
        setParamsOnComplete();
        var myGrid = jQuery("#grid");
        var ids = myGrid.getDataIDs();
        for (var i = 0, idCount = ids.length; i < idCount; i++) {
            jQuery("#"+ids[i]+" a",myGrid[0]).click(function(e) {
                var hash=e.currentTarget.hash;// string like "#?id=0"
                if (hash.substring(0,6) === "#S?id=") {
                    var id = hash.substring(6,hash.length);
                    var text = this.textContent || this.innerText;
                    dialog.dialog({ title: 'Status Information', 
                        buttons:{   Ok: function() {
                                        jQuery( this ).dialog("close");
                                    }
                                },
                        open:   function() {
                                    jQuery('.ui-dialog-buttonpane').find('button:contains("Ok")').css('font-size', '10px');
                                }          
                    });
                    dialog.dialog('open');
                }
                if (hash.substring(0,6) === "#C?id=") {
                    var id = hash.substring(6,hash.length);
                    var text = this.textContent || this.innerText;
                    var changed = false;
                    var additionalMesages = "";
                    jQuery.post("DataFetcher.asp", { 'action': "cancelOrder", 'id':id }, function(xml) {
                        changed = (xml === 'True');
                        additionalMesages = xml;
                    }).success(function(){ 
                        if (changed){
                            showDialogCustomTitle("Success", "You've successfully cancelled the order " + id + ".");
                            jQuery("#grid").setGridParam({datatype:'xml', page:1}).trigger('reloadGrid');
                        }else if (additionalMesages.split("_")[1] == "2"){
                            showDialogCustomTitle("Error", additionalMesages.split("_")[2]);
                        }else if (additionalMesages.split("_")[1] == "1"){
                            showDialogCustomTitle("Error", additionalMesages.split("_")[2]);
                        }
                    });
                }
                //e.preventDefault();
            });
        }  
    },

我的下一个任务是找出loadComplete导致问题的原因。

编辑2 找到loadComplete的第一个问题。我昨晚太累了注意到它，但是这个网格填充xml并在客户端分页的剩余代码肯定会导致问题。谢谢大家再次参与。：）

jQuery("#grid").setGridParam({datatype:'xml', page:1}).trigger('reloadGrid');

Answer 1

由于您已设置loadonce:false，因此请求分页和过滤尝试在服务器端进行处理。由于在您的情况下可能不会发生这种情况，因此没有数据可以返回并在jqGrid中设置。

如果您使用loadonce:false和datatype:"json" jqGrid选项，那么您的服务器必须实现网格的分页。服务器接收一些参数，这些参数在'GET'请求的情况下附加到url，或者在"POST"请求的情况下在HTTP正文中发送，即： rows，page，sidx，sord 。

例如，如果您的表格中包含索引为'Col1'的列作为当前排序列并且rowNum: 20，那么您的网址将附加baseUrl?rows=20&page=1&sidx=Col1&sord=asc。您的服务器端编码应修改您的数据查询，以便它具有ORDER BY (Col1 datafield in the table) asc和rowNum from 1 to 20。

如果您已完成上述操作且无效，则应验证服务器代码。

jqGrid分页无法使用json数据类型

1 个答案: