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

Question

之前已经在这里提出过类似的问题，但我在我的场景中使用这些答案没有任何成功。

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

第一个以毫秒为单位获取时间戳，并以“H:MM am”的形式显示时间（例如，上午 8 点 35 分，下午 12 点 19 分）。我将省略该代码，因为我确定它不相关。

第二个客户格式化程序接受一个整数并返回一个字符串，指示该数字代表一周中的哪几天。它使用按位运算，其中 1 是星期日，2 是星期一，4 是星期二，8 是星期三，等等。所以数字 67 代表星期日、星期一和星期六 (1+2+64)，所以格式化程序返回 "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;
}

第三个自定义格式化器很简单，它只是返回一个字符串，如果是布尔值则为假，如果为真则什么都没有：

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"});

在列过滤器中，我希望用户能够只输入他们在表格中看到的内容并进行过滤。例如，如果他们在星期几中键入“F”，他们会看到包括 F 在内的所有行。“S”将产生周六和周日行。

任何想法如何做到这一点？我想编写一个函数，用输入的过滤器为每一行调用，我可以返回真或假。 jqgrid 提供这样的东西吗？ 谢谢！

Answer 1

我觉得这个问题完全正确。正确理解custom formatters 很重要。首先，如果您定义自定义格式化程序（formatter 回调在colModel），我建议您始终定义unformatter（unformat 回调在colModel）。 unformater 仍然只对编辑数据有帮助，但对搜索/过滤没有帮助。

您的问题的解决方案取决于您使用的 jqGrid 版本以及 jqGrid 的分支（free jqGrid、商业Guriddo jqGrid JS 或版本 自定义过滤搜索操作，可以用来解决问题。 The wiki article 更详细地描述了这种可能性。

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

必须通过哪些方式来实现正确的过滤操作？最简单直接的方法是使用自定义过滤搜索操作。您可以在the answer、the answer 和this one 中找到相应的示例。一般来说，您可以只定义一棵树自定义操作并提供您的回调函数，如果 jqGrid 需要按字段过滤，该函数将被调用。例如，您可以使用filterToolbar 的defaultSearch: "myFilter" 选项而不是defaultSearch: "cn"。此外，您应该在 jqGrid 中包含选项 customSortOperations，格式为：

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

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