在一个项目中，表格插件使用的是jqGrid，操作按钮都在底部分页工具栏的最左侧，让领导看了一下页面，领导说要把操作按钮全部放到表格的顶部，在网上查了一下，找到如下两种方法：
1.添加toolbar: [true,"top"]配置（可参考http://trirand.com/blog/jqgrid/jqgrid.html中New in version 3.1->Toolbars and userdata 中的样例代码）
2.将分页工具栏放到表格的顶部，但我测试时，会在顶部和底部都出现分页工具栏（可能是我配置的不对）
在项目中按钮都是通过jqGrid的navGrid和navButtonAdd方法添加的，如果使用方法一，则我需要将按钮全部重新定义一次，修改量太大，如果使用方法二，则会出现两个分页工具栏，且领导只让分页工具栏显示在表格的底部，故放弃上述两种方法。
这时我就再想，能不能给jqGrid添加一个扩展呢，最后想到一种扩展思路：在表格的顶部创建一个和底部分页工具栏一样的div(不包含分页按钮等内容)，然后在调用navGrid和navButtonAdd方法时，将按钮渲染到顶部创建的这个div中，于是分析jqGrid源码及前台渲染的html。
经过不断的尝试，按照上面的思路，终于写出了这个扩展，该扩展添加了如下配置项：
| 配置项 | 参数类型 | 描述 |
| topToolbar | boolean | 是否开启顶部工具栏 |
| topToolbarId | string | jqGrid顶部工具栏ID,此id必须唯一，在创建顶部工具栏时，将会使用此ID |
jqGrid表格初始化代码如下：
jQuery("#grid-table").jqGrid({
//扩展配置项,是否开启顶部工具栏
topToolbar:true,
//扩展配置项,jqGrid顶部工具栏ID,此id必须唯一，在创建顶部工具栏时，将会使用此ID
topToolbarId:'grid-table-top-toolbar',
url:basePath+"audit/initGrid.do",
datatype:"json",
mtype:"POST",
height: "300",
//其他配置项省略
......
});添加导航按钮代码如下:
jQuery("#grid-table").jqGrid('navGrid',"#grid-table-top-toolbar",
{ //navbar options
add: false,
addicon : 'ace-icon fa fa-plus-circle purple',
addtitle : '新增',
addtext : '新增',
edit: false,
editicon : 'ace-icon fa fa-pencil blue',
edittitle : '修改',
edittext : '修改',
del: false,
delicon : 'ace-icon fa fa-trash-o red',
deltext : '删除',
deltitle : '删除所选扩展',
search: true,
searchicon : 'ace-icon fa fa-search orange',
searchtext : '查找',
refresh: true,
refreshicon : 'ace-icon fa fa-refresh green',
refreshtext : '刷新',
view: true,
viewicon : 'ace-icon fa fa-search-plus grey',
viewtext : '查看',
},
{//编辑表单开始
},//编辑表单结束
{//增加表单
},//增加表单结束
{//删除表单开始
},//删除表单结束
{//搜索表单
//search form
recreateForm: true,
closeAfterSearch: true,
afterShowSearch: function(e){
var form = $(e[0]);
form.closest('.ui-jqdialog').find('.ui-jqdialog-title').wrap('<div class="widget-header" />');
style_search_form(form);
},
afterRedraw: function(){
style_search_filters($(this));
}
,
multipleSearch: true,
},
{
//view record form
recreateForm: true,
beforeShowForm: function(e){
var form = $(e[0]);
form.closest('.ui-jqdialog').find('.ui-jqdialog-title').wrap('<div class="widget-header" />');
}
}
);添加自定义按钮代码如下：
jQuery("#grid-table").jqGrid('navButtonAdd', "#grid-table-top-toolbar", {
caption : "审计",
buttonicon:'ace-icon fa fa-lock red',
title:'审计日志',
id: 'sj',
onClickButton : function () {
}
});navGrid和navButtonAdd方法的调用方式没有改变，只是第二个参数由原来的分页工具栏的选择器修改为topToolbarId配置项所指定的ID选择器，下面是扩展后的效果。
我使用的jqGrid版本为4.6.0，其他版本未测试。
顶部工具栏扩展：https://download.csdn.net/download/liandi_123456/11142255(积分是自动分配的，无法设置成免积分，请大家见谅！！！)