jquery - jqgrid 搜索上的动态搜索选项

Question

下面我复制了我的 jqGrid 并删除了很多不相关的属性等，但是下面的基本代码足以封装我的问题。

我有一个动态过滤器，它在 ajax 调用成功返回时填充。返回的 json 包含下拉列表的字符串值 (uniqueRunDates) 以及其他值。使用“setColProp”将字符串 (uniqueRunDates) 动态添加到列中。 jgGrid 完成后，函数中的下一行代码将调用网格的重新加载，并且新的过滤器将就位。

该过滤器的工作原理与静态(如“JobStatus”)过滤器一样，但有一个异常(exception)。正在寻找。

网格具有三个可以互换使用的搜索(文本框和两个下拉列表[一个是 uniqueRunDates])。当用户在文本框中输入内容时，网格会正确更新，返回的 json 具有新的唯一日期，我通过“setColProp”添加它们。最后一步是必须调用“reloadGrid”。问题是我该怎么做？？？

在第一轮中，执行网格创建后的代码。当执行搜索时，仅执行此 jgGrid 代码。当然，我不能将“reloadGrid”放入成功调用中，因为这会形成循环。我尝试使用工具栏的“afterSearch”属性，但是当我需要它时，它似乎没有被触发。

我处理这个问题的方式正确吗？有没有更简单的方法来处理这个看似常见的概念？动态搜索过滤器？非常感谢您提供的任何帮助和/或指导。

 $("#gridTable").jqGrid({
    async: false,
    datatype: function (jqGridModel) {
        $.ajax({
            async: false,
            url: 'Application.aspx/getJqGridData',
            data: JSON.stringify({ 'rptPath': rptPath, 'jqGridModel': jqGridModel, 'userId': userId }),
            success: function (data, textStatus, jqXHR) {
                populateGrid(data);
                var uniqueRunDates = (JSON.parse(data)).uniqueDates;

                $("#gridTable").jqGrid('setColProp', 'Run_Date', {
                    stype: 'select',
                    searchoptions: { value: uniqueRunDates, sopt: ['dateEq'] }
                });
            }                
        });
    },
    colNames: ['', 'Report Name', 'Run Status', 'Run Date', 'Expiring On', 'Category', 'Actions'],
    colModel: [
       { name: 'Run_Date', index: 'RunDate', align: 'center', title: false, sortable: true, width: 40 }
       { name: 'Report_Name', index: 'ReportNameDisplay', align: 'left', title: false, sortable: true, formatter: reportLinkFormatter },
       { name: 'Run_Status', index: 'JobStatus', align: 'left', title: false, sortable: true, width: 50,
            stype: 'select',
            searchoptions: { value: ':All Status;Completed:Completed;Failed:Failed;Pending:Pending;No Data Returned:No Data Returned;:Returned' }
        },
    ],
    pager: jQuery('#gridPager'),
    rowNum: 15,
    rowList: [15, 25, 35, 50],
    sortname: 'RunDate',
    sortorder: "desc",
    height: '100%',
    multiselect: true
    }
});

//Refresh necessary for the dynamically added 'run date' filter.
$("#gridTable").trigger("reloadGrid");

$('#gridTable').jqGrid('filterToolbar', {
    stringResult: true
});

。。。。.

更新我已更新网格以遵循以下建议。

我能够查询服务器，并返回 JSON 对象的字符串版本。我还可以在“beforeProcessing”方法中看到返回值，它看起来不错。然而，网格不再填充。我不确定 jsonReader 是否按照我的返回格式正确设置。 data.d = {"总计":2,"页数":1,"记录":25,"行数":[{"id":"23","单元格":["0","xxx", “xxx”，...]}....]

我认为这是类型不一致的问题...想法？

$("#gridTable").jqGrid({
    async: false,
    url: 'Application.aspx/getJqGridData',
    ajaxGridOptions: { contentType: "application/json" },
    serializeGridData: function (postData) {
        if (postData.filters == undefined) postData.filters = null;
        postData.jqGridModel = { page: postData.page, _search: postData._search, rows: postData.rows,
            sidx: postData.sidx, sord: postData.sord, filters: postData.filters
        };
        postData.rptPath = rptPath;
        postData.userId = userId;
        return JSON.stringify(postData);
    },
    contentType: 'application/json; charset=utf-8',
    datatype: "json",
    mtype: 'POST',
    beforeProcessing: function (data) {    
    },
    colNames: ['', 'Report Name', 'Run Status', 'Run Date', 'Expiring On', 'Category', 'Actions'],
    colModel: [
        { name: 'Is_Fav', index: 'Favorites', align: 'center', title: false, sortable: false, search: false, width: 5, formatter: favImageFormatter },
        { name: 'Report_Name', index: 'ReportNameDisplay', align: 'left', title: false, sortable: true, formatter: reportLinkFormatter },
        { name: 'Run_Status', index: 'JobStatus', align: 'left', title: false, sortable: true, width: 50,
            stype: 'select',
            searchoptions: { value: ':All Status;Completed:Completed;Failed:Failed;Pending:Pending;No Data Returned:No Data Returned;:Returned' }
        },
        { name: 'Run_Date', index: 'RunDate', align: 'center', title: false, sortable: true, width: 40,
            selectOptions: {
                dataUrl: 'Application.aspx/getJqGridData',
                buildSelect: function (data) {
                    var gData;
                    if (data.hasOwnProperty('d')) gData = data.d;
                    else gData = data;

                    var uniqueRunDates = (JSON.parse(gData)).uniqueDates;

                    var html = '<select>', length = gData.length, i = 0, item;
                    for (; i < length; i++) {
                        item = d[i];
                        html += '<option value=' + item + '>' + item + '</option>';
                    }
                    html += '</select>';
                    return html
                }
            }
        },
        { name: 'Expiring_On', index: 'ExpirationDate', align: 'center', title: false, sortable: true, width: 40, search: false },
        { name: 'Category', index: 'Category', align: 'left', title: false, sortable: true, width: 80 },
        { name: 'Actions', index: '', align: 'left', title: false, sortable: false, width: 25, search: false, formatter: actionsFormatter }
    ],
    pager: jQuery('#gridPager'),
    rowNum: 15,
    rowList: [15, 25, 35, 50],
    sortname: 'RunDate',
    sortorder: "desc",
    height: '100%',
    viewrecords: true,
    sortable: true,
    jsonReader: {
        root: "d.rows",
        page: "d.page",
        total: "d.total",
        records: "d.records"            
    },
    forceFit: true,
    multiselect: true,
    loadError: function (jqXHR, textStatus, errorThrown) {
        alert(jqXHR.responseText);
    },
    gridComplete: function () {
        doGridComplete(rptPath);
    },
    beforeSelectRow: function (rowid, event) {
        // Only allow row selection if the chekbox in the row is clicked
        var index = $.jgrid.getCellIndex(event.target);
        if (index == 0) {
            return true;
        }
        return false;
    },
    subGrid: true,
    subGridRowExpanded: function (subgrid_id, row_id) {
        getReportDetails(subgrid_id, row_id, rptPath);
    }
});

$('#gridTable').jqGrid('filterToolbar', {
    stringResult: true
});

Answer 1

我不确定我是否正确理解您的需求。

您可以使用 dataUrl 属性来代替设置 searchoptions 的 value 属性，该属性使 Ajax 请求填充选择选项。 Here和 here您可以找到一些可以帮助实现dataUrl的代码示例。

此外，您应该永远使用datatype作为函数，只是为了自己调用jQuery.ajax。 jqGrid 有很多选项，如 ajaxGridOptions、jsonReader 选项、serializeRowData 回调等。我建议您阅读the answer和 this one其中包含您可以下载和测试的圆顶项目。

如果您使用标准的 jqGrid 机制，并且仍然需要对网格上的数据进行一些修改(例如设置一些 jqGrid 选项)，您可以使用 beforeProcessing 回调。回调 beforeProcessing 允许在 jqGrid 处理从服务器返回的数据之前对 colModel 或任何 jqGrid 选项进行更改。