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

Posted 2023-02-26

【中文标题】rowList 的文本框而不是 jqGrid 寻呼机中的选择

【英文标题】：Textbox for rowList instead of select in jqGrid pager

【发布时间】：2014-06-18 07:51:06

【问题描述】：

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

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

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

提前致谢！！

【问题讨论】：

试试：neoalchemy.org/tablePagination.html

【参考方案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;

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

【讨论】：

对不起，我是 jqGrid 的新手。如何在寻呼机中放置文本框和按钮。

@malkam：getPagerSelectors() 函数帮助您选择选择器。 jQuery 方法如after、insertAfter 和许多其他方法允许您将一些元素移动到页面的另一个位置。 The demo 可能是最简单的例子。它使用<span id="mycontrols">...</span> 包含所有新控件，并使用$("#mycontrols").insertAfter(getPagerSelectors().first()); 移动控件。

@malkam：我为您做了更多示例，展示了如何在寻呼机中移动输入元素。请参阅我的回答的已更新部分。