无法在 jqGrid 上方定位寻呼机（导航栏）答案

【问题标题】：Unable to position pager (navigation bar) above jqGrid无法在 jqGrid 上方定位寻呼机（导航栏）
【发布时间】：2011-05-23 02:15:28
【问题描述】：

根据 jqGrid 文档，我应该能够通过移动寻呼机 div 将寻呼机放置在 jqGrid 上方或下方。不幸的是，寻呼机总是呈现在网格下方。

<div id="pager"></div>
<table id="list">
    <tr>
        <td />
    </tr>
</table>

jqGrid 配置（与寻呼机相关）如下所示：

pager: '#pager',
pginput: false,
pgbuttons: false,

有什么建议吗？

【问题讨论】：

标签： jqgrid position pager

【解决方案1】：

您应该改用toppager:true jqGrid 选项。您不需要定义 <div id="pager"></div> 并使用 pager: '#pager' 参数。 jqGrid 顶部的寻呼机 id 将是“list_toppager”（表元素的 id 附加“_toppager”）。

如果你想添加导航器可以使用

$("#list").jqGrid('navGrid','#list_toppager');

如果您使用定义<div id="pager"></div> 并使用pager: '#pager' 参数，您将拥有两个寻呼机：一个在网格顶部带有id="list_toppager"，另一个在底部带有id="pager"。如果您想同时使用顶部和底部寻呼机，您可以使用

$("#list").jqGrid('navGrid','#pager',{cloneToTop:true});

然后移动或删除（有关更多详细信息和演示示例，请参阅another answer）。您还可以使用jQuery.insertAfter 功能非常轻松地将按钮从一个工具栏移动到另一个工具栏（请参阅here）。

【讨论】：

感谢您的澄清，奥列格。像往常一样出色。
Oleg + StackOverflow = 真正的 jqGrid 文档

【解决方案2】：

使用 $ 附加。上表的html是这样的

<div id="export"></div>

添加 id 并使用 promise().done(): "exportButton"

$(grid).jqGrid('navButtonAdd', self.options.pagerSelector, { id: "exportButton", caption: "Export to CSV", buttonicon: "ui-icon-newwin", onClickButton: function() { self._exportToCSV(self, grid); }, position: "last", title: "Export to CSV", cursor: "pointer" })
.promise().done(function() {
    //reposition export button
    $("#export").append($("#exportButton"));
    $("#exportButton").addClass("pull-right").show();
});

【讨论】：