如何在光滑网格中单击按钮时清除所有过滤器
How to clear all filters when single click button in slick grid
我使用下面的代码在 div 标签内加载了光滑的网格,它是
工作正常,但我想在光滑的网格中发挥更多功能。
如何通过单击按钮删除所有过滤器?
function LoadSlickGrid(txtHRMFilter) {
$(function () {
//debugger;
var data = [];
$.ajax({
url: '/Home/GetDetails/?strHRMFilter=' + txtHRMFilter,
dataType: "json",
type: "POST",
async: false,
contentType: "application/json",
success: function (result) {
data = result.desc;
}
});
var dataView = new Slick.Data.DataView();
grid = new Slick.Grid("#grid", dataView, columns, options);
grid.setSelectionModel(new Slick.CellSelectionModel());
dataView.onRowCountChanged.subscribe(function (e, args) {
grid.updateRowCount();
grid.render();
});
dataView.onRowsChanged.subscribe(function (e, args) {
grid.invalidateRows(args.rows);
grid.render();
});
dataView.beginUpdate();
dataView.setItems(data);
dataView.setFilter(filter);
dataView.endUpdate();
dataView.refresh();
var filterPlugin = new Ext.Plugins.HeaderFilter({});
filterPlugin.onFilterApplied.subscribe(function () {
dataView.refresh();
grid.resetActiveCell();
var status;
if (dataView.getLength() === dataView.getItems().length) {
status = "";
} else {
status = dataView.getLength() + ' OF ' + dataView.getItems().length + ' RECORDS FOUND';
}
$('#status-label').text(status);
});
var pager = new Slick.Controls.Pager(dataView, grid, $("#pager"));
filterPlugin.onCommand.subscribe(function (e, args) {
dataView.fastSort(args.column.field, args.command === "sort-asc");
});
grid.registerPlugin(filterPlugin);
var overlayPlugin = new Ext.Plugins.Overlays({});
// Event fires when a range is selected
overlayPlugin.onFillUpDown.subscribe(function (e, args) {
var column = grid.getColumns()[args.range.fromCell];
// Ensure the column is editable
if (!column.editor) {
return;
}
var value = dataView.getItem(args.range.fromRow)[column.field];
dataView.beginUpdate();
for (var i = args.range.fromRow + 1; i <= args.range.toRow; i++) {
dataView.getItem(i)[column.field] = value;
grid.invalidateRow(i);
}
dataView.endUpdate();
grid.render();
});
grid.setSelectionModel(new Slick.RowSelectionModel({ selectActiveRow: false }));
grid.registerPlugin(checkboxSelector);
grid.registerPlugin(overlayPlugin);
grid.init();
function filter(item) {
var columns = grid.getColumns();
var value = true;
for (var i = 0; i < columns.length`enter code here`; i++) {
var col = columns[i];
var filterValues = col.filterValues;
if (filterValues && filterValues.length > 0) {
value = value & _.contains(filterValues, item[col.field]);
}
}
return value;
}
});
}
--------------------------------
现在我想在 slickgrid 中通过单击按钮清除所有过滤器。
$("#btnclear").click(function () {
ClearSlickGrid();
});
我怎样才能做到这一点?
提前致谢。
您可以简单地设置一个空白过滤器:
$("#btnclear").click(function () {
dataView.setFilter(function(item){
return true;
}
});
如果您想重新应用旧过滤器,只需调用:
dataView.setFilter(filter);
我使用下面的代码在 div 标签内加载了光滑的网格,它是 工作正常,但我想在光滑的网格中发挥更多功能。 如何通过单击按钮删除所有过滤器?
function LoadSlickGrid(txtHRMFilter) {
$(function () {
//debugger;
var data = [];
$.ajax({
url: '/Home/GetDetails/?strHRMFilter=' + txtHRMFilter,
dataType: "json",
type: "POST",
async: false,
contentType: "application/json",
success: function (result) {
data = result.desc;
}
});
var dataView = new Slick.Data.DataView();
grid = new Slick.Grid("#grid", dataView, columns, options);
grid.setSelectionModel(new Slick.CellSelectionModel());
dataView.onRowCountChanged.subscribe(function (e, args) {
grid.updateRowCount();
grid.render();
});
dataView.onRowsChanged.subscribe(function (e, args) {
grid.invalidateRows(args.rows);
grid.render();
});
dataView.beginUpdate();
dataView.setItems(data);
dataView.setFilter(filter);
dataView.endUpdate();
dataView.refresh();
var filterPlugin = new Ext.Plugins.HeaderFilter({});
filterPlugin.onFilterApplied.subscribe(function () {
dataView.refresh();
grid.resetActiveCell();
var status;
if (dataView.getLength() === dataView.getItems().length) {
status = "";
} else {
status = dataView.getLength() + ' OF ' + dataView.getItems().length + ' RECORDS FOUND';
}
$('#status-label').text(status);
});
var pager = new Slick.Controls.Pager(dataView, grid, $("#pager"));
filterPlugin.onCommand.subscribe(function (e, args) {
dataView.fastSort(args.column.field, args.command === "sort-asc");
});
grid.registerPlugin(filterPlugin);
var overlayPlugin = new Ext.Plugins.Overlays({});
// Event fires when a range is selected
overlayPlugin.onFillUpDown.subscribe(function (e, args) {
var column = grid.getColumns()[args.range.fromCell];
// Ensure the column is editable
if (!column.editor) {
return;
}
var value = dataView.getItem(args.range.fromRow)[column.field];
dataView.beginUpdate();
for (var i = args.range.fromRow + 1; i <= args.range.toRow; i++) {
dataView.getItem(i)[column.field] = value;
grid.invalidateRow(i);
}
dataView.endUpdate();
grid.render();
});
grid.setSelectionModel(new Slick.RowSelectionModel({ selectActiveRow: false }));
grid.registerPlugin(checkboxSelector);
grid.registerPlugin(overlayPlugin);
grid.init();
function filter(item) {
var columns = grid.getColumns();
var value = true;
for (var i = 0; i < columns.length`enter code here`; i++) {
var col = columns[i];
var filterValues = col.filterValues;
if (filterValues && filterValues.length > 0) {
value = value & _.contains(filterValues, item[col.field]);
}
}
return value;
}
});
}
--------------------------------
现在我想在 slickgrid 中通过单击按钮清除所有过滤器。
$("#btnclear").click(function () {
ClearSlickGrid();
});
我怎样才能做到这一点? 提前致谢。
您可以简单地设置一个空白过滤器:
$("#btnclear").click(function () {
dataView.setFilter(function(item){
return true;
}
});
如果您想重新应用旧过滤器,只需调用:
dataView.setFilter(filter);