在列上使用格式化程序时，JQGrid 过滤器工具栏不过滤行

Question

因此，在当前应用程序中，我必须在 jqGrid 中的几行上使用自定义格式化程序。所有这些都是从我的 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 的属性地址是在下面的代码中创建的，而不是从 web 服务返回的。我的列被映射到正确显示格式的“地址”，但仍无法按预期进行搜索。

 $('#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");
                        }
                    });

Answer 1

当使用自定义/预定义格式化程序格式化数据时，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。

Answer 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;
    }
}
...

nd: null 的用法与我在the answer 中描述的“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。