rowList 的文本框而不是 jqGrid 寻呼机中的选择

Question

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

我想要像下面这样的寻呼机

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

提前致谢！！

Answer 1

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

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

演示中使用的代码如下：

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> 中第一个选项的值，将选项设置为选中并触发@987654329 @ 第一个寻呼机中的事件。就是这样。

更新：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;
}

在添加新组件后稍微提高分页器的高度。