Question

我正在显示一个包含多行和多列的表格。我正在使用名为 uiTableFilter 的JQUERY插件，该插件使用文本字段输入并根据您提供的输入过滤（显示/隐藏）表行。您所要做的就是指定要筛选的列，它将仅显示在该列中输入文本字段的行。简单而且工作正常。

我想添加一个SECOND文本输入字段，这将帮助我进一步缩小结果范围。所以，例如，如果我有一个PETS表，一列是petType，一个是petColor - 我可以在第一个文本字段中键入CAT，显示所有猫，然后在第二个文本字段中，我可以键入黑色，并且结果表将仅显示找到BLACK CATS的行。基本上是一个子集。

这是我正在使用的JQUERY：

   $("#typeFilter").live('keyup', function() {

    if ($(this).val().length > 2 || $(this).val().length == 0)
  {
                var newTable = $('#pets');
  $.uiTableFilter( theTable, this.value, "petType" );
  } 

   }) // end typefilter

   $("#colorFilter").live('keyup', function() {
    if ($(this).val().length > 2 || $(this).val().length == 0)
  {
  var newTable = $('#pets');
  $.uiTableFilter( newTable, this.value, "petColor" );

  } 

   }) // end colorfilter

问题是，我可以使用一个过滤器，它将显示正确的表行子集，但是当我为另一个过滤器提供输入时，它似乎无法识别前一个剩余的可见表行列，但它似乎它对原始表进行了全新的过滤。如果在应用一个过滤器后返回10行，则第二个过滤器应仅适用于这10行。我尝试过LIVE and BIND，但没有工作。

任何人都可以了解我出错的地方吗？谢谢！

Answer 1

uiTableFilter插件不支持您要执行的操作。快速浏览一下这个来源：

elems.each(function(){
    var elem = jQuery(this);
    jQuery.uiTableFilter.has_words(getText(elem), words, false)
        ? matches(elem)
        : noMatch(elem);
});

并且扩展到（基本上）这个：

elems.each(function(){
    var elem = jQuery(this);
    jQuery.uiTableFilter.has_words(getText(elem), words, false)
        ? elem.show()
        : elem.hide();
});

所以它所做的只是遍历所有行，.show()匹配的行，.hide()那些不匹配的行; uiTableSorter不关注行的当前显示/隐藏状态，也无法告诉它在多列上进行过滤。

如果您确实需要所需的功能，那么您可以修改插件的行为（代码非常小而且简单）或者只编写自己的行为。这是一个简化的版本，支持多个过滤器，是比uiTableFilter更常规的jQuery插件：

(function($) {
    $.fn.multiFilter = function(filters) {
        var $table = $(this);
        return $table.find('tbody > tr').each(function() {
            var tr = $(this);

            // Make it an array to avoid special cases later.
            if(!$.isArray(filters))
                filters = [ filters ];

            howMany = 0;
            for(i = 0, f = filters[0]; i < filters.length; f = filters[++i]) {
                var index = 0;
                $table.find('thead > tr > th').each(function(i) {
                    if($(this).text() == f.column) {
                        index = i;
                        return false;
                    }
                });
                var text = tr.find('td:eq(' + index + ')').text();
                if(text.toLowerCase().indexOf(f.word.toLowerCase()) != -1)
                    ++howMany;
            }
            if(howMany == filters.length)
                tr.show();
            else
                tr.hide();
        });
    };
})(jQuery);

我会将错误处理和性能作为练习留给读者，这只是一个说明性的例子，我不想妨碍你的学习。你可以把它连接起来：

$('#type').keyup(function() {
    $('#leeLooDallas').multiFilter({ column: 'petType', word: this.value });
});
$('#color').keyup(function() {
    $('#leeLooDallas').multiFilter([
        { column: 'petType',  word: $('#type').val() },
        { column: 'petColor', word: this.value       }
    ]);
});

这是一个实例（假设您要在“颜色”之前输入“type”中的内容）：http://jsfiddle.net/ambiguous/hdFDt/1/

如何使用JQUERY使用多个表单输入动态过滤表行

1 个答案: