按已选中的复选框/行进行筛选

Question

我有一个填充数据的光滑网格网格(dataView)，快速过滤器(示例标题行.html)，复选框行选择器(示例复选框行选择.html)与syncGridSelection一起 (https://github.com/mleibman/SlickGrid/wiki/DataView#synchronizing-selection--cell-css-styles)。一切正常。

默认情况下，快速筛选器在复选框列中放置一个输入框。如果可以按已选中的复选框(行)进行过滤会很好，但我认为无法过滤任何输入文本？因此，相反，我仅在复选框列中关闭了过滤器输入，并使用切换按钮重新放置了它，我希望可以通过已选择的复选框/行进行过滤。

我已经看到了一些带有grid.getSelectedRows()的代码，但不确定如何在dataView中使用它，尤其是使用syncGridSelection函数。

我的目标是打开/过滤在 dataView 网格中已选中的复选框以供查看。代码建议，示例将不胜感激。

---

也许我需要以不同的方式描述我正在寻找的东西。假设我的网格中有 10,000 行数据。最终用户选择复选框/行号 1、行号 450 和行号 999。选择完行后，他们可能需要查看他们选择了哪些行。与其让他们滚动浏览所有 10,000 条记录以查看他们选择了什么，不如过滤他们已经选择的行。过滤后，网格将仅显示 3 行，即第 1 行、450 行和 999 行。删除筛选器后，将显示所有 10,000 条记录。

我一直在过滤器级别解决这个问题，但苦苦挣扎。使用基于文本的过滤器：下面的第一个示例是读取子项并检查其是否被选中。

下面的第二个示例是检查"this"行号是否在grid.getSelectedRows()的数组中。第二种方法的问题是我不确定如何获取我们正在检查的当前行号。

对下面的代码有什么建议吗？

function filter(item) {
for (var columnId in columnFilters) {
if (columnId !== undefined && columnId != "_checkbox_selector" && columnFilters[columnId] !== "") {
var c = grid.getColumns()[grid.getColumnIndex(columnId)];
if (item[c.field] != columnFilters[columnId]) {
return false;
}               
} else if (columnId == "_checkbox_selector") {
/* something like....
if input checkbox is NOT checked
return false;
*/
}       
}   
return true;
}

--或--

function filter(item) {
var rows = grid.getSelectedRows();
for (var columnId in columnFilters) {
if (columnId !== undefined && columnId != "_checkbox_selector" && columnFilters[columnId] !== "") {
var c = grid.getColumns()[grid.getColumnIndex(columnId)];
if (item[c.field] != columnFilters[columnId]) {
return false;
}               
} else if (columnId == "_checkbox_selector") {
/* something like.... 
var isFound = rows.indexOf(this.row);  
if (isFound == -1) {
return false;
}
*/
}       
}   
return true;
}         

Answer 1

这就是我解决问题的方式。也许不是最好的解决方案，但它有效。在遵循本文第一段中提到的 SlickGrid 示例之后，我通过调用 setData 函数并传递我的值来创建我的数据对象。rowIndex 的值是一个计数器，以 0 开头表示第一个对象，1 开始表示第二个对象，依此类推。

var setData = function(rowIndex, fieldOne, fieldTwo) {
var d = (data[rowIndex] = {});          
d["id"] = rowIndex;
d["c0"] = fieldOne;
d["c1"] = fieldTwo;         
}

然后，我将默认过滤器更改为以下代码。

var columnFilters = {};
function filter(item) {
var rows = grid.getSelectedRows(); // array of lines already selected 
for (var columnId in columnFilters) {
if (columnId !== undefined && columnId != "_checkbox_selector" && columnFilters[columnId] !== "") {
var c = grid.getColumns()[grid.getColumnIndex(columnId)];
if (item[c.field] != columnFilters[columnId]) {
return false;
}               
} else if (columnId !== undefined && columnId == "_checkbox_selector" && columnFilters[columnId] !== "") {
var dataViewSelectedRowIds = dataView.mapRowsToIds(grid.getSelectedRows());
var isFound = dataViewSelectedRowIds.indexOf(item.id);  
if (isFound == -1) {
return false;
}
}       
}   
return true;
}

现在，复选框过滤器输入字段中的任何字符类型现在都将在 dataView 网格中仅显示复选框选定的行。删除字符后，将显示所有选择或未选择的行。对于最终用户来说可能不是最直观的，但有效。我个人将使用一个字体图标(实心表示打开，轮廓表示关闭)更改复选框过滤器输入字段，这将切换复选框所选行。

Answer 2

如果我理解正确，你本质上是在要求一个类型化的过滤器函数。这已经需要做了一段时间了。

最简单的方法是向每列添加一个属性"filterAsType"，然后将一些代码添加到过滤器标头管理函数中，以将文本转换为必要的类型(例如。Y/N/True/False => 布尔值，2017 年 1 月 5 日 => 日期)，然后传递给过滤器函数本身。

更高级的选项将涉及筛选器单元格中的正确 UI，例如复选框、下拉列表或日期选择器。虽然这绝对是可能的，甚至可能没有那么复杂，但比基于文本的选项要多得多。

您应该查看我的存储库，它是最新的，并且有很多小的增强功能。