(Mottie) Tablesorter 的数据属性 filter_selectSource

Question

我有一个动态 table，它可以包含一个 status 列，该列可以包含预定义的状态列表，例如：

0: closed
1: Open
2: Pending
3: ...

状态标签显示在 table 中，但 id 数字用于实际过滤。我已成功应用 tablesorter filter-select 来显示 select 过滤器，但它要么显示标签（不会过滤），要么显示标签 id（不漂亮）。

我可以在 javascript 中使用 filter_selectSource 来解决这个问题，但是由于我的 table 是动态的并且使用 Handlebar 显示，所以我使用数据属性寻找 html 解决方案。

是否有数据属性可用于设置过滤器 select label/value，类似于 data-text 可用于定义未解析文本的方式？或者有没有办法为过滤器定义一个自定义解析器，例如 return 一个 label/value 组合作为一个数组？

Answer 1

filter_selectSource documentation has an example where this widget option calls the filter.getOptions 其中 return 是单元格文本或已解析值的数组（基于过滤器解析器设置）；如果那不是 return 您想要的值，请自己获取值并 return 该函数中的数组。

这是一个基本的使用示例：http://jsfiddle.net/Mottie/856bzzeL/117/ (related to )

$(function(){
    $('table').tablesorter({
        theme: 'blue',
        widgets: ['zebra', 'filter'],
        widgetOptions: {
            filter_functions: {
                0: {
                    '{empty}' : function (e, n, f, i, $r, c) {
                        return $.trim(e) === '';
                    }
                }
            },
            filter_selectSource: {
                0: function (table, column, onlyAvail) {
                    // get an array of all table cell contents for a table column
                    var array = $.tablesorter.filter.getOptions(table, column, onlyAvail);
                    // manipulate the array as desired, then return it
                    array.push('{empty}');
                    return array;
                }
            }
        }
    });

});

Answer 2

基于 Mottie 回复和 tablesorter.filter.getOptions 来源，我想到了这个。将 filter-metaselect class 添加到我的列 th 使单元格 td 中的 data-value 属性可以用作 select 选项. parsed/unparsed 文本仍然可以使用。请注意，getOptions 的子部分已被省略，因为我目前没有使用该功能。

Table 单元格：

<td data-value="1">
  Projet actif
</td>

Select 选项：

<option value="1" parsed="projet actif" data-function-name="1">Projet actif</option>

Javascript:

filter_selectSource: {
    ".filter-metaselect": function (table, column, onlyAvail) {
        table = $( table )[0];
        var rowIndex, tbodyIndex, len, row, cache, indx, child, childLen, colData,
            c = table.config,
            wo = c.widgetOptions,
            arry = [];
        for ( tbodyIndex = 0; tbodyIndex < c.$tbodies.length; tbodyIndex++ ) {
            cache = c.cache[tbodyIndex];
            len = c.cache[tbodyIndex].normalized.length;
            // loop through the rows
            for ( rowIndex = 0; rowIndex < len; rowIndex++ ) {
                // get cached row from cache.row ( old ) or row data object
                // ( new; last item in normalized array )
                row = cache.row ?
                    cache.row[ rowIndex ] :
                    cache.normalized[ rowIndex ][ c.columns ].$row[0];
                // check if has class filtered
                if ( onlyAvail && row.className.match( wo.filter_filteredRow ) ) {
                    continue;
                }

                // Get the column data attributes
                if (row.getElementsByTagName('td')[column].getAttribute('data-value')) {
                    colData = row.getElementsByTagName('td')[column].getAttribute('data-value');
                } else {
                    colData = false;
                }

                // get non-normalized cell content
                if ( wo.filter_useParsedData ||
                    c.parsers[column].parsed ||
                    c.$headerIndexed[column].hasClass( 'filter-parsed' ) ) {

                    arry[ arry.length ] = {
                        value : (colData) ? colData : cache.normalized[ rowIndex ][ column ],
                        text : cache.normalized[ rowIndex ][ column ]
                    };

                    // child row parsed data
                    /* TODO */
                } else {

                    arry[ arry.length ] = {
                        value : (colData) ? colData : cache.normalized[ rowIndex ][ c.columns ].raw[ column ],
                        text : cache.normalized[ rowIndex ][ c.columns ].raw[ column ]
                    };

                    // child row unparsed data
                    /* TODO */
                }
            }
        }

        // Remove duplicates in `arry` since using an array of objects
        // won't do it automatically
        var arr = {};

        for ( var i=0, len=arry.length; i < len; i++ )
            arr[arry[i]['text']] = arry[i];

        arry = new Array();
        for ( var key in arr )
            arry.push(arr[key]);

        return arry;
    }
}

(Mottie) Tablesorter 的数据属性 filter_selectSource

Data attribute for (Mottie) Tablesorter filter_selectSource

tablesorter