在jqGrid中，是否有任何可视提示表明行已被清除? [英] In a jqGrid, is there any visual cue that rows have been flitered?

问题描述

我有一个带有navGrid的jqGrid.当用户单击搜索图标并运行搜索时，是否有任何视觉提示表明网格中的行已被过滤?如果没有，是否有方便或标准的方法来添加这样的提示?

I have a jqGrid with a navGrid. When the user has clicked the search icon, and has run a search, is there any visual cue that the rows in the grid have been filtered? If not, is there a convenient or standard way for adding such a cue?

这是一个普遍的问题，也许我不需要显示任何代码.但以防万一，您希望看到它，该网格的代码如下:

This is such a general question that perhaps I don't need to show any code. But just in case you want to see it, the code for the grid is as follows:

// Define the grid.
$("#messages_grid").jqGrid({

  datatype: "local",

  colNames:[
    'Date/Time',
    'Type',
    'Details'
  ],

  colModel :[
    {name:'DateTime', index:'DateTime', width:200, align:'left', sorttype:'text'},
    {name:'Summary', index:'Summary', width:100, align:'left', sorttype:'text'},
    {name:'Details', index:'Details', width:830, align:'left', sorttype:'text'},
  ],

  height: 'auto',
  rowNum: 3,
  rowList: [3, 6, 9, 12, 15],
  pager: '#messages_pager',
  viewrecords: true,
  caption: 'Messages',
  ignoreCase: true,
});

// Add the navGrid, which contains things like the search icon.
$("#messages_grid").jqGrid('navGrid', '#messages_pager', { edit: false, add: false, del: false });

通过调用以下函数以编程方式将行添加到网格:

Rows are added to the grid programmatically, by calling the following function:

function AddMessage(summary, details) {
    // Add the new row to the grid.
    var grid = jQuery("#messages_grid");
    var new_id = $("#messages_grid").getGridParam("reccount") + 1;
    var new_data = { DateTime: new Date(), Summary: summary, Details: details };
    grid.addRowData(new_id, new_data);

    // Set the sort order so that new messages appear at the end.
    grid.jqGrid().setGridParam({sortorder: "asc"});
    grid.jqGrid("sortGrid", "DateTime", true);

    // Set the page to the last page
    var last_page = grid.getGridParam('lastpage');
    $("#messages_grid").setGridParam({page: last_page});

    // Reload the grid.
    $("#messages_grid").trigger("reloadGrid")

    // Select newest row.
    $("#messages_grid").setSelection(new_id, true);
}

谢谢！

推荐答案

我希望我正确理解了您的问题.在为一个客户开发解决方案的过程中，存在着严格的要求.作为解决方案，我将ui-state-highlight类添加到用于设置过滤条件的列标题中. 第一个演示对此进行了演示.过滤后的结果如下图所示

I hope that I correctly understand your problem. During developing of solution for one customer there were close requirement. As the solution I added ui-state-highlight class to the column headers by which the filtering are set. The first demo demonstrates this. The filtered results look like on the picture below

它使用代码

loadComplete: function () {
    highlightFilteredColumns.call(this);
}

其中highlightFilteredColumns函数定义为

var highlightFilteredColumns = function () {
        var $self = $(this), postData = $self.jqGrid("getGridParam", "postData"), i, l,
            cm = $self.jqGrid("getGridParam", "colModel"), control,
            filtersColumns = {},
            getAllFilteredColumns = function (f) {
                var j, n;
                if (f) {
                    if (f.groups !== undefined && f.groups !== null) {
                        for (j = 0, n = f.groups.length; j < n; j++) {
                            getAllFilteredColumns(f.groups[j]);
                        }
                    }
                    if (f.rules !== undefined && f.rules !== null) {
                        for (j = 0, n = f.rules.length; j < n; j++) {
                            filtersColumns[f.rules[j].field] = true;
                        }
                    }
                }
            };
        if (typeof postData.filters === "string") {
            getAllFilteredColumns($.parseJSON(postData.filters));
        } else if (postData.filters !== null && typeof postData.filters === "object") {
            getAllFilteredColumns(postData.filters);
        } else {
            return; // do nothing
        }

        for (i = 0, l = cm.length; i < l; i += 1) {
            control = $("#gs_" + $.jgrid.jqID(cm[i].name));
            if (control.length > 0) {
                if (filtersColumns[cm[i].index || cm[i].name] === true) {
                    //control.parent().addClass("ui-state-error").css({ borderTop: "0", borderBottom: "0" });
                    $("#" + $.jgrid.jqID($self[0].id) + "_" + $.jgrid.jqID(cm[i].name)).addClass("ui-state-highlight");
                } else {
                    //control.parent().removeClass("ui-state-error").css({ borderTop: "0", borderBottom: "0" });
                    $("#" + $.jgrid.jqID($self[0].id) + "_" + $.jgrid.jqID(cm[i].name)).removeClass("ui-state-highlight");
                }
            }
        }
    };

另一个演示的代码稍长，但实用如果将工具栏搜索与高级搜索结合在一起，或者是否设置了一些初始过滤器并同时使用工具栏搜索.在这种情况下，工具栏将填充来自过滤器的值.我最初在答案中发布了该方法(请参见refreshSerchingToolbar函数).

Another demo have a little longer code, but it's practical if one combines toolbar searching with advanced searching or if one set some initial filter and uses toolbar searching at the same time. In the case the toolbar will be filled with the values from the filter. I posted the approach initially in the answer (see refreshSerchingToolbar function).

这篇关于在jqGrid中，是否有任何可视提示表明行已被清除?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！