本文讨论jqGrid如何实现自定义底部导航，在自定义底部导航中如何实现文本框搜索，其中涉及的jqGrid数据加载、方法扩展本文不再赘述。简单起见先看个案例。
1、页面截图
2、页面代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>jggrid自定义底部导航</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.5.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="https://cdn.bootcss.com/jqueryui/1.11.0/jquery-ui.min.css" />
<link rel="stylesheet" href="https://js.cybozu.cn/jqgrid/v5.3.1/css/ui.jqgrid.css" />
<script src="https://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script src="https://js.cybozu.cn/jqgrid/v5.3.1/js/jquery.jqGrid.min.js"></script>
<script src="https://js.cybozu.cn/jqgrid/v5.3.1/js/i18n/grid.locale-en.js"></script>
</head>
<body>
<div class="page-content container">
<div class="page-body"> <!-- page-body -->
<div class="panel panel-default" id="panel-orders">
<table id="orders"></table>
<div id="orders_footer"></div>
</div>
</div>
</div>
<script type="text/javascript">
var data = [];
function getBills() {
var rowCount = 50;
for (var i = 0; i < rowCount; i ++) {
data.push({
sid: i,
bill_id: i,
bill_detail: i,
goods_id: i,
unit_id: i,
package_id: i,
ref_detail: i,
goods_no: i + 1,
goods_name: '零件名称' + rowCount + i,
car_type_name: '车型' + rowCount + i,
package_name: '包装器具' + rowCount + i,
unit_name: '单位',
snp: 0.89,
bill_no: 'BN0000000' + i,
qrcode: '1000000000' + i,
barcode: '1000000000' + i,
flag: i >= rowCount - 1 ? 1 : 0,
})
}
$("#orders").jqGrid("clearGridData").jqGrid('setGridParam',{data: data || []}).trigger('reloadGrid');
}
$(function() {
$("#orders").jqGrid({
colModel: [
{label: "零件号", name: "goods_no", width: 60},
{label: "零件名称", name: "goods_name", search: false, width: 180},
{label: "车型", name: "car_type_name", width: 70},
{label: "包装器具", name: "package_name", width: 70},
{label: "单位", name: "unit_name", width: 40},
{label: "装箱率", name: "snp", width: 50, sorttype: "number"},
{label: "订单号", name: "bill_no", width: 120},
{label: "二维码", name: "qrcode", width: 130},
{label: "条码", name: "barcode", width: 120}
],
pager: "#orders_footer",
datatype: 'local',
rownumbers: true,
multiselect: true,
height: 300,
rowNum: 1000
});
getBills();
$("#orders").jqGrid('showNavButtons', '#orders_footer', [{type:'save', click:function(e){
alert('You clicked the save button!');
}}]);
});
/** jqgrid 扩展 start．**/
(function($){
$.jgrid && $.jgrid.extend({
/**
* @param btns 导航条添加btns.
* btns: [{type:'view',icon:'',content:'',title:'',click:func},{type:'save'}]
*/
showNavButtons: function(footer, btns) {
var gridId = $(this).attr("id");
var btnTypes = {
add: {
title: "添加新记录",
icon: 'glyphicon glyphicon-plus',
click: function(e) {;}
},
edit: {
title: "编辑所选记录",
icon: 'glyphicon glyphicon-edit',
click: function(e) {;}
},
del: {
title: "删除所选记录",
icon: 'glyphicon glyphicon-trash',
click: function(e) {;}
},
save: {
title: "保存变动数据",
icon: 'glyphicon glyphicon-floppy-disk',
click: function(e) {console.log('You clicked save btn.')}
},
view: {
title: "查看所选记录",
icon: 'glyphicon glyphicon-info-sign',
click: function(e) {
var selRow = $("#"+gridId).jqGrid('getGridParam', 'selrow');
if(! selRow) {
toamsg(false, "请选择要查看的行记录!");
return;
}
$("#"+gridId).jqGrid('showGridRow', selRow);
}
}
};
this.jqGrid("navGrid", footer, {
edit: !1, add: !1, del: !1 },
null, null, null, {
left: 100,
top: 100,
width: 600,
closeOnEscape: true,
multipleSearch: true,
buttons : [
{
side : "right",
text : "Custom",
position : "first",
click : function( form, params, event) {
alert("Custom action in search form");
}
}
]
}
);
//
btns = btns || [];
var validCount = 0, btnRefreshClick = null;
for(var i = 0, l = btns.length; i<l; i++) {
var btn = btns[i], btnType = btnTypes[btn.type];
if(btn.type == 'refresh' && btn.click) {
btnRefreshClick = btn.click;
continue;
}
if(btn.title === undefined) btn.title = (btnType && btnType.title) || '';
if(btn.content === undefined) btn.content = '';
if(btn.icon === undefined) btn.icon = (btnType && btnType.icon) || '';
if(btn.click === undefined) btn.click = (btnType && btnType.click) || function(){;};
var html = '<td class="ui-pg-button " title="{0}"><div class="ui-pg-div"><span class="{1}"></span>{2}</div></td>';
html = html.replace('{0}',btn.title).replace('{1}',btn.icon).replace('{2}', btn.content);
var $html = $(html);
$html.on("click", btn.click);
$html.insertBefore($("#search_" + gridId));
validCount ++;
}
if(validCount > 0)
$("#search_" + gridId).before('<td class="ui-pg-button ui-disabled" style="width:4px;"><span class="ui-separator"></span></td>');
// self-input-search
$("#refresh_" + gridId).after('<td class="ui-pg-button" id="filter_' + gridId + '">'
+ '<input type="text" class="form-control w-120 input-sm" style="height:21px; line-height:21px; padding:0 3px;" placeholder="输入搜索关键字"/></td>');
$("#refresh_" + gridId).after('<td class="ui-pg-button ui-disabled" style="width:4px;"><span class="ui-separator"></span></td>');
var _jqgrid_filter_timer = null, $jqgrid = this;
$("#filter_" + gridId + " input").on("keyup", function(e){
var self = this;
if (_jqgrid_filter_timer) clearTimeout(_jqgrid_filter_timer);
_jqgrid_filter_timer = setTimeout(function(){
$jqgrid.jqGrid('filterInput', self.value);
},100);
});
// self-refresh-click
if(btnRefreshClick!==null) {
$("#refresh_" + gridId).unbind("click").on("click", btnRefreshClick);
}
}
});
})(jQuery);
</script>
</body>
</html>
3、代码说明
1）自定义导航要生效，必须先指定一个底部，如：本案例的 orders_footer
2）$.jgrid && $.jgrid.extend，是jgrid的方法扩展，扩展了一个showNavButtons方法，调用如下：
$("#orders").jqGrid('showNavButtons', '#orders_footer', [{type:'save', click:function(e){
alert('You clicked the save button!');
}}]);
showNavButtons 方法：
- 内置了文本搜索框，只要输入搜索字符即可进行全表格搜索，如果某列不想被搜索到，只要配置该列{label: “零件名称”, name: “goods_name”, search: false, width: 180}，输入：名称5011搜索不到
- 内置了add, edit, del, save, view 按钮类型图标，具体按钮点击执行功能需要自己实现，类似本案例的保存按钮：点击弹出alert框。
$("#orders").jqGrid('showNavButtons', '#orders_footer', [{type:'save', click:function(e){
alert('You clicked the save button!');
}}]);
案例总结
1）本文涉及jqGrid的列模型、数据加载、自定义底部导航、自定义文本搜索框、jqGrid方法扩展等知识点；
2）本文css、js资源都使用了cdn资源，因此复制即可用。