我正在 angularjs 中设计一个表格，其中包含每列的多文本过滤选项，就像在 excel 中一样

I am designing a table in angularjs with multi text filtering option for each column like in excel

本文关键字：文本过滤 一样 选项 excel 表格 angularjs 一个 包含每      更新时间：2023-09-26

我正在用AngularJS设计一个有很多行和列的表。我需要添加一个过滤器按钮！[过滤器按钮][1]对于每一列。单击过滤器按钮时，它应该会展开到类似 exce 的内容，它列出了列中的所有元素并选择要过滤的必要数据。有没有办法在AngularJS中做到这一点？任何想法将不胜感激。非常感谢！

让我们以这张表为例

A B C
2|4|1
3|2|2
 | |3
7| |4
 | |2
 | |3
 | |2

让我们在javascript中构建电子表格的内部结构。可以将列对象移动到 json 文件以读入以实现持久性。

var sheet = {
    columns = [
        [2, 3, null, 7], // A 
        [4, 2], // B
        [1, 2, 3, 4, 2, 3, 2] // C
    ],
    maxRowCount: function () {
        var max = 0;
        columns.forEach(function (item) {
            max = Math.max(max, item.length);
        });  
        return max;
    }
};
function filterHandler(filterOptions, colIndex) {
    // pass in an array of the values you want to show
    var rowsToShow = [];
    var i;
    for (i = 0; i < sheet.maxRowCount(); i++) {
        if (sheet.columns[colIndex] in filterOptions) {
            rowsToShow.push(i + 1); // for one based rows.
        }
    }
    return rowsToShow;
}

从这里你需要用 dom 做一些事情。 使用复选框列表之类的内容来标记要筛选的项目。 将其传递到 filterHandler 中。它将返回要显示的索引数组。隐藏所有其他内容。

若要筛选值 2 和 4 上的列 C，请执行以下操作

var showRows = filterHandler([2, 4], 2);
// showRows == [2, 4, 5, 7]

因此，隐藏所有不在showRows数组中的行。

相关文章：