jqGrid 導航按鈕移至頂部/右上角：gridComplete 動態插入工具欄容器

jqGrid 默認導航欄在底部。需求：移至標題欄下方或右上角。思路：gridComplete 事件中克隆底部導航內容插入自定義頂部容器。

實現代碼

$('#grid').jqGrid({
    // ... 其他配置
    gridComplete: function() {
        var $toolbar = $('#custom-toolbar');
        if (!$toolbar.length) {
            // 在標題欄下插入容器
            $(this).closest('.ui-jqgrid-bdiv')
                   .prev('.ui-jqgrid-hdiv')
                   .after('<div id="custom-toolbar" class="ui-jqgrid-toppager"></div>');
        }
        // 克隆導航按鈕
        var $pager = $(this).closest('.ui-jqgrid').find('.ui-pg-table');
        $pager.clone(true).appendTo('#custom-toolbar');
    }
});

CSS 微調

#custom-toolbar {
    padding: 4px 8px;
    background: #f5f5f5;
    border-bottom: 1px solid #ddd;
}
#custom-toolbar .ui-pg-button { margin: 0 2px; }

替代方案

• toppager: true 內置頂部分頁器（功能受限）
• 自定義按鈕 navButtonAdd 直接添加到頂部容器