在Slick网格上快速过滤 [英] Quick filter on Slick grid
问题描述
我是jquery和slickgrid的新手.我需要一些帮助，以便在光滑的网格上使用快速文本过滤器来添加快速文本过滤器.
I am new to jquery and slickgrid. I need some help to add quick text filter using quick text filter on slick grid.
我尝试遵循以下示例: https://github.com/mleibman/SlickGrid /blob/gh-pages/examples/example-header-row.html 和 http://mleibman.github.io/SlickGrid/examples/example-header-row.html
I tried to follow the example given on : https://github.com/mleibman/SlickGrid/blob/gh-pages/examples/example-header-row.html and http://mleibman.github.io/SlickGrid/examples/example-header-row.html
但是我有点搞砸了.无法使过滤器正常工作.
But I kind of messed it up. Couldn't get the filter working.
这是我的代码.
JSP:
<div>
<div id="carfactory" class=" ui-state-default" style="width: 860px; text-align: left;">
<div id="carGrid"></div>
<div id="carPager" style="height: 30px;" class="ui-widget"></div>
</div>
</div>
<c:if test="${info == null or empty info}">
<div class="ui-widget style="float:center">
<strong>No results found !</strong>
</div>
<br>
</c:if>
</div>
jQuery:
<script type="text/javascript">
function carfactory(){
var holder=new Array();
var i=0;
<c:forEach var="message" items="${info}" >
holder[i]={
id: i,
createdon: '<c:out value="${message.createdOn}"/>',
modifiedon:'<c:out value="${message.modifiedOn}"/>',
status:'<c:out value="${message.status}"/>',
username:'<c:out value="${message.username}"/>'
}
i++;
</c:forEach>
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();
$("<input type='text'>")
.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);
</script>
推荐答案
代码中有一些区域阻止标题过滤器的出现和运行.我在下面对小提琴 http://jsfiddle.net/rg8n7vc2/的提法进行了解释. .请注意，出于测试目的，我注释掉了填充网格并用随机测试数据替换的JSP代码.
There are a few areas in the code which prevent the header filters from appearing and functioning. I've explained them below with refrences to the fiddle http://jsfiddle.net/rg8n7vc2/ which resolves them. Please note for test purposes I commented out the JSP code which populates the grid and replaced it with random test data.
在闭包中定义了名为carFactoryGrid的网格变量，但是过滤器功能正在尝试在闭包外部访问它.在闭包外部声明变量carFactoryGrid允许过滤器函数访问它(类似于您链接的示例).另外，您也可以根据需要将过滤器功能移到封盖内.
The grid variable named carFactoryGrid is defined within the closure, yet the filter function is attempting to access it outside of the closure. Declaring the variable carFactoryGrid outside of the closure allows the filter function to access it (similar to the example you linked). Alternatively you could move the filter function inside the closure if you wish.
小提琴中突出显示的Fix 1的更改是:
The changes for Fix 1 highlighted in the Fiddle are:
//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({
网格选项和初始化
要查看示例中所示的过滤器标题行，必须在初始化SlickGrid时包括相关选项(showHeaderRow和headerRowHeight).此外，在订阅onHeaderRowCellRendered事件之后，必须手动初始化网格，以确保正确构造标题行.为此，必须将选项explicitInitialization设置为true，并在预订事件后手动调用grid.init();来初始化网格.
Grid options and initialization
To view the filter header row as shown in the example you must include the relevant options when initialising SlickGrid (showHeaderRow and headerRowHeight). Additionally the the grid must be initialised manually after subscribing to the onHeaderRowCellRendered event to ensure the header row is constructed correctly. To do this the option explicitInitialization must be set to true and grid.init(); manually called to initialize the grid once you've subscribed to the events.
小提琴中突出显示的Fix 2的更改是:
The changes for Fix 2 highlighted in the Fiddle are:
//Line 96 - Initialize grid
grid.grid.init();
//Line 117 - Additional options for grid
showHeaderRow: true,
headerRowHeight: 34,
explicitInitialization: true
过滤说明
代码中的filter函数匹配整个字符串，并且区分大小写.因此，您必须在过滤器中输入带有正确大小写的完整单词(例如，在用户名中输入"Chris")，以便显示匹配的结果.如果您想在键入时进行匹配，则需要使用.indexOf()修改函数.使用indexOf示例的小提琴的更新版本为 http://jsfiddle.net/rg8n7vc2/2/具有以下更新:
Filtering Notes
The filter function in the code matches the whole string and is case sensitive. You must therefore type the full word with the correct case into the filter (e.g. 'Chris' into Username) for matched results to appear. If you'd like to match as you type then you'll need to amend the function using .indexOf(). An updated version of the fiddle using an example of indexOf is http://jsfiddle.net/rg8n7vc2/2/ which has the updates below:
//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;
}
这篇关于在Slick网格上快速过滤的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
