jqgrid自带的搜索如果datatype为非local,那么搜索时会传入搜索对应的参数,然后传入到url对应的地址访问,jqgrid本身支持很丰富的搜索方式,但如果每个方式搜索时切换url,都对应写对应的接口,工作量大而且麻烦。但使用本地化数据,增、删、改时需切换成datatype非local模式。这里博主尝试良久,终于解决,直接上代码吧:
$(function () {
pageInit();
});
function pageInit() {
var jqGridSetter = {
datatype: 'json',
url: serverAddress + "apartment/select",
colNames: ['ID', '名称'],
colModel: [
{
name: 'id',
index: 'id',
width: 100,
align: 'center',
sortable: false,
hidden: true,
key: true
},
{
name: 'name',
index: 'name',
width: 100,
align: 'center',
sortable: false,
editable: true,
editoptions: {size: 10},
edittype: "text",
search: true
}
],
height: 400,
autowidth: true,
shrinkToFit: true,
rowNum: 10,
rowList: [5, 10, 15],
pager: '#pager',
mtype: 'post',
// 注意:id隐藏了,如果在datatype为local下,会报:Cannot read property 'id' of undefined at Object.getAccessor,实在是坑
// sortname: 'id',
viewrecords: true,
caption: '部门'
};
$('#list').jqGrid(jqGridSetter);
$('#list').jqGrid('navGrid', '#pager', {edit: true, add: true, del: true, search: true});
$('#add_list span').click(function () {
$('#list').setGridParam({datatype: 'json', editurl: serverAddress + "apartment/insert"});
});
$('#edit_list span').click(function () {
$('#list').setGridParam({datatype: 'json', editurl: serverAddress + "apartment/update"});
});
$('#del_list span').click(function () {
$('#list').setGridParam({datatype: 'json', editurl: serverAddress + "apartment/delete"});
});
$('#search_list span').click(function () {
mui.getJSON(serverAddress + "apartment/select", {}, function (data) {
$('#list').setGridParam({datatype: 'local', data: data});
});
});
}
多属性联合查询:
$('#list').jqGrid('navGrid', '#pager', {edit: false, add: false, del: false}, {}, {}, {}, {multipleSearch: true});