Question

看起来jqGrid的默认工具栏始终位于底部。像Next / Prev页面这样的按钮和用于选择每页行数的下拉列表将始终显示在网格的底部。

我找到了一种添加自定义顶部工具栏并将自定义按钮推入其中的方法。

真正需要的是一种将默认功能（如分页）添加到网格顶部而非底部的方法。

Answer 1

要使网格顶部的工具栏具有与底部工具栏相同的按钮和事件，您必须激活toppager:true到网格的定义并在定义后添加下一行

/** Duplicating the Nav Toolbar in top **/
var toolbarClone = $('#pager_left').clone(true);
// Assuming that your grid's ID is myGrid
$('#myGrid_toppager_left').prepend(toolbarClone);

这些线路可以解决问题：）

Answer 2

我不明白为什么拥有顶部工具栏这么重要。你没有使用分页或网格中有很多行，没有滚动就看不到底部工具栏？还是有另一个原因？

jqGrid有一个boolean toppager参数（参见setting options for the grid）来创建额外的top pager。您可以显示工具栏查看工具栏参数，但我不确定您使用与jqGrid相同的术语。查看jqGrid Demos上的演示（展开“3.1版中的新功能”）。可能你的意思是导航栏？

一般来说，jqGrid会显示HTML片段并将其全部除以一些预定义的div元素。导航栏将放在div中，id =“pg_pager”和class =“ui-pager-control”。你可以使用jQuery操作jqGrid，例如在另一个地方移动这个div。如果你实现了这样的移动，你应该每次在gridComplete事件句柄内（或者在触发一个其他完成事件之后）重做这个。

已编辑：很容易将现有的HTML片段移动到jQuery('#element_to_be_moved').insertAfter('#existing_element')或jQuery('#element_to_be_moved').insertBefore('#existing_element')的其他位置。在jqGrid footer cells "inherits" CSS from cells in the main grid中，我描述了一些重要的 div 的名称，它们是jqGrid的一部分。我祝你在编码方面取得很大成功。

Answer 3

享受：

$('#datagridnav').insertBefore('#t_datagrid'); //relocate footer to top

Answer 4

我升级到jqgrid 3.7.2，希望它的toppager参数有所帮助。虽然它确实将分页控件置于顶部，但搜索按钮并没有出现在那里。

// assuming a jqgrid with id='the_grid'
$('#the_grid_pager_left').clone(true).insertBefore('#the_grid_toppager_center')

以上，通过一些小的CSS调整，将搜索/刷新按钮复制到了toppager中，并保留了他们的事件/行为。

将按钮添加到jqGrid顶部工具栏

4 个答案: