在列上使用格式化程序时,JQGrid筛选器工具栏未筛选行 [英] JQGrid Filter Toolbar not filtering rows when using a Formatter on a column

查看:75
本文介绍了在列上使用格式化程序时,JQGrid筛选器工具栏未筛选行的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

因此,在当前应用中,我必须在jqGrid中的几行上使用自定义格式化程序.所有这些都是从我的ajax调用中取出几个字段,将它们合并为一个字段,然后将其放入一行中.

So in a current app, I have to use a custom Formatter on a couple rows in my jqGrid. All these do is take a few fields from my ajax call, concat them into one, and place that into a row.

EG(data.toStreet + data.toCity + data.toState + data.toZip)作为州邮编的街市"返回到收件人地址"列中.这可以正常工作,并且数据可以正确显示,但是使用过滤工具栏时,过滤器仅基于第一个值(data.street).下面是有问题的代码的超级简化版本.

EG ( data.toStreet + data.toCity + data.toState + data.toZip ) comes back as "Street City, State Zip" into the "To Address" column. This works fine and the data displays correctly, but when using the filtering toolbar, the filter is only based on the first val (data.street). below is a super simplified version of the pieces of code in question.

$('#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",而不能进行其他任何搜索. 是否有人对如何解决此问题有任何线索,或者可能为什么会发生这种情况以及一个好的解决方法?

So if the value in the cel says "123 fake st, springfield, Va 22344" after being formatted, the filter toolbar can only search on "123 fake st" and nothing else. Does anybody have any clue on how to remedy this, or possibly why it's happening and a good workaround??

我已经包括了网格的开始.另外,result.d的地址属性是在下面的代码中创建的,而不是从Web服务返回的.我的专栏已映射到地址",该地址可以正确显示格式,但仍无法按预期进行搜索.

I have included the beginning of my grid. Also, the property Address of result.d is created in the code below, and not returned from the webservice. My column is mapped to "Address" which displays the formatting properly, but still does not search as intended.

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

推荐答案

我认为您用错误的方式填充了网格.如果您的源数据具有toStreet,toCity,toState,toZip,fromStreet,fromCity,fromState,fromZip属性,并且您需要组成addressToaddressFrom,则应该以其他方式进行.您的问题是toStreetfromStreet会以原始格式的形式保存在内部data参数中,就像从服务器上获取的一样.本地搜索使用data参数,因此将使用从服务器到达的toStreetfromStreet.

I think that you fill the grid in the wrong way. If your source data has toStreet, toCity, toState, toZip, fromStreet, fromCity, fromState, fromZip properties and you need to have composed addressTo and addressFrom you should do this in another way. Your problem is that toStreet and fromStreet will be saved locally in the internal data parameter in the original format like you get it from the server. The local searching uses the data parameter, so the toStreet and fromStreet like you get there from the server will be used.

您没有发布使用的jqGrid的完整代码.因此,我想您将datatype: 'json'datatype: 'jsonp'datatype: 'xml'loadonce: true结合使用.您应该定义colModel

You don't posted more full code of jqGrid which you use. So I suppose that you use datatype: 'json', datatype: 'jsonp' or datatype: 'xml' in combination with loadonce: true. You should define 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处理之前被称为.因此,您可以对数据进行任何修改或类似上面的操作.

The exact code depend on the format of the input data. The advantage of the usage of beforeProcessing is that it will be called before the data will be processed by jqGrid. So you can do any modification in the data or like in the above.

已更新:datatype的代码可以使用标准jqGrid选项以另一种方式轻松实现.因此,我建议使用以下设置:

UPDATED: The code of datatype can be easy implemented in another way using standard jqGrid options. So I suggest to use the following settings:

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

我在答案中描述了设置为"Cache-Control:私有,最大年龄= 0"的nd: null的用法.您可以下载使用此功能的相应演示项目.通常,只需要在您呼叫SetMaxAge

[WebMethod]
[ScriptMethod(UseHttpGet = true, ResponseFormat = ResponseFormat.Json)]
public MyGridData GetGrid(...) {
    HttpContext.Current.Response.Cache.SetMaxAge (new TimeSpan(0));
    ...
}

要详细了解缓存控制,可以在此处阅读.

See more about caching control you can read here.

这篇关于在列上使用格式化程序时,JQGrid筛选器工具栏未筛选行的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆