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

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 有一个布尔 toppager 参数（请参阅网格的设置选项）来创建附加的顶部分页器。您可以显示工具栏，请参阅工具栏参数，但我不确定您是否使用与 jqGrid 相同的术语。查看jqGrid 演示上的演示（展开“版本 3.1 中的新增功能”）。也许你指的是导航栏？

一般来说，jqGrid 会显示 HTML 片段，并用一些预定义的 div 元素来划分所有片段。导航栏将放置在 id="pg_pager" 和 class="ui-pager-control" 的 div 内。您可以使用 jQuery 操作 jqGrid，例如将此 div 移动到其他位置。如果实现此类移动，则应每次在 gridComplete 事件句柄内（或在触发其他完成事件后）重做此操作。

编辑：很容易将现有的 HTML 片段移动到与jQuery('#element_to_be_moved').insertAfter('#existing_element')或相关的另一个位置jQuery('#element_to_be_moved').insertBefore('#existing_element')。在jqGrid 页脚单元格从主网格中的单元格“继承”CSS中，我描述了一些重要的div的名称，它们是 jqGrid 的一部分。祝您在编码方面取得成功。