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

我有一个用数据填充的Slickgrid网格数据视图，快速过滤器example-header-row.html，复选框行选择器example-checkbox-row-select.html和syncGridSelection . 一切正常

默认情况下，快速过滤器会在复选框列中放置一个输入框。如果可以通过选中的复选框行进行筛选就好了，但我认为任何输入文本都不可能进行筛选？因此，我只在复选框列中关闭了过滤器输入，并用一个切换按钮将其重新放置，我希望该按钮可以通过已选中的复选框/行进行过滤

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

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

也许我需要用不同的方式来描述我在寻找什么。假设我的网格中有10000行数据。最终用户选择复选框/行号1、行号450和行号999。在完成选择行之后，他们可能希望查看所选的行。与其让他们滚动所有10000条记录以查看他们选择了什么，不如过滤他们已经选择的行。过滤后，网格将仅显示3行、第1行、第450行和第999行。移除过滤器后，将显示所有10000条记录

我一直在过滤器级别处理这个问题，但仍在努力。使用基于文本的筛选器：下面的第一个示例是读取子项并检查其是否已选中

下面的第二个示例是检查此行号是否在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;
}         

---

如果我没弄错的话，你实际上是在要求一个类型化的过滤函数。这已经需要做一段时间了

最简单的方法是在每一列中添加一个属性'FilteraType'，然后在过滤器头管理函数中添加一些代码，将文本转换为必需的类型，例如Y/N/True/False=>boolean，2017年1月5日=>Date，然后再传递给过滤器函数本身

更理想的选择是在过滤单元中包含一个合适的UI，比如复选框、下拉列表或日期选择器。这当然是可能的，甚至可能没有那么复杂，但比基于文本的选项要复杂得多

---

你应该去看看，它更新得多，有很多小的增强功能。

这就是我解决问题的方法。也许不是最好的解决方案，但它是有效的。在遵循本文第一段中提到的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网格中仅显示复选框选中的行。删除字符后，将显示所有选中或未选中的行。对于最终用户来说，这可能不是最直观的，但它是有效的。我个人将用一个字体图标来更改复选框过滤器输入字段，比如一个实心标志表示打开，轮廓表示关闭，这将切换复选框所选的行。

是的，6pac/SlickGrid非常棒，我目前正在使用它。感谢您对其进行维护和更新。我刚刚发布了一些新的信息，我希望这些信息能够解决这个问题@Ben McIntyreIf可能的话，你能将你的示例页面添加到你的git回购协议中，并将其作为拉取请求提出吗？我很高兴让这成为一个正式的例子。就我而言，例子越多越好。听起来不错。我将从头开始使用example-checkbox-row-select.html、example-header-row.html，添加我的代码，并将其作为拉取请求提出-谢谢。再次感谢您为6pac所做的一切工作@本杰明：太棒了。有时使用的另一种方法是使用顶部的选定行对网格进行排序。这是一种同时显示选定行和未选定行的方法，尽管在确定何时将新选定行或取消选定行移到新位置时有点困难。我的原始答案有效，但在其他筛选器也有输入时则无效。我更正了上面的答案/代码，该答案/代码现在可用于其他过滤器输入@本·麦金太尔