0

我似乎无法让 jqGrid 分页工作。当我单击next/prev/reload或尝试过滤时,它没有发出请求。只要我点击这些按钮中的任何一个,所有的记录都会消失。

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

 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');

4

1 回答 1

5

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

如果您使用jqGrid 选项loadonce:falsedatatype:"json"那么您的服务器必须实现网格的分页。服务器接收一些参数,这些参数在请求的情况下附加到 url'GET'或在请求的情况下在 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) ascrowNum from 1 to 20.

如果您已按照上述方式完成但仍无法正常工作,则应验证您的服务器代码。

于 2013-04-26T07:19:44.293 回答