设置过滤器值后,jqgrid下拉过滤器未更新

时间:2018-11-28 10:56:50

标签: javascript filter jqgrid

我一直在使用提供多个动态填充的过滤器(功能getDropDownValues)的网格。我的问题是setColProp函数找不到作为“字符串”传递的列名。这是我的代码:

var lastsel2
    jQuery("#jQGridDemo").jqGrid({
        url: 'http://localhost:58404/JQGridHandler.ashx',
        datatype: "json",
        colNames: ['Property ID', 'Property Ref', 'Short Address', 'Scheme Code', 'Scheme Name', 'Property Type'],
        colModel: [
            { name: 'PropertyID', index: 'PropertyID', width: 70, align: "left", stype: 'text', sortable: true},
            { name: 'PropertyRef', index: 'PropertyRef', width: 75, align: "left", stype: 'text', sortable: true},
            { name: 'ShortAddress', index: 'ShortAddress', width: 200,  align: "center", sortable: true},
            { name: 'SchemeCode', index: 'SchemeCode', width: 80, align: "center", sortable: true },
            { name: 'SchemeName', index: 'SchemeName', width: 80, align: "center",  sortable: true },
            { name: 'PropertyType',width: 80},
        ],
        beforeProcessing: function (data) {
            getDropDownValues(data, "PropertyType")
            $(this).jqGrid('destroyFilterToolbar').jqGrid('filterToolbar', {
                stringResult: true,
                searchOnEnter: false,
                defaultSearch: "cn"
            });
         },
         onSelectRow: function(id){
             if(id && id!==lastsel2){
                jQuery('#jQGridDemo').jqGrid('restoreRow',lastsel2);
                jQuery('#jQGridDemo').jqGrid('editRow',id,true);
                lastsel2=id;
             }
         },
         rowNum: 30,
         editable: true,
         mtype: 'GET',
         loadonce: true,
         rowList: [30, 40, 50],
         pager: '#jQGridDemoPager',
         sortname: 'PropertyId',            
         viewrecords: true,
         sortorder: 'desc',
         caption: "Property Details",
         editurl: 'http://localhost:58404/JQGridHandler.ashx'
     });

         function getDropDownValues(data, columnName) {
             var propertyMap = {}, propertyValues = ":All", rows = data, i, symbol;
             for (i = 0; i < rows.length; i++) {
                symbol = rows[i][columnName];
                if (!propertyMap.hasOwnProperty(symbol)) {
                    propertyMap[symbol] = 1;
                    propertyValues += ";" + symbol + ":" + symbol;
                }
             }
            $(this).jqGrid("setColProp", 'columnName', {
                stype: "select",
                searchoptions: {
                    value: propertyValues
                }
            })
         }

有人知道我如何传递列名以便可以找到它吗?

1 个答案:

答案 0 :(得分:0)

您遇到的问题恰好在以下代码行中:

...
    $(this).jqGrid("setColProp", 'columnName',
...

问题不是列名参数,而是方法setColProp的计算方法。

在大多数情况下,jqGrid代码中的$(this)引用jqGrid对象,但是在使用外部函数时,它引用的是函数对象而不是网格,因此代码不起作用。要使用您的代码,应将$(this)替换为jQuery(“#jQGridDemo”),即

function getDropDownValues(data, columnName) {
    var propertyMap = {}, propertyValues = ":All", rows = data, i, symbol;
    for (i = 0; i < rows.length; i++) {
        symbol = rows[i][columnName];
        if (!propertyMap.hasOwnProperty(symbol)) {
            propertyMap[symbol] = 1;
            propertyValues += ";" + symbol + ":" + symbol;
        }
    }
    $(#jQGridDemo).jqGrid("setColProp", 'columnName', {
        stype: "select",
        searchoptions: {
            value: propertyValues
        }
    })
}

使用新修复程序测试了代码,并且可以正常工作。