Question

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

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

状态标签显示在表格中，但id号码用于实际过滤。我成功应用了tablesorter filter-select来显示选择过滤器，但它显示标签（赢得过滤器）或id（不漂亮）。

我可以在javascript中使用filter_selectSource解决此问题，但由于我的表是动态的并使用 Handlebar 显示，因此我正在寻找使用数据属性的html解决方案。

是否有可用于设置过滤器选择标签/值的数据属性，类似于data-text如何用于定义未分析的文本？或者有没有办法为过滤器定义一个自定义解析器，例如将一个标签/值组合作为数组返回？

Answer 1

根据Mottie的回复和tablesorter.filter.getOptions来源，我提出了这个问题。将filter-metaselect类添加到我的列th可以将单元格data-value中的td属性用作选择选项。仍然可以使用解析/未解析的文本。请注意，getOptions的子部分已被省略，因为我目前没有使用功能。

表格单元格：

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

选择选项：

<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;
    }
}

Answer 2

filter_selectSource documentation有一个示例，其中此窗口小部件选项调用filter.getOptions，它返回单元格文本或已解析值的数组（基于过滤器解析器设置）;如果这不返回您想要的值，请自己获取值并在该函数中返回一个数组。

以下是如何使用它的基本示例：http://jsfiddle.net/Mottie/856bzzeL/117/（与Is there a way in tablesorter to filter to select only rows where the field is empty?相关）

$(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;
                }
            }
        }
    });

});

（Mottie）Tablesorter filter_selectSource的数据属性

2 个答案: