在jqGrid中实现搜索功能,可以使用jqGrid的内置搜索功能,也可以使用自定义搜索功能。以下是两种方法的详细说明:
jqGrid提供了内置的搜索功能,可以通过以下步骤实现搜索功能:
search
选项为true
,以启用搜索功能。searchoptions
选项,以定义搜索选项。stype
选项,以定义搜索类型。jQuery("#grid_id").jqGrid('filterGrid', postdata, refresh)
方法来执行搜索。以下是一个示例代码:
jQuery("#grid_id").jqGrid({
url: 'mydata.json',
datatype: 'json',
colNames: ['Column 1', 'Column 2', 'Column 3'],
colModel: [
{ name: 'col1', searchoptions: { sopt: ['eq', 'ne', 'cn'] }, stype: 'text' },
{ name: 'col2', searchoptions: { sopt: ['eq', 'ne', 'cn'] }, stype: 'text' },
{ name: 'col3', searchoptions: { sopt: ['eq', 'ne', 'cn'] }, stype: 'text' }
],
search: true,
pager: '#pager'
});
jQuery("#grid_id").jqGrid('navGrid', '#pager', { search: true });
function searchGrid() {
var postdata = jQuery("#grid_id").jqGrid('getGridParam', 'postData');
jQuery("#grid_id").jqGrid('setGridParam', { search: true });
jQuery("#grid_id").jqGrid('filterGrid', postdata, refresh);
}
如果内置搜索功能不能满足需求,可以使用自定义搜索功能。以下是一个示例代码:
jQuery("#grid_id").jqGrid({
url: 'mydata.json',
datatype: 'json',
colNames: ['Column 1', 'Column 2', 'Column 3'],
colModel: [
{ name: 'col1', search: true },
{ name: 'col2', search: true },
{ name: 'col3', search: true }
],
pager: '#pager'
});
jQuery("#search_button").click(function() {
var search_col1 = jQuery("#search_col1").val();
var search_col2 = jQuery("#search_col2").val();
var search_col3 = jQuery("#search_col3").val();
var postdata = jQuery("#grid_id").jqGrid('getGridParam', 'postData');
postdata.filters = '{"groupOp":"AND","rules":[';
if (search_col1) {
postdata.filters += '{"field":"col1","op":"cn","data":"' + search_col1 + '"},';
}
if (search_col2) {
postdata.filters += '{"field":"col2","op":"cn","data":"' + search_col2 + '"},';
}
if (search_col3) {
postdata.filters += '{"field":"col3","op":"cn","data":"' + search_col3 + '"},';
}
postdata.filters = postdata.filters.slice(0, -1) + ']}';
jQuery("#grid_id").jqGrid('setGridParam', { search: true, postData: postdata });
jQuery("#grid_id").jqGrid('filterGrid', postdata, refresh);
});
在这个示例中,我们创建了一个搜索表单,包含三个搜索框,每个搜索框对应一个列。当用户点击搜索按钮时,我们使用jqGrid('getGridParam', 'postData')
方法获取当前jqGrid的postData对象,然后根据搜索表单中的值设置filters属性,最后调用jqGrid('setGridParam', { search: true, postData: postdata })
和jqGrid('filterGrid', postdata, refresh)
方法来执行搜索。
以上是在jqGrid上实现搜索的两种方法,可以根据具体需求选择合适的方法。
领取专属 10元无门槛券
手把手带您无忧上云