关于jquery:向jqGrid顶部工具栏添加按钮

 2021-04-27 

Adding button to jqGrid top toolbar

看起来jqGrid的默认工具栏总是在底部。诸如"下一页/上一页"之类的按钮以及用于选择每页行数的下拉菜单始终显示在网格的底部。

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

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


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

1
2
3
4
/** 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);

这些行可以解决问题:)


享受:

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

我不明白为什么拥有顶级工具栏如此重要。您是否不使用分页或网格中有很多行,以至于没有滚动就无法看到底部的工具栏?还是有其他原因?

jqGrid的boolean toppager参数(请参阅网格的设置选项)可创建附加的首页寻呼机。您可以显示工具栏,请参阅工具栏参数,但是我不确定您使用的术语与jqGrid相同。查看jqGrid演示上的演示(展开"版本3.1的新功能")。也许您是说导航栏?

通常,jqGrid将显示HTML片段,并将所有片段与一些预定义的div元素分开。导航栏将放置在div内,其ID为id =" pg_pager "和class =" ui-pager-control "。您可以例如针对jQuery操作jqGrid,以将div移至其他位置。如果实现了这种移动,则每次在gridComplete事件句柄内(或在激发另一个完成事件之后)都应重做一次。

编辑:就jQuery('#element_to_be_moved').insertAfter('#existing_element')jQuery('#element_to_be_moved').insertBefore('#existing_element')而言,很容易将现有的HTML片段移动到另一个位置。在主网格中单元格的jqGrid页脚单元格"继承" CSS中,我描述了一些重要的div的名称,这些名称是jqGrid的一部分。祝您在编码中取得成功。


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

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

上面的代码经过一些小的CSS调整,也将搜索/刷新按钮也复制到了toppager中,并保留了它们的事件/行为。