按已选择的 checkboxes/rows 筛选

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)。一切正常。

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

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

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

也许我需要用不同的方式描述我正在寻找的东西。假设我的网格中有 10,000 行数据。最终用户选择 checkbox/row 编号 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

如果我没理解错的话，您实际上是在要求 typed 过滤功能。这需要做一段时间。

最简单的方法是在每一列中添加一个属性 'filterAsType'，然后在过滤器header管理函数中添加一些代码以将文本转换为所需的类型（例如 Y/N/True/False => 布尔值，2017 年 1 月 5 日 => 日期）在传递给过滤器函数本身之前。

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

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

Answer 2

我就是这样解决问题的。也许不是最好的解决方案，但它确实有效。遵循本文第一段中提到的 SlickGrid 示例后 post，我通过调用 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;
}

现在，复选框过滤器输入字段中的任何字符类型现在将仅显示数据视图网格中的复选框选定行。删除字符后，将显示所有选中或未选中的行。对于最终用户来说可能不是最直观的，但可以工作。我个人将使用类似标志的字体图标更改复选框过滤器输入字段（实心表示开启，轮廓表示关闭），这将切换复选框选定的行。

按已选择的 checkboxes/rows 筛选

Filter by checkboxes/rows which were already selected

javascript

jquery

slickgrid