如何在我的Grails应用程序中使用SlickGrid同时搜索多列?
如何在我的Grails应用程序中使用SlickGrid同时搜索多列?
这是一个搜索多列的代码。
var dataView = new Slick.Data.DataView();
var slickGrid = new Slick.Grid($('#grid_div'), dataView, gridColumns, gridOptions);
$('#search').keyup(function(e) {
// clear on Esc
if (e.which == 27) {
this.value = "";
}
var searchList = $.trim(this.value.toLowerCase()).split(' ');
dataView.setFilter(gridFilter);
slickGrid.invalidate();
this.focus();
});
function gridFilter (rec) {
var found;
for (i = 0; i < gridSearchList.length; i += 1) {
found = false;
$.each(rec, function(obj, objValue) {
if (typeof objValue !== 'undefined' && objValue != null
&& objValue.toString().toLowerCase().indexOf(gridSearchList[i]) != -1) {
found = true;
return false; //this breaks the $.each loop
}
});
if (!found) {
return false;
}
}
return true;
}
为了在多列中进行搜索(通过ajax从服务器检索到的数据),我已经做了以下操作:
使用如下所示的过滤代码: http://mleibman.github.com/SlickGrid/examples/example4-model.html,但是将“myFilter”函数内的代码更改为以下内容:
function myFilter(item, args) {
if (args.searchString != "" && item["field1"].indexOf(args.searchString) == -1 &&
item["field2"].indexOf(args.searchString) == -1 &&
item["field3"].indexOf(args.searchString) == -1)
{
return false;
}
return true;
}
等等……希望这能有所帮助!
这个使用空格分隔符可以工作:
var grid;
var dataView;
var searchList = [];
function myFilter(item, args) {
var mnull = 0, optnull = 0, l = searchList.length, len = grid.getColumns().length;
for (var i = 0; i < l; i++) {
for (var j = 0; j < len; j++) {
if (item[grid.getColumns()[j].field].toLowerCase().indexOf(searchList[i]) == -1) {mnull++}
}
if (mnull == len) {optnull++}
mnull = 0;
}
/* For searching like with operator "OR"
if (optnull == l && optnull != 0) {return false;}
*/
if (optnull != 0) {return false;}
return true;
}
jQuery(function ($) {
dataView = new Slick.Data.DataView();
grid = new Slick.Grid($("#container"), dataView, columns, options);
$("#txtSearch").keyup(function (e) {
// clear on Esc
if (e.which == 27) {
this.value = "";
}
searchList = $.trim(this.value.toLowerCase()).split(' ');
dataView.refresh();
});
dataView.beginUpdate();
dataView.setItems(data);
dataView.setFilter(myFilter);
dataView.endUpdate();
});