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

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,或者在请求的情况下在HTTP主体中发送,"POST"即:rows,page,sidx,sord.

例如,如果您的表有一个索引'Col1'为当前排序列的列,rowNum: 20那么您的URL将被追加baseUrl?rows=20&page=1&sidx=Col1&sord=asc.您的服务器端编码应该修改您的数据查询,以便它具有ORDER BY (Col1 datafield in the table) asc和rowNum from 1 to 20.

如果您已完成上述操作并且无法正常工作,则应验证服务器代码.