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

时间:2016-05-16 15:57:45

标签: jqgrid formatter

之前已经在这里提出了类似的问题,但在我的方案中我没有使用这些答案取得任何成功。

我有一个数据类型的网格:'local'和loadonce:true。在我的3列中,我使用自定义格式化程序。

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

第二个客户格式化程序采用整数并返回一个字符串,表示该数字代表的星期几。它使用按位运算,其中1为星期日,2为星期一,4为星期二,8为星期三等。因此,数字67表示星期日,星期一和星期六(1 + 2 + 64),因此格式化程序返回“SMSa”< / p>

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

第三个自定义格式化程序非常简单,只返回一个字符串,布尔值为false,如果是真的则没有任何内容:

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”将产生星期六和星期日行。

有什么想法可以做到这一点?我想编写一个函数,使用类型为filter的函数调用每一行,我可以返回true或false。 jqgrid提供这样的东西吗? 谢谢!

1 个答案:

答案 0 :(得分:1)

我觉得这个问题绝对正确。正确理解custom formatters非常重要。首先,如果您在{{1}中定义自定义格式化程序unformat回调,我建议您始终在colModel中始终定义unformatterformatter回调) })。 unformater仍然只能帮助编辑数据,但不能用于搜索/过滤。

您的问题的解决方案取决于您使用的jqGrid版本以及jqGrid(free jqGrid,商业Guriddo jqGrid JS的分支或版本&lt; = 4.7中的旧jqGrid)。我开发了免费的jqGrid fork并实现了自定义过滤搜索操作,可用于解决问题。 The wiki article描述了更详细的可能性。

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

哪些方法必须实现正确的过滤操作?最简单直接的方法是使用自定义过滤搜索操作。您可以在the answerthe answerthis one中找到相应的示例。通常,您可以定义一个树自定义操作并提供您的回调函数,如果jqGrid需要按字段过滤,将调用该函数。例如,您可以使用searchoptions.sopt的{​​{1}}选项代替cn。另外,您应该在表格中包含选项defaultSearch: "myFilter"到jqGrid:

filterToolbar

或者,可以使用defaultSearch: "cn"的{​​{1}}回调(请参阅the answer)来修改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 } } } 的{​​{1}}选项和“取消格式化”过滤器beforeSearch的{​​{1}}属性。