因此,在当前的应用程序中,我必须在jqGrid中的几行上使用自定义Formatter。所有这些都是从我的ajax调用中取出一些字段,将它们连成一个,并将其放入一行。
EG(data.toStreet + data.toCity + data.toState + data.toZip)作为“Street City,State Zip”返回到“To Address”列。这工作正常,数据显示正确,但使用过滤工具栏时,过滤器仅基于第一个val(data.street)。下面是相关代码片段的超简化版本。
$('#grid').jqGrid({
...
colNames:["AddressTo", "AddressFrom"],
colModel:[
{name:"toStreet" formatter: ToAddressFormatter},
{name:"fromStreet" formatter: FromAddressFormatter}
],
...
}),
$('#grid').jqGrid('filterToolbar',
{
stringResult:true,
searchOnenter: true,
defaultSearch: 'cn'
}
});
ToAddressFormatter = function(el, opt, rowObj){
var address = rowObj.toStreet+ " " + rowObj.toCity + ", " + rowObj.toState + " " + rowObj.toZip;
return address;
},
FromAddressFormatter = function(el, opt, rowObj){
var address = rowObj.fromStreet+ " " + rowObj.fromCity + ", " + rowObj.fromState + " " + rowObj.fromZip;
return address;
}
因此,如果cel中的值在格式化后显示“123 fake st,springfield,Va 22344”,则过滤器工具栏只能搜索“123 fake st”而没有其他内容。 有没有人知道如何解决这个问题,或者可能为什么会发生这种情况以及一个好的解决方法?
编辑: 我已经包含了我的网格的开头。此外,result.d的属性Address在下面的代码中创建,而不是从webservice返回。我的列映射到“地址”,它正确显示格式,但仍未按预期搜索。
$('#grdDisasters').jqGrid({
datatype: function(postdata) {
var obj = { "showActive": $('#btnFilterActive.pressed').length > 0 ? true : false, "showInactive": $('#btnFilterActive.pressed').length > 0 ? true : false,
'page': postdata.page, 'rows': postdata.rows, 'sortIndex': postdata.sidx, 'sortDirection': postdata.sord, 'search': postdata._search,
'filters': postdata.filters || ''
};
$.ajax({
url: "/GetGrid",
data: JSON.stringify(obj),
success: function(result) {
for (var i = 0, il = result.d.rows.length; i < il; i++) {
LoadedDisasters[i] = result.d.rows[i];
result.d.rows[i].cells.Address = result.d.rows[i].cells.Street + " " + result.d.rows[i].cells.City + ", "+ result.d.rows[i].cells.State+ " "+ result.d.rows[i].cells.Zip;
}
result.d = NET.format(result.d);//just correctly format dates
UpdateJQGridData($('#grdDisasters'), result.d);
},
error: function(result) {
//alert("Test failed");
}
});
答案 0 :(得分:2)
使用自定义/预定义格式化程序格式化数据时,jqGrid在过滤行时出现问题。
您必须在服务器端过滤行。
在控制器中再添加2个请求参数来处理jqgrid搜索请求:
当jqGrid请求过滤的原始广告时,它会添加一个参数:_search
,其值为:true
以及col1=abc&col4=123
之类的所有搜索参数意味着用户希望使用名为col1
的列和名为col4
的列分别使用值abc
和123
使用这些值并使用类似操作查询数据库,如下所示:
select id, concat(street1, street2, city, state, zip) as address
where address like "%abc%" and id like "%123%"
将这些行作为json返回到jqGrid并显示当前页面中的那些行。所以基本上你必须有一个jqGrid与服务器端分页,排序和搜索。您不能使用客户端分页,排序和搜索功能。另外,请确保您没有loadonce: true
设置。
答案 1 :(得分:2)
我认为你以错误的方式填充网格。如果你的源数据有toStreet,toCity,toState,toZip,fromStreet,fromCity,fromState,fromZip属性,你需要编写addressTo
和addressFrom
,你应该以另一种方式执行此操作。您的问题是,toStreet
和fromStreet
将以原始格式的内部data
参数本地保存,就像您从服务器获取它一样。本地搜索使用data
参数,因此将使用您从服务器到达的toStreet
和fromStreet
。
您没有发布更多您使用的jqGrid完整代码。因此,我认为您将datatype: 'json'
,datatype: 'jsonp'
或datatype: 'xml'
与loadonce: true
结合使用。您应该定义colModel
$('#grid').jqGrid({
...
colNames:["AddressTo", "AddressFrom"],
colModel:[
{name: "addressTo", ...},
{name: "addressFrom", ...}
],
beforeProcessing: function (data) {
var i, rows = data.rows, l = rows.length, item;
for (i = 0; i < l; i++) {
item = rows[i];
item.addressTo = item.toStreet + " " + item.toCity + ", " +
item.toState + " " + item.toZip;
item.addressFrom = item.fromStreet+ " " + item.fromCity + ", " +
item.fromState + " " + item.fromZip;
}
}
...
});
确切的代码取决于输入数据的格式。使用beforeProcessing
的优点是,在 jqGrid处理数据之前,它将被称为。因此,您可以对数据进行任何修改,如上所述。
更新:datatype
的代码可以使用标准的jqGrid选项以其他方式轻松实现。所以我建议使用以下设置:
datatype: "json",
url: "/GetGrid",
postData: {
// add and to the list of parameters sent to the web service
showActive: function () {
return $('#btnFilterActive.pressed').length > 0;
},
showInactive: function () {
return $('#btnFilterActive.pressed').length > 0;
}
},
prmNames: {
// rename some parameters sent to the web service
sort: "sortIndex",
order: "sortDirection",
search: "search",
// don't send nd parameter to the server
nd: null
// you leave the nd is you don't set any "Cache-Control" HTTP header
// I would recommend you to set "Cache-Control: private, max-age=0"
// For example
// HttpContext.Current.Response.Cache.SetMaxAge (new TimeSpan(0));
},
serializeGridData: function (postData) {
// control modification of the the data (parameters) which will be sent
// to the web method
if (typeof postData.filters === "undefined") {
postData.filters = "";
}
return JSON.stringify(postData);
},
ajaxGridOptions: { contentType: "application/json" },
jsonReader: {
root: "d.rows",
page: function (obj) { return obj.d.page; },
total: function (obj) { return obj.d.total; },
records: function (obj) { return obj.d.rows.length; },
repeatitems: false
},
loadError: function (jqXHR, textStatus, errorThrown) {
// see an implementation example in the answers
// https://stackoverflow.com/a/6969114/315935
// and
// https://stackoverflow.com/a/5501644/315935
},
colNames:["AddressTo", "AddressFrom"],
colModel:[
{name: "addressTo", ...},
{name: "addressFrom", ...}
],
beforeProcessing: function (data) {
var i, rows, l, item;
data.d = NET.format(data.d); // just correctly format dates
rows = data.d.rows;
l = rows.length;
for (i = 0; i < l; i++) {
item = rows[i];
LoadedDisasters[i] = item;
item.addressTo = item.toStreet + " " + item.toCity + ", " +
item.toState + " " + item.toZip;
item.addressFrom = item.fromStreet+ " " + item.fromCity + ", " +
item.fromState + " " + item.fromZip;
}
}
...
我在the answer中描述的nd: null
设置为“Cache-Control:private,max-age = 0”。您可以下载使用它的相应演示项目。一般来说,只需要在SetMaxAge
[WebMethod]
[ScriptMethod(UseHttpGet = true, ResponseFormat = ResponseFormat.Json)]
public MyGridData GetGrid(...) {
HttpContext.Current.Response.Cache.SetMaxAge (new TimeSpan(0));
...
}
有关缓存控制的详情,请参阅here。