rowList的文本框而不是jqGrid pager中的select

Question

是否可以让textbox和button指定页面大小，而不是使用select选项。

我想要下面的寻呼机

用户可以在第一个文本框中输入页码，仅在单击“开始”按钮时刷新网格，用户可以通过编辑第二个文本框更改页面大小，然后单击“更改”网格需要刷新更新的总页数，页面大小等..

提前致谢!!

Answer 1

一切皆有可能！ The demo演示了可能的实现之一。它使用外部输入控制：

以相同的方式将控件移动到寻呼机/寻呼机，您可以强制单击 Enter 键上的“更改”按钮，依此类推。我只是想证明如何实现这些要求。我在演示的底部使用了toppager和第二个寻呼机，以证明该方法也适用于该案例。

演示中使用的代码如下：

var getPagerSelectors = function () {
        return $("#list").closest(".ui-jqgrid").find(">.ui-jqgrid-view>.ui-jqgrid-toppager,>.ui-jqgrid-pager").find(".ui-pg-selbox");
    };
$("#setRowNum").button().click(function () {
    var newRowNum = parseInt($("#newRowNum").val(), 10);
    if (newRowNum > 0) {
        var $selects = getPagerSelectors();
        var $firstOption = $selects.find("option:nth-child(1)");
        $firstOption.text(newRowNum);
        $firstOption.val(newRowNum);
        $selects.first().val(newRowNum);
        $selects.first().trigger("change");
    }
});
getPagerSelectors().hide();

如果删除了最后一行（getPagerSelectors().hide();），我会看到我只是更改了jqGrid用于选择页面大小的<select>中第一个选项的值，将选项设置为选中并在第一个寻呼机中触发"change"事件。这就是全部。

更新：One more demo使用insertAfter移动用于输入新页面大小的控件。结果如下所示

我使用了以下CSS样式

.ui-jqgrid .ui-jqgrid-pager, .ui-jqgrid .ui-jqgrid-toppager {
    height: auto !important;
}
.ui-jqgrid .ui-pg-table {
    padding-bottom: 0;
}

在添加新组件后稍微改善寻呼机的高度。