jqgrid中的动态列数据、客户端排序和服务器分页答案

【问题标题】：dynamic column data, client side sorting and server pagination in jqgridjqgrid中的动态列数据、客户端排序和服务器分页
【发布时间】：2013-05-17 00:37:47
【问题描述】：

我第一次尝试从服务器加载动态列数据和列名，并使用服务器端分页。

问题是当我在 jqgrid AJAX 调用（第二个）中使用 datatype : 'local' 时，会显示数据并禁用服务器端分页。但是当我在 AJAX 调用中使用 datatype : 'json' 时，没有显示任何数据。

请帮我找一个简单明了的解决方案来实现动态列绑定、客户端排序和服务器端分页。

$(document).ready(function() {
                    $.ajax({
                                type : "POST",
                                url : contextPath + "/getEntities",
                                dataType : "json",
                                success : function(result) {
                                    var colD = result.response,
                                    colM = result.colModList,
                                    colN = result.colNames;

                                    $("#list").jqGrid({
                                        url : contextPath + "/getEntities",
                                        datatype : 'json',
                                        mtype : 'POST',

                                        data : colD,
                                        colNames : colN,
                                        colModel : colM,
                                        pager : '#pager',
                                        rowNum : 10,
                                        rowList : [ 10, 20, 30 ],
                                        sortname : 'column1',
                                        sortorder : 'asc',
                                        viewrecords : true,
                                        gridview : true,
                                        caption : 'My first grid',
                                    });

                                },
                                loadComplete : function() {
                                    $("#list").jqGrid('setGridParam',{datatype:'json'});
                                },

                                error : function(x, e) {
                                    alert(x.readyState + " " + x.status
                                            + " " + e.msg);
                                }
                            });
                });

从服务器接收到的 JSON 数据没有问题，因为我可以在设置数据类型 : 'local' 时看到数据（在第二个 AJAX 调用中）。如果有人提供一个工作示例，那将是一个很大的帮助。

另一个问题在我脑海中，为什么要重新加载网格以及如何做到这一点。在哪里放置重新加载代码。我没有得到这部分。

非常感谢任何帮助。

更新：已发布答案。非常适合使用服务器端分页实现动态列。

【问题讨论】：

我很困惑为什么你会在你的设置中使用datatype: local？
@Mark 我不想使用本地，因为我想使用服务器端分页来加载数据。只是为了测试我使用了本地并看到数据显示在网格中。
好的，现在让我们完全忽略 localdata，如果这样做，什么不起作用？
删除 data : colD,，因为它在 jqgrid 中没有位置，它正在从服务器获取它自己的数据。
@PravatPanda：如果你使用datatype : 'json'，那么url将用于填充数据，data参数将被忽略。如果您需要使用data 参数，您必须使用datatype: "local"。在这种情况下url 参数将被忽略。对您的代码的另一句话：您使用loadComplete 作为$.ajax 的参数，这是错误的。 loadComplete 是 jqGrid 的参数（回调函数）。 loadComplete 的当前代码不会做任何事情。

标签： jquery jqgrid

【解决方案1】：

工作代码：

$(document).ready(function() {
$.ajax({
        type : "GET",
        url : contextPath + "/getEntities",
        dataType : "json",
        success : function(result) {
            var colM = result.colModList,
            colN = result.colNames;

            $("#list").jqGrid({
                url : contextPath + "/getEntities",
                datatype : 'json',
                mtype : 'GET',
                jsonReader : {
                    root : "response",
                    page : "page",
                    total : "total",
                    records : "records",
                    repeatitems : false,
                    id : "column1"
                },
                colNames : colN,
                colModel : colM,
                pager : '#pager',
                rowNum : 10,
                rowList : [ 10, 20, 30 ],
                sortname : 'column1',
                sortorder : 'asc',
                viewrecords : true,
                gridview : true,
                caption : 'My first grid',
            });

        },
        error : function(x, e) {
            alert(x.readyState + " " + x.status
                    + " " + e.msg);
        }
    });
});

【讨论】：