Question

我有一个带有数据的Slickgrid网格（dataView），快速过滤器（example-header-row.html），带有syncGridSelection的复选框行选择器（example-checkbox-row-select.html）（https://github.com/mleibman/SlickGrid/wiki/DataView#synchronizing-selection--cell-css-styles）。一切正常。

默认情况下，快速过滤器会在复选框列中放置一个输入框。如果可以通过复选框（行）ALREADY选择过滤会很好，但我认为任何输入文本都不可能进行过滤？所以，相反，我只关闭了复选框列中的过滤器输入，并使用切换按钮重新放置它，我希望可以通过已选中的复选框/行进行过滤。

我看过一些带有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开始，第二个对象的开始，等等。

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 =＆gt; ; boolean，5月2017 =＆gt;日期），然后传递给过滤函数本身。

更高级的选项将在过滤单元格中包含适当的UI，如复选框，下拉列表或日期选择器。这虽然绝对可能，甚至可能不那么复杂，但比基于文本的选项要多得多。

您应该查看my repo，它更新，并且有很多小的改进。

按已选中的复选框/行进行过滤

2 个答案: