Question

我正在使用这个脚本：

(function(document) {
    'use strict';

    var LightTableFilter = (function(Arr) {

        var _input;

        function _onInputEvent(e) {
            _input = e.target;
            var tables = document.getElementsByClassName(_input.getAttribute('data-table'));
            Arr.forEach.call(tables, function(table) {
                Arr.forEach.call(table.tBodies, function(tbody) {
                    Arr.forEach.call(tbody.rows, _filter);
                });
            });
        }

        function _filter(row) {
            var text = row.textContent.toLowerCase(), val = _input.value.toLowerCase();
            row.style.display = text.indexOf(val) === -1 ? 'none' : 'table-row';
        }

        return {
            init: function() {
                var inputs = document.getElementsByClassName('light-table-filter');
                Arr.forEach.call(inputs, function(input) {
                    input.oninput = _onInputEvent;
                });
            }
        };
    })(Array.prototype);

    document.addEventListener('readystatechange', function() {
        if (document.readyState === 'complete') {
            LightTableFilter.init();
        }
    });

})(document);

和这个输入：

<input type="search" class="light-table-filter" data-table="order-table">

当我在过滤器输入中输入内容时，它会过滤一个表，因此我只看到与该文本匹配的条目。像这样：http://codepen.io/chriscoyier/pen/tIuBL 如何编辑此脚本，使其不会按整个表进行筛选，而只是按某些选定的列进行筛选？也许前三列是我需要过滤的。

Answer 1

我会添加数据属性来配置哪些列是可搜索的。例如，HTML可能是这样的：

<input type="search" class="light-table-filter" 
       data-table="order-table" 
       data-table-columns="0,2" placeholder="Filter">

在上面的配置索引中，0和2告诉＆＃34; Name＆＃34;和＆＃34;电话＆＃34;列是可过滤的。

然后在JS部分你可以做这样的事情（只修改过的函数）：

function _onInputEvent(e) {
    _input = e.target;
    var tables = document.getElementsByClassName(_input.getAttribute('data-table'));
    var columns = (_input.getAttribute('data-table-columns') || '').split(',');
    Arr.forEach.call(tables, function (table) {
        Arr.forEach.call(table.tBodies, function (tbody) {
            Arr.forEach.call(tbody.rows, function (row) {
                _filter(row, columns);
            });
        });
    });
}

function _filter(row, columns) {
    var text, val = _input.value.toLowerCase();
    if (columns.length) {
        columns.forEach(function (index) {
            text += ' ' + row.cells[index].textContent.toLowerCase();
        });
    } else {
        text = row.textContent.toLowerCase();
    }
    row.style.display = text.indexOf(val) === -1 ? 'none' : 'table-row';
}

演示： http://codepen.io/anon/pen/zxVagm

Answer 2

我建议您添加一个包含要应用过滤器的列名的数组，并在_filter功能检查中是否在行名称或标题中包含要应用过滤器的列。

我不太了解JavaScript，代码如下所示，带有rigth字段名称：

var _input = ...;
var columnsToApplyFilter = ["column 1", "column 2"];

función _filter(...) {
    if (columnsToApplyFilter.contains(row.columnTitle) {
        // apply filter
    }
}

Answer 3

您可以重写_onInputEvent并使用Array.slice对行数进行切片。

添加确定要切片的行的数据属性似乎是个好主意

<input type="search" data-count="[0,3]" class="light-table-filter" data-table="order-table" data-count="[0,3]" placeholder="Filter">

其中，0是起始索引，在本例中是第一行，3是结束索引，不包含，因此[0,3]只会过滤第1行， 2和3（索引0,1和2）。

而且，消除了很多陌生感？

(function (document) {
    'use strict';

    var LightTableFilter = (function (Arr) {

        function _onInputEvent(e) {
            var selector = '.' + e.target.getAttribute('data-table') + ' tbody tr';
            var count    = JSON.parse(e.target.getAttribute('data-count'));
            var rows     = document.querySelectorAll(selector);

            Arr.slice.apply(rows, count).forEach(function (row) {
                _filter(row, e.target)
            });
        }

        function _filter(row, _input) {
            var text = row.textContent.toLowerCase(),
                val = _input.value.toLowerCase();
            row.style.display = text.indexOf(val) === -1 ? 'none' : 'table-row';
        }

        return {
            init: function () {
                var inputs = document.querySelectorAll('.light-table-filter');

                Arr.forEach.call(inputs, function (input) {
                    input.addEventListener('input', _onInputEvent, false);
                });
            }
        };
    })(Array.prototype);

    document.addEventListener('readystatechange', function () {
        if (document.readyState === 'complete') {
            LightTableFilter.init();
        }
    });

})(document);

如何编辑此表过滤器脚本以按选定列过滤？

3 个答案: