我是jquery和slickgrid的新手。 我需要一些帮助来在光滑网格上使用快速文本filter添加快速文本filter。
我试着按照给出的例子： https ： //github.com/mleibman/SlickGrid/blob/gh-pages/examples/example-header-row.html和http://mleibman.github.io/SlickGrid/examples /example-header-row.html
但我有点搞砸了。 无法使filter工作。
这是我的代码。
JSP：
No results found !
jQuery的：
function carfactory(){ var holder=new Array(); var i=0; holder[i]={ id: i, createdon: '', modifiedon:'', status:'', username:'' } i++; return holder; } var columns = []; var columnFilters = {}; function filter(item) { for (var columnId in columnFilters) { if (columnId !== undefined && columnFilters[columnId] !== "") { var c = grid.getColumns()[grid.getColumnIndex(columnId)]; if (item[c.field] != columnFilters[columnId]) { return false; } } } return true; } (function($) { function createGrid(grid) { if ( grid.grid ==undefined ) { grid.dataView = new Slick.Data.DataView(); grid.grid = new Slick.Grid(grid.element, grid.dataView, grid.columns, grid.options); if ( grid.pagerElement != undefined ) { grid.pager = new Slick.Controls.Pager(grid.dataView, grid.grid, grid.pagerElement); } grid.dataView.onRowCountChanged.subscribe(function (e, args){ grid.grid.updateRowCount(); grid.grid.render(); }); grid.dataView.onRowsChanged.subscribe(function (e, args){ grid.grid.invalidateRows(args.rows); grid.grid.render(); }); grid.grid.onSort.subscribe(function (e, args){ grid.dataView.fastSort(args.sortCol.field, args.sortAsc); }); $(grid.grid.getHeaderRow()).delegate(":input", "change keyup", function (e) { var columnId = $(this).data("columnId"); if (columnId != null) { columnFilters[columnId] = $.trim($(this).val()); dataView.refresh(); } }); grid.grid.onHeaderRowCellRendered.subscribe(function(e, args) { $(args.node).empty(); $("") .data("columnId", args.column.id) .val(columnFilters[args.column.id]) .appendTo(args.node); }); grid.dataView.beginUpdate(); if ( grid.data != undefined ) grid.dataView.setItems(grid.data); if ( grid.data != undefined ) grid.dataView.setFilter(filter); if ( grid.pager != undefined ) grid.dataView.setPagingOptions({ pageSize: 15, pageNum: 1 }); grid.dataView.endUpdate(); } return grid; } var carFactoryGrid = createGrid({ element: $("#carGrid"), pagerElement: $("#carPager"), columns: [ {id: "createdOn", name: "Created On", field: "createdon", sortable: true, width: 200}, {id: "modifiedon", name: "Modified On", field: "modifiedon", sortable: true, width: 200}, {id: "status", name: "Status", field: "status", sortable: true, width: 50}, {id: "username", name: "Username", field: "username", sortable: true, width: 150} ], options: { enableColumnReorder: false, autoHeight: true, rowHeight: 20 }, data:carfactory() }); })(jQuery);
代码中有一些区域阻止标头filter出现和运行。 我已经在下面解释了他们对小提琴http://jsfiddle.net/rg8n7vc2/的反思，它解决了这些问题。 请注意，出于测试目的，我注释掉了填充网格的JSP代码，并将其替换为随机测试数据。
名为carFactoryGrid的网格变量在闭包内定义，但filter函数试图在闭包之外访问它。 在闭包之外声明变量carFactoryGrid允许filter函数访问它（类似于您链接的示例）。 或者，如果您愿意，可以在闭包内移动filterfunction。
小提琴中突出显示的修复1的更改包括：
//Line 44 - Delcare carFactoryGrid outside closure var carFactoryGrid; //Line 51 - Amend filter function to use carFactoryGrid variable var c = carFactoryGrid.grid.getColumns()[carFactoryGrid.grid.getColumnIndex(columnId)]; //Line 102 - Remove declaration from inside closure (remove var) carFactoryGrid = createGrid({
要查看示例中所示的filter标题行，您必须在初始化SlickGrid（showHeaderRow和headerRowHeight）时包含相关选项。 此外，在订阅onHeaderRowCellRendered事件之后，必须手动初始化网格，以确保正确构造标题行。 为此，必须将选项explicitInitialization设置为true并将grid.init(); 您订阅事件后手动调用以初始化网格。
小提琴中突出显示的Fix 2的更改包括：
//Line 96 - Initialize grid grid.grid.init(); //Line 117 - Additional options for grid showHeaderRow: true, headerRowHeight: 34, explicitInitialization: true
代码中的filter函数与整个字符串匹配，区分大小写。 因此，您必须在filter中输入带有正确大小写的完整单词（例如，’Chris’进入用户名），以显示匹配的结果。 如果您想在键入时匹配，则需要使用.indexOf（）修改函数。 使用indexOf示例的小提琴的更新版本是http://jsfiddle.net/rg8n7vc2/2/ ，其中包含以下更新：
//Line 54 //Filtering amendments //Check for null value if (!item[c.field] && columnFilters[columnId]){ return false; } //Convert the value to a string in case it is a date using toString() //If you are just passing strings instead of dates then .toString is not necessary //If you are using dates then ideally you'd call the relevant formatter here to get the correct format //Converts all to upper case then checks for existence of filter value in value using indexOf if (item[c.field].toString().toUpperCase().indexOf(columnFilters[columnId].toUpperCase()) == -1) { return false; }