在开发应用程序时，经常需要对数据进行过滤和排序，以提供用户友好的界面和高效的数据处理。jqGrid是一个流行的jQuery插件，它能够以表格形式展示JSON数据源，并提供过滤和排序功能。然而，jqGrid的过滤能力可能并不总是满足需求。本文将介绍如何通过自定义过滤器来增强jqGrid的功能。
首先，需要定义一个列模型（colModel），这是一个JSON格式的对象，用于指定表格的列属性。例如，可以定义一个包含id、name和note三个字段的列模型，其中id字段用于排序，name字段可以编辑，而note字段则不可排序。
colModel: [
{name: 'id', index: 'id', width: 60, sorttype: "int"},
{name: 'name', index: 'name', width: 100, editable: true},
{name: 'note', index: 'note', width: 150, sortable: false}
]
使用jqGrid时，可以通过定义一个JSON对象来创建过滤器。这个对象包含一个groupOp字段，用于指定逻辑运算符（如AND或OR），以及一个rules数组，用于定义过滤规则。例如，可以创建一个过滤条件，要求name字段等于"Romania"，并且id字段小于或等于1。
{
"groupOp": "and",
"rules": [
{"field": "name", "op": "eq", "data": "Romania"},
{"field": "id", "op": "le", "data": "1"}
]
}
然而，对于更复杂的过滤需求，需要构建一个包含多个组的过滤器。这就需要在过滤器结构中添加一个groups数组。例如，可以创建一个过滤器，要求(name等于"John"且age大于30)或(name等于"Doe"且age小于30)或name等于"Joe"。
{
"groupOp": "or",
"groups": [
{
"groupOp": "and",
"rules": [
{"field": "name", "op": "eq", "data": "John"},
{"field": "age", "op": "gt", "data": "30"}
]
},
{
"groupOp": "and",
"rules": [
{"field": "name", "op": "eq", "data": "Doe"},
{"field": "age", "op": "lt", "data": "30"}
]
}
],
"rules": [
{"field": "name", "op": "eq", "data": "Joe"}
]
}
在构建过滤器时，需要区分组运算符和规则运算符。组运算符只有OR和AND两种，而规则运算符则包括eq（等于）、ne（不等于）、lt（小于）等，以及字符串运算符如cn（包含）、sw（以...开头）等。可以通过定义JavaScript函数来实现这些运算符的功能。
function eq(d1, d2) { return d1 == d2; }
function lt(d1, d2) { return d1 < d2; }
function gt(d1, d2) { return d1 > d2; }
接下来，可以遍历一个JSON对象数组，并使用上述函数来评估过滤表达式。例如，可以定义一个过滤表达式，然后遍历一个包含多个对象的数组，将满足过滤条件的对象添加到一个新的数组中。
var jsonItems = [
{"name": "John", "age": "18"},
{"name": "Amanda", "age": "21"},
{"name": "Dave", "age": "31"}
];
var expression = '(eq(item.name, "John") && gt(item.age, "30")) || (eq(item.name, "Doe") && lt(item.age, "30")) || eq(item.name, "Joe")';
var newJsonItems = [];
for (var index = 0; index < jsonItems.length; index++) {
var item = jsonItems[index];
if (eval(expression) == true) {
newJsonItems.push(item);
}
}
var colModel = [
{"name": "id"},
{"name": "name"},
{"name": "note"}
];
var items = [
{"name": "Romania", "id": "1", "note": "ro"},
{"name": "Franta", "id": "2", "note": "fr"},
{"name": "Anglia", "id": "3", "note": "uk"},
{"name": "Italia", "id": "4", "note": "it"},
{"name": "Germania", "id": "5", "note": "ge"}
];
var f = new xFilter(document.getElementById("fil"), {
columns: colModel,
onchange: function() {
document.getElementById("message").innerHTML = this.toUserFriendlyString();
var resItems = f.Apply(items);
var s = "";
for (var i = 0; i < resItems.length; i++) {
s += "," + resItems[i].name;
}
document.getElementById("message").innerHTML = s;
}
});