jqGrid自定义格式化程序和工具栏过滤 [英] jqGrid custom formatter and toolbar filtering
问题描述
之前曾在这里提出过类似的问题，但是在我的情况下使用这些答案并没有取得成功.
我有一个网格，其数据类型为:"local"，而loadonce:true.在我的3栏中，我使用了自定义格式器.
第一个以毫秒为单位的时间戳记，并以"H:MM am"的形式显示时间(例如8:35 am，12:19 pm).我会确定该代码不相关，因此将省略该代码.
第二个客户格式化程序采用一个整数，并返回一个字符串，该字符串指示该数字代表一周中的哪几天.它使用按位运算，其中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;
}
第三个自定义格式化程序非常简单，它仅返回一个字符串，如果布尔值为false，则返回true:
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"将产生周六和周日的行.
有什么想法可以做到吗?我想编写一个函数，该函数针对在过滤器中键入的每一行进行调用，并且我可以返回true或false. jqgrid是否提供像这样的东西? 谢谢！
我发现这个问题绝对正确.对于正确理解自定义格式化程序，这一点很重要.首先，我建议您始终定义 unformatter colModel中的formatter回调)，则始终为a>(colModel中的unformat回调).取消格式化程序仍仅对编辑数据有用，而对搜索/过滤无济于事.
问题的解决方案取决于您使用的jqGrid版本以及jqGrid的分支(免费jqGrid ，商业 Guriddo jqGrid JS 或版本< = 4.7的旧jqGrid ).我开发了免费的jqGrid fork，并实现了自定义过滤搜索操作，可用于解决该问题. 维基文章详细描述了这种可能性. /p>
要正确理解问题，必须理解数据将以与data参数相同的形式保存在本地.格式化程序仅有助于将数据显示为网格单元格中的其他可视表示形式.数据搜索/过滤使用本地数据并将其与用户在过滤器工具栏中编写的输入数据进行比较.您没有使用filterToolbar的searchOperators: true选项.因此，在每一列中仅将使用一个操作进行搜索/过滤.搜索操作将从答案，此.通常，您只需要定义一棵树的自定义操作并提供您的回调函数即可，如果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回调(请参见答案)来修改postData.filters .例如，您可以使用filterToolbar的defaultSearch: "eq"选项，并取消格式化"过滤器rules的data属性.
Similar questions to this have been asked here before but I haven't had any success using those answers in my scenario.
I have a grid with datatype: 'local', and loadonce: true. In 3 of my columns I use a custom formatter.
The first one takes a timestamp in milliseconds and displays a time in the form of "H:MM am" (eg, 8:35 am, 12:19 pm). I'll omit that code as I'm sure it's not relevant.
The second customer formatter takes an integer and returns a string indicating which days of the week the number represents. It uses bitwise operations where 1 is Sunday, 2 is Monday, 4 is Tuesday, 8 is Wed, etc. So the number 67 represents Sunday, Monday, and Saturday (1+2+64), so the formatter returns "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;
}
The third custom formatter is very simple, it just returns a string is a boolean is false, and nothing if it's true:
function closedFormatter(isOpen, options, rowObject) {
return isOpen ? '' : 'Closed';
}
Here is my jqgrid call.
$("#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"});
In the column filters, I want users to be able to just type what they see in the table and get those filtered. For example, if they type "F" in the days of week, they see all the rows including F. "S" would yield the saturday and sunday rows.
Any ideas how this can be done? I'd like to write a function that gets called for every row with the typed in filter and I can return true or false. Does jqgrid provide anything like this? Thanks!
I find the question absolutely correct. It's important for correctly understanding of custom formatters. First of all I'd recommend you to define always unformatter (unformat callback in the colModel) always if you define custom formatter (formatter callback in the colModel). The unformater will still help only for editing the data, but not for searching/filtering.
The solution of your problem depends on the jqGrid version, which you use and from the fork of 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 described the possibility more detailed.
To understand correctly the problem one have to understand that the data will be hold locally in the same form like in the data parameter. The formatter helps only to display the data as some another visual representation in the cells of the grid. The searching/filtering of data use local data and compare it with the input data, which the user wrote in the filter toolbar. You didn't used searchOperators: true option of filterToolbar. Thus only one operation will be used for searching/filtering in every column. The searching operation will be used either from the first element from sopt array of the searchoptions or from defaultSearch option of filterToolbar is no searchoptions.sopt is specified (like in your case). Your current code will apply cn operation with the value from the filter and the local data in the column. It will work incorrectly in your case.
Which ways one have to implement correct filtering operation? The most easy and direct way would be the usage of custom filtering searching operation. You can find the corresponding examples in the answer, the answer and this one. In general you can just define one - tree custom operation and provide your callback function which will be called if jqGrid will need to filter by the field. For example you can use defaultSearch: "myFilter" option of filterToolbar instead of defaultSearch: "cn". Additionally ou should include the option customSortOperations to jqGrid in the form:
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
}
}
}
Alternatively one can use beforeSearch callback of filterToolbar (see the answer) to modify the postData.filters. For example you can use defaultSearch: "eq" option of filterToolbar and "unformat" the data properties of the rules of the filters.
这篇关于jqGrid自定义格式化程序和工具栏过滤的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
