Невозможно расположить пейджер (панель навигации) над jqGrid - PullRequest
Новая
       36

Невозможно расположить пейджер (панель навигации) над jqGrid

11 голосов
/ 09 декабря 2010

Согласно документации jqGrid, я должен быть в состоянии разместить пейджер выше или ниже jqGrid, перемещая div пейджера.К сожалению, пейджер всегда отображает ниже сетки. 

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

Конфигурация jqGrid (связанная с пейджером) выглядит следующим образом: 

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

Есть предложения?

Ответы [ 2 ]

33 голосов
/ 09 декабря 2010

Вместо этого вы должны использовать toppager:true jqGrid. Вам не нужно определять <div id="pager"></div> и использовать параметр pager: '#pager'. Идентификатор пейджера в верхней части jqGrid будет «list_toppager» (идентификатор элемента таблицы, к которому добавлен «_toppager»).

Если вы хотите добавить навигатор, вы можете использовать 

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

Если вы используете определение <div id="pager"></div> и параметр pager: '#pager', у вас будет два пейджера: один с id="list_toppager" сверху сетки и другой с id="pager" снизу. Если вы хотите использовать как верхний, так и нижний пейджер, вы можете использовать 

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

, а затем переместите или удалите (см. другой ответ для получения дополнительной информации и демонстрационного примера). Вы также можете очень легко перемещать кнопки с одной панели инструментов на другую, используя функцию jQuery.insertAfter (см. здесь ).

0 голосов
/ 28 января 2014

используйте $ append.HTML-таблица выше выглядит следующим образом: 

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

добавьте идентификатор и используйте обещание (). 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();
});
...