1

我有在 Tablesorter 的帮助下过滤的表格。每列顶部都有一个搜索框。在其中一列中，我有一个基于选择的 JavaScript 的选项列表。我希望能够根据选项列表中选择的内容过滤此列。我尝试使用在围绕所选项目的跨度标记上触发的 textExtraction 函数，但我无法让它工作。欢迎任何建议。

我在这个JSFiddle中有一个设置

<body>
<table class="tablesorter">
    <thead>
        <tr>
            <th class="title" data-placeholder="">Title</th>
            <th class="tags" data-placeholder="">Tags</th>
            <th class="date" data-placeholder="">Date</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Fish</td>
            <td>
                <select data-placeholder="Choose Tags" class="chosen-select" multiple>
                    <option value=""></option>
                    <option value="Option1">Sweden</option>
                    <option value="Option2">Norway</option>
                    <option value="Option3">Finland</option>
                </select>
            </td>
            <td>2012-12-03</td>
        </tr>
        <tr>
            <td>Boat</td>
            <td>
                <select data-placeholder="Choose Tags" class="chosen-select" multiple>
                    <option value=""></option>
                    <option value="Option1">Sweden</option>
                    <option value="Option2">Norway</option>
                    <option value="Option3">Finland</option>
                </select>
            </td>
            <td>2012-12-15</td>
        </tr>
    </tbody>
</table>


$(document).ready(function () {

$("table").tablesorter({
    theme: 'blue',
    textExtraction: {
        1: function (node, table, cellIndex) {
            return $(node).find("span").text();
        }
    },
    widthFixed: true,
    widgets: ["zebra", "filter"],
    widgetOptions: {
        filter_childRows: false,
        filter_columnFilters: true,
        filter_cssFilter: 'tablesorter-filter',
        filter_functions: null,
        filter_hideFilters: false,
        filter_ignoreCase: true,
        filter_reset: 'button.reset',
        filter_searchDelay: 300,
        filter_startsWith: false,
        filter_useParsedData: false

    }

});
});
4

1 回答 1

1

好吧，只是缺少一些东西才能使其全部正常工作。

首先，这是一个更新的演示。

首先，选项的值应该与文本匹配，或者您可以修改解析器以查找选定的选项并获取它们的文本。

<select data-placeholder="Choose Tags" class="chosen-select" multiple>
    <option value=""></option>
    <option value="Sweden">Sweden</option>
    <option value="Norway">Norway</option>
    <option value="Finland">Finland</option>
</select>

接下来，包含一个解析器以获取选定的选项并更新表缓存：

$.tablesorter.addParser({
    id: "select",
    is: function () {
        return false;
    },
    format: function (s, table, cell) {
        // since the select can get multiple results in an array,
        // we combine all the values using join(',')
        return ($(cell).find('select').val() || []).join(',') || s;
    },
    type: "text"
});

// this flag prevents the updateCell event from being spammed
// it happens when you modify input text and hit enter
var alreadyUpdating = false;
$('table').find('tbody').on('change', 'select', function (e) {
    if (!alreadyUpdating) {
        var $tar = $(e.target),
            $table = $tar.closest('table');
        alreadyUpdating = true;
        $table.trigger('updateCell', [$tar.closest('td')]);
        setTimeout(function () {
            alreadyUpdating = false;
        }, 10);
    }
});

现在，确保设置了 header 选项（或将“sorter-select”类添加到th）：

$("table").tablesorter({
    theme: 'blue',
    headers: {
        1: {
            sorter: 'select'
        }
    },
    // ....
 });

最后，设置标题类名只查找该列的解析数据（filter-parsed）；添加了data-value以显示也可以设置初始过滤器。这也是sorter-select可以添加类名而不是添加headers选项的地方。

<th class="tags filter-parsed" data-value="sweden" data-placeholder="">Tags</th>

一切都完成了！

于 2013-10-18T06:05:56.923 回答