4

テーブルソーターはほぼ思いどおりに動作していますが、もう 1 つ方法がわからないことがあります。

現在、列を検索できるテーブルがあり、列の検索フィールドに値を入力するボタンを押すと、テーブルをすばやくフィルター処理できます。

問題は、この入力に基づいてテーブルがフィルタリングされるように、複数のチェックボックスをチェックできるようにしたいということです。これらのチェックボックスは「グループ化」されており、各グループは対応する列でフィルタリングする必要があります (たとえば、別の月をチェックすると、月の列がフィルタリングされます)。複数のグループで複数のチェックボックスをチェックできるようにする必要があります。たとえば、国列でフィルタリングする「オランダ、ベルギー」をチェックし、月列にフィルターを追加する「8 月」と「9 月」をチェックできます。私の例のウェブサイトをチェックして、私が何を意味するかを確認できます。

チェックボックスは、現在のボタンのように検索フィールドに値を入力するべきではありません。

最後に、すべての検索クエリをクリアしてテーブルをリセットするボタンを含めたいと思いますが (現在は既に行われています)、すべてのチェックボックスをオフにする必要もあります。

私はプログラマーではありませんが、いくつかの基本的な知識と多くの調査と試行錯誤を経て、テーブルソーターを実行することができました。チェックボックスを操作する方法があることを本当に願っています。

サンプル ページ: http://www.yellowtipi.nl/tablesortertest/index.html (これは、コードを明確にするためにスタイルを設定しないバージョンです。最終バージョンには 100 行以上あります)。

不明な点があればお知らせください！

4

1 に答える 1

2

必要なのは、1行をコメントアウトまたは削除することだけです - 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 に答える