3.7节下的工具栏搜索演示为每列绘制了搜索工具栏。是否可以只有一个搜索工具栏来过滤所有列和所有页面的数据?
了解更多信息:jqGrid filtering on the client-side using "filterToolbar"
JSON
{
"mypage":{
"outerwrapper":{
"page":"1",
"total":"2",
"records":"2",
"innerwrapper":{
"rows":[
{
"id":"1",
"cells": [
{
"fieldType": "image",
"label": "image",
"value": "<img src=icon.gif>"
},
{
"fieldType": "number",
"label": "number",
"value": 100
},
{
"fieldType": "string",
"label": "string",
"value": "James Kisnar"
},
{
"fieldType": "alphanumeric",
"label": "alphanumeric",
"value": "77 Wall Street"
},
{
"fieldType": "date",
"label": "date",
"value": "12/20/2011"
},
{
"fieldType": "decimal",
"label": "decimal",
"value": "23.55"
}
]
},
{
"id":"2",
"cells": [
{
"fieldType": "image",
"label": "image",
"value": "<img src=icon.gif>"
},
{
"fieldType": "number",
"label": "number",
"value": 140
},
{
"fieldType": "string",
"label": "string",
"value": "James Kitchener"
},
{
"fieldType": "alphanumeric",
"label": "alphanumeric",
"value": "123 ABC"
},
{
"fieldType": "date",
"label": "date",
"value": "12/20/2011"
},
{
"fieldType": "decimal",
"label": "decimal",
"value": "23.55"
}
]
},
{
"id":"3",
"cells": [
{
"fieldType": "image",
"label": "image",
"value": "<img src=icon.gif>"
},
{
"fieldType": "number",
"label": "number",
"value": 657
},
{
"fieldType": "string",
"label": "string",
"value": "Loo Gatner"
},
{
"fieldType": "alphanumeric",
"label": "alphanumeric",
"value": "123 XYZ"
},
{
"fieldType": "date",
"label": "date",
"value": "12/20/2011"
},
{
"fieldType": "decimal",
"label": "decimal",
"value": "23.55"
}
]
},
{
"id":"4",
"cells": [
{
"fieldType": "image",
"label": "image",
"value": "<img src=icon.gif>"
},
{
"fieldType": "number",
"label": "number",
"value": 1290
},
{
"fieldType": "string",
"label": "string",
"value": "William Parker"
},
{
"fieldType": "alphanumeric",
"label": "alphanumeric",
"value": "123 FGH"
},
{
"fieldType": "date",
"label": "date",
"value": "12/20/2011"
},
{
"fieldType": "decimal",
"label": "decimal",
"value": "23.55"
}
]
}
]
}
}
}
}
JQGrid定义
$(function (){
var getValueByName = function (cells, cellItem) {
var i, count = cells.length, item;
for (i = 0; i < count; i += 1) {
item = cells[i];
if (item.label === cellItem) {
return item.value;
}
}
return '';
};
$("#myjqgrid").jqGrid({
url: "jqgrid.json",
datatype: "json",
contentType: "application/x-javascript; charset=utf-8",
colNames:['Image','Number', 'String', 'Alphanumeric','Date','Decimal'],
colModel:[
{name:'image',index:'image',jsonmap:function(obj){return getValueByName(obj.cells, "image");}, width:150, align:"center"},
{name:'number',index:'number',jsonmap:function(obj){return getValueByName(obj.cells, "number");}, width:150, align:"left", sortable:true},
{name:'string',index:'string',jsonmap:function(obj){return getValueByName(obj.cells, "string");}, width:150, align:"left", sortable:true},
{name:'alphanumeric',index:'alphanumeric',jsonmap:function(obj){return getValueByName(obj.cells, "alphanumeric");}, width:200, align:"left", sortable:true},
{name:'date',index:'date',jsonmap:function(obj){return getValueByName(obj.cells, "date");}, width:150,align:"left", sortable:true},
{name:'decimal',index:'decimal',jsonmap:function(obj){return getValueByName(obj.cells, "decimal");}, width:150,align:"left", sortable:true},
],
jsonReader: {
root: "mypage.outerwrapper.innerwrapper.rows",
page: "mypage.outerwrapper.page",
total: "mypage.outerwrapper.total",
records: "mypage.outerwrapper.records",
repeatitems: false
},
rowNum:2,
rowList:[2, 4],
pager: '#Pager',
recordpos: 'left',
multiboxonly:true,
viewrecords: true,
sortorder: "desc",
multiselect: true,
scrolloffset: 0,
loadonce: true,
sortable: true,
sorttype: "text",
cache: true,
height: "120px"
});
$("#myjqgrid").jqGrid('navGrid','#Pager',{add:false,del:false,edit:false,position:'right'});
$("#myjqgrid").jqGrid('filterToolbar',{stringResult: true,searchOnEnter : false});
});