slickgrid +多列搜索

Question

如何在我的grails應用程序中使用slickGrid來一次搜索多列？

https://github.com/mleibman/SlickGrid/tree/master/examples

Answer 1

這是用於在多列上搜索的代碼。

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

Answer 2

對於多個列搜索（從通過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; 

} 

等等......希望這會有所幫助！

Answer 3

這適用於空間分隔符：

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