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

【问题标题】：Adding button to jqGrid top toolbar将按钮添加到 jqGrid 顶部工具栏
【发布时间】：2011-02-10 08:33:38
【问题描述】：

看起来 jqGrid 的默认工具栏总是在底部。下一页/上一页等按钮和用于选择每页行数的下拉菜单将始终显示在网格底部。

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

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

【问题讨论】：

【解决方案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);

这些行会成功:)

【讨论】：

【解决方案2】：

我不明白为什么拥有顶部工具栏如此重要。您是否使用不分页或网格中有很多行，如果不滚动就看不到底部工具栏？还是有别的原因？

jqGrid 有布尔 toppager 参数（参见setting options for the grid）来创建额外的顶部分页器。您可以显示工具栏查看工具栏参数，但我不确定您使用与 jqGrid 相同的术语。查看jqGrid Demos 上的演示（展开“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 footer cells "inherits" CSS from cells in the main grid 中，我描述了一些重要的div 的名称，它们是jqGrid 的一部分。祝你在编码方面取得成功。

【讨论】：

Oleg...查看 3.1 版中的新演示，我似乎无法复制此示例。 t_toolbar1 DIV 定义在哪里？
@Bean：如果我正确理解您的问题，您需要在网格中添加 toolbar: [true, "top"] 或 toolbar: [true, "both"] 选项。它创建工具栏over 网格或under 网格。顶部工具栏的 id 将由“t_”和网格构建。底部工具栏的 id 将是tb_ + gridid。

【解决方案3】：

享受：

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

【讨论】：

【解决方案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，并保留了它们的事件/行为。

【讨论】：