jqGrid 自定义格式化程序和工具栏过滤

Question

之前曾在这里问过与此类似的问题，但我在我的场景中使用这些答案没有取得任何成功。

我有一个数据类型为 'local' 且 loadonce 为 true 的网格。在我的 3 个专栏中，我使用了自定义格式化程序。

第一个采用以毫秒为单位的时间戳，并以 "H:MM am" 的形式显示时间（例如，8:35 am，12:19 pm）。我将省略该代码，因为我确定它不相关。

第二个客户格式化程序采用整数和 returns 字符串，指示该数字代表一周中的哪几天。它使用按位运算，其中 1 是星期日，2 是星期一，4 是星期二，8 是星期三，等等。所以数字 67 代表星期日、星期一和星期六 (1+2+64)，因此格式化程序 return s "SMSa"

function daysOfWeekFormatter(daysMask, options, rowObject) {
  var days='';

  if ((daysMask & 1) != 0)    days+="S";
  if ((daysMask & 2) != 0)    days+="M";
  if ((daysMask & 4) != 0)    days+="T";
  if ((daysMask & 8) != 0)    days+="W";
  if ((daysMask & 16) != 0)   days+="Th";
  if ((daysMask & 32) != 0)   days+="F";
  if ((daysMask & 64) != 0)   days+="Sa";
  return days;
}

第三个自定义格式化程序非常简单，它只是 return 一个字符串是布尔值是假的，如果是真则什么都没有：

function closedFormatter(isOpen, options, rowObject) {
  return isOpen ? '' : 'Closed';
}

这是我的 jqgrid 调用。

$("#jqgrid").jqGrid({
    colModel: [
                { name: 'timeField', label: 'Time', index: 'timeField', width: 100, formatter: timeFormatter},
                { name: 'daysOfWeek', label: 'Days of the Week', formatter: daysOfWeekFormatter},
                { name: 'openClosed', label: 'CLOSED', formatter: closedFormatter}
            ],
   datatype: 'local',
    loadonce: true, 
   scrollOffset: 0,
   viewrecords: false,
   rowNum: -1
});

$("#jqgrid").jqGrid("filterToolbar", {stringResult: true, searchOnEnter: false, defaultSearch: "cn"});

在列筛选器中，我希望用户能够仅键入他们在 table 中看到的内容并进行筛选。例如，如果他们在星期几中键入 "F"，他们会看到包括 F 在内的所有行。"S" 将生成星期六和星期日行。

知道如何做到这一点吗？我想编写一个函数，使用输入的过滤器为每一行调用，我可以 return true 或 false。 jqgrid 是否提供这样的东西？谢谢！

Answer 1

我觉得这个问题完全正确。如果您定义自定义格式化程序（colModel 中的 formatter 回调），那么正确理解 custom formatters. First of all I'd recommend you to define always unformatter（colModel 中的 unformat 回调）很重要。 unformater 仍然只对编辑数据有帮助，但对 searching/filtering.

没有帮助

您的问题的解决方案取决于您使用的 jqGrid 版本以及来自 jqGrid 的分支（free jqGrid, commercial Guriddo jqGrid JS or an old jqGrid in version <=4.7). I develop free jqGrid fork and have implemented custom filtering searching operation, which can be used to solve the problem. The wiki article 更详细地描述了这种可能性。

要正确理解该问题，必须了解数据将以与 data 参数中相同的形式保存在本地。格式化程序仅有助于将数据显示为网格单元格中的另一种视觉表示形式。 searching/filtering 数据使用 本地数据 并将其与用户在过滤器工具栏中写入的输入数据进行比较。您没有使用 filterToolbar 的 searchOperators: true 选项。因此，每一列中的 searching/filtering 只会使用一个操作。搜索操作将从 searchoptions 的 sopt 数组的第一个元素开始使用，或者从 filterToolbar 的 defaultSearch 选项开始使用，如果没有指定 searchoptions.sopt （比如在你的情况下）。您当前的代码将对过滤器中的值和列中的 本地数据 应用 cn 操作。在你的情况下它会不正确地工作。

有哪些方式可以实现正确的过滤操作？最简单直接的方法是使用自定义过滤搜索操作。您可以在 , and this one 中找到相应的示例。一般来说，您可以只定义一个 - 树自定义操作并提供您的回调函数，如果 jqGrid 需要按字段过滤，该回调函数将被调用。例如，您可以使用 filterToolbar 的 defaultSearch: "myFilter" 选项代替 defaultSearch: "cn"。此外，您应该以以下形式将选项 customSortOperations 包含到 jqGrid：

customSortOperations: {
    myFilter: {
        operand: "myFilter",
        text: "my filter",
        filter: function (options) {
            // the callback function should return true if the item of data corresponds
            // the searchValue, which the user entered in the filter toolbar

            // options.cmName is the column name ("timeField", "daysOfWeek"
            // or "openClosed")
            // options.item represent the item of data (options.item.daysOfWeek, ...) 
            // options.searchValue is the value from the filter toolbar

            // you can just format options.item[options.cmName] using
            // the corresponding formater and compare it with options.searchValue
            // if the values are the same then the callback should return true
        }
    }
}

或者可以使用 beforeSearch filterToolbar 的回调（参见 the answer）来修改 postData.filters。例如，您可以使用 filterToolbar 的 defaultSearch: "eq" 选项和 "unformat" 过滤器 rules 的 data 属性。

jqGrid 自定义格式化程序和工具栏过滤

jqGrid custom formatter and toolbar filtering

formatter

jqgrid