4

我的桌面分拣机几乎按照我想要的方式运行，还有一件事我不知道该怎么做。

现在，我有一个表格，您可以在其中搜索列，您可以通过按下一个按钮来快速过滤表格，该按钮在列的搜索字段中放置一个值。

问题是我希望人们能够检查多个复选框，以便根据此输入过滤表格。这些复选框是“分组的”，每个组都应该在其相应的列上进行过滤（例如，检查不同的月份应该过滤月份列）。应该可以检查多个组中的多个复选框。例如，您可以检查在国家列中过滤的“荷兰”、“比利时”，并检查在月份列中添加过滤器的“八月”和“九月”。您可以查看我的示例网站以了解我的意思。

复选框不应像现在的按钮那样在搜索字段中输入它们的值。

最后，我想包括一个清除所有搜索查询并因此重置表的按钮（它现在已经这样做了），但它也应该取消选中所有复选框。

我不是程序员，但凭借一些基本知识、大量研究和反复试验，我设法让 tablesorter 运行起来。我真的希望有一种方法可以使用复选框。

示例页面：http ://www.yellowtipi.nl/tablesortertest/index.html（这是一个无样式版本以使代码清晰，最终版本将有 100+ 行）。

如果有任何不清楚的地方，请告诉我！

4

1 回答 1

2

您需要做的就是注释掉或删除一行 - filters.val('');：

这是代码和演示（我还为每个集合添加了清除按钮以允许清除过滤器列）

$('button.search').click(function() {
    var filters = $('table').find('input.tablesorter-filter'),
        col = $(this).data('filter-column'),
        txt = $(this).data('filter-text');
    // filters.val('');
    filters.eq(col).val(txt).trigger('search', false);
});

此外，此代码需要我的 tablesorter 分支才能工作。以下是可能感兴趣的其他人的代码：

HTML 示例：

<button class="search" data-filter-column="4" data-filter-text="Netherlands">Netherlands</button>
<button class="search" data-filter-column="4" data-filter-text="Belgium">Belgium</button>
<button class="search" data-filter-column="4" data-filter-text="Germany">Germany</button>
<button class="search" data-filter-column="4" data-filter-text="">Clear</button>

<table id="festivaloverzichttable" class="tablesorter">
  <thead>
    <tr>
      <th width="17%" data-placeholder="Search...">Event</th>
      <th width="18%" data-placeholder="Search...">Date</th>
      <th width="9%" data-placeholder="Search...">Duration</th>
      <th width="12%" data-placeholder="Search...">Place</th>
      <th width="10%" data-placeholder="Search...">Country</th>
      <th data-placeholder="Zoek...">Genre(s)</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Event 1</td>
      <td data-date="06-02">TBA</td>
      <td>2</td>
      <td>Oisterwijk</td>
      <td>Netherlands</td>
      <td>Hardstyle</td>
    </tr>
    <tr>
      <td>Event 2</td>
      <td data-date="10-11">11 October t/m 13 October</td>
      <td>3</td>
      <td>Volkel</td>
      <td>Netherlands</td>
      <td>Pop, Rock, Urban, Electronic</td>
    </tr>
    <tr>
      <td>Event 3</td>
      <td data-date="06-02">TBA</td>
      <td>1</td>
      <td>Amsterdam</td>
      <td>Netherlands</td>
      <td>Electronic</td>
    </tr>
    <tr>
      <td>Event 4</td>
      <td data-date="09-01">TBA</td>
      <td>1</td>
      <td>Utrecht</td>
      <td>Netherlands</td>
      <td>Electronic, Urban</td>
    </tr>
    <tr>
      <td>Event 5</td>
      <td data-date="07-06">6 July - 7 July</td>
      <td>2</td>
      <td>Beek en Donk</td>
      <td>Netherlands</td>
      <td>Electronic, Hardstyle</td>
    </tr>

    ...

  </tbody>
</table>​

Javascript（我删除了数据解析器代码和默认过滤器小部件选项以避免混淆）

$("#festivaloverzichttable").tablesorter({
    sortList: [[0, 0]],
    widgets: ['zebra', 'filter', 'saveSort'],
    widgetOptions: {
        filter_reset: 'button.reset'
    }
});

$('button.search').click(function() {
    var filters = $('table').find('input.tablesorter-filter'),
        col = $(this).data('filter-column'),
        txt = $(this).data('filter-text');
    filters.eq(col).val(txt).trigger('search', false);
});

更新：要允许多个选项，请将按钮搜索更改为以下（更新的演示）

$('button.search').click(function() {
    var filters = $('table').find('input.tablesorter-filter'),
        col = $(this).data('filter-column'),
        txt = $(this).data('filter-text'),
        cur = filters.eq(col).val(),
        mult, i;

    if (cur && txt !== '') {
        mult = cur.split('|');
        i = $.inArray(txt, mult);
        if (i < 0) {
            mult.push(txt);
        } else {
            mult.splice(i,1);
        }
        txt = mult.join('|');
    }        
    filters.eq(col).val(txt).trigger('search', false);
});
于 2012-11-22T14:26:34.720 回答