Question

我对jQgrid 5.1.0进行了以下设置：

<div id="grid_container">
    <table id="grid"></table>
    <div id="gridpager"></div>
</div>

<script type="text/javascript">
    $.fn.fmatter.btnFormatter = function (cellValue, options, rowData, addOrEdit) {
        var btn =
            '<a href="#">' +
            '<img class="api_button" data-id="' + options.rowId + '" src="/images/icons/16x16/view.png" alt="Show API Response data" title="Show API Response data" />' +
            '</a>' +
            '<a href="#">' +
            '<img class="error_button" data-id="' + options.rowId + '" src="/images/icons/16x16/view.png" alt="Show errors" title="Show errors" />' +
            '</a>';
        return btn;
    };

    $(function () {
        $("#grid").jqGrid({
            url: '/sf/api-logs',
            datatype: "json",
            colNames: {{ colNames|raw }},
            colModel: {{ colFormats|raw }},
            width: 980,
            height: 300,
            pager: "#gridpager",
            toppager: true,
            hoverrows: true,
            shrinkToFit: true,
            autowidth: true,
            rownumbers: true,
            viewrecords: true,
            rowList: [10, 20, 50, 100],
            data: [],
            rownumWidth: 50,
            sortable: true,
            jsonReader: {
                root: 'rows',
                page: 'page',
                total: 'total',
                records: 'records',
                cell: '',
                repeatitems: false
            },
            loadComplete: function (data) {
                if (data.records === 0) {
                    $("#load_grid").addClass("info_msg").html($("<span>", {
                        "class": "grid-empty",
                        "text": "No results were found."
                    })).delay(800).fadeIn(400);
                }
            }
        }).on('click', '.api_button', function () {
            var apiResponseContent = $('#apiResponseContent');
            $.ajax({
                type: "GET",
                url: '/sf/api-logs/api-response',
                data: {id: $(this).data('id')},
                dataType: 'json',
                success: function (data) {
                    if (typeof data[0].error !== 'undefined') {
                        apiResponseContent.text(data[0].error);
                    }

                    apiResponseContent.text(data[0].apiResponse);
                    $('#api_dialog').dialog('open');
                }
            });

            return false;
        });

        $('#api_dialog').dialog({
            autoOpen: false,
            width: 600,
            height: $(window).height() * 0.9,
            modal: true,
            buttons: {
                Ok: function () {
                    $(this).dialog('close');
                }
            }
        }).show();
    });
</script>

但是如下图所示，分页不起作用，刷新网格的小图标也没有显示，我在这里做错了什么？

更新

我已设法通过添加以下代码来显示refresh按钮：

$('#grid').jqGrid('navGrid', '#gridpager', {
    edit: false,
    add: false,
    del: false,
    search: false,
    refresh: true,
    refreshstate: "current"
})

但它只会出现在#gridpagger上，如果我还希望它也在顶部栏上呢？

以下是服务器返回的数据示例：https://gist.github.com/reypm/b1d2a303ba471261e55d72bbef099b74

Answer 1

您报告了两个问题：分页不起作用，刷新按钮仅出现在底部寻呼机上（不在顶级寻呼机上）。

“刷新”按钮的问题似乎很简单。您使用商业 Guriddo，它可能仍然具有与jqGrid 4.7等寻呼机相同的逻辑。旧的jqGrid有两个寻呼机选项：pager和toppager，这些值必须以不同的方式指定。使用toppager很简单：可以添加toppager: true选项，jqGrid将生成top-pager div本身，并将toppager的值从true替换为id选择器新寻呼机。它将是toppager: "#grid_toppager"。另一方面，要在网格底部创建寻呼机，必须在HTML页面虚拟div上创建，如<div id="gridpager"></div>并使用pager参数形式pager: "gridpager"。 jqGrid将移动 div在网格内的另一个地方并用数据填充它。其他方法（如navGrid，inlineNav，navButtonAdd必须使用#gridpager或"#grid_toppager"作为参数来创建导航栏并向栏添加按钮。因此，您必须使用像

这样的代码
$('#grid').jqGrid('navGrid', '#grid_toppager', { edit: false, add: false, del: false, search: false, refreshstate: "current" });

或

var $grid = $('#grid'), topPagerSelector = $grid.jqGrid('getGridParam', 'toppager'); $grid.jqGrid('navGrid', topPagerSelector, { edit: false, add: false, del: false, search: false, refreshstate: "current" });

在顶层页面上创建导航栏并向其添加“刷新”按钮。或者，您可以使用cloneToTop: true的{{1}}选项向两个寻呼机添加相同的寻呼机：

navGrid

如果您只想拥有一个热门寻呼机，则无法使用该选项。您必须使用$('#grid').jqGrid('navGrid', '#gridpager', { cloneToTop: true, edit: false, add: false, del: false, search: false, refreshstate: "current" });方法{/ 1}}。

我开发了jqGrid的free jqGrid分叉。我简化了2015年发布的第一版免费jqGrid中的行为：请参阅the wiki article。可以像'#grid_toppager'一样使用navButtonAdd，pager: true，toppager: true，navGrid可以跳过分页参数。 inlineNav的用法可能是

navButtonAdd

在网格的所有寻呼机（顶部，底部或两者）上添加导航按钮。

免费jqGrid和Guriddo jqGrid之间只有一个小区别。还有数百个其他变化。即使你payed Guriddo jqGrid许可，我建议你考虑迁移到免费的jqGrid。我建议您阅读the page，其中包含有关免费jqGrid使用情况的基本信息。

由于服务器的响应错误，数据分页无法正常工作。它看起来像

navGrid

您使用$('#grid').jqGrid('navGrid', { edit: false, add: false, del: false, search: false, refreshstate: "current" });选项不带 { "page": 1, "total": 0, "records": 67, "rows": [ { "id": "590a363477336501ad44ab02", "dataObject": "Account", ...}, ... { "id": "590c97197ad70f00575a310a", "dataObject": "AgreementHistory", ...} ] }选项，该选项对应服务器端分页。这意味着jqGrid使用datatype: "json"和loadonce: true参数发送给url个请求。发送jqGrid的第一个请求将包含rows（20是jqGrid的page参数的默认值），服务器必须返回20行或更少的行（仅返回一个请求的数据页面）。其他page=1&rows=20和rowNum属性会向jqGrid通知总数或页数和记录。根据{{1}}参数的值，jqGrid将禁用寻呼机按钮，用户将无法正确进行分页。

另一方面，您的服务器响应包含 total属性的错误值以及所有67行而不是20行请求的行。其他47行服务响应将被jqGrid忽略。

如果您有场景，记录总数不大（例如67），那么建议添加records选项（以及total以防万一使用免费jqGrid）并修改服务器响应

total

网格的所有行。 jqGrid将填充内部loadonce: true参数，它会在第一次加载数据后自动将forceClientSorting: true更改为[ { "id": "590a363477336501ad44ab02", "dataObject": "Account", ...}, ... { "id": "590c97197ad70f00575a310a", "dataObject": "AgreementHistory", ...} ]。结果是分页，排序和过滤/搜索（尝试data datatype "local"）本地，而无需与服务器进行任何其他通信。它本质上简化了服务器代码并提高了jqGrid的性能。如果您使用足够小的页面大小（例如filterToolbar或search: true），即使是相对大量的行也可以非常快速地处理。您可以尝试the demo，每页60000行，15列和25行。您可以测试分页，排序和过滤的时间。

分页在jQgrid中不起作用，我缺少什么？

1 个答案: