Question

看看这个例子：

http://mottie.github.io/tablesorter/docs/example-widget-filter-formatter-1.html

如何设置“从/到”过滤器（带有两个文本输入字段），就像在上一个“日期”列中一样，但是在仅数字列中，如上面那个例子中的“总列”？

在中，我不想要Total列中的滑块，我想要两个From / To字段。那可能吗？如何？我需要使用哪个插件/小部件以及哪些参数？

感谢。

Answer 1

您最终会编写自己的custom filter formatter来添加两个数字输入字段;它不是直截了当的，但jQuery UI datepicker (2 inputs) formatter中的大多数代码都可以被复制。根据您的需要进行了修改。

在将来的更新中，我计划用仅需要返回列的查询值的选项替换filter_formatter函数。此更改将使开发人员能够使用自定义UI构建自己的自定义过滤器行，而不受filter_formatter可用代码的限制。

好的，你去（demo）

/*! Widget: filter formatter functions - created 6/24/2015 *//*
 * requires: tableSorter (FORK) 2.15+ and jQuery 1.4.3+
 *
 * number range - 2 number inputs
 */
/*jshint browser:true, jquery:true, unused:false */
/*global jQuery: false */
;(function($){
"use strict";

var ts = $.tablesorter || {},

tsff = ts.filterFormatter = $.extend( {}, ts.filterFormatter, {

    /*************************\
    2 number inputs
    \*************************/
    inputs: function($cell, indx, defNumber) {
        var o = $.extend({
            // filter formatter options
            textFrom : 'from',
            textTo : 'to',
            from : 0, // "from" input
            to : 100, // "to" input
            callback: function($cell){}
        }, defNumber),
        closeNumber,
        $shcell = [],
        c = $cell.closest('table')[0].config,
        // Add a hidden input to hold the range values
        $input = $('<input class="numberRange" type="hidden">')
            .appendTo($cell)
            // hidden filter update namespace trigger by filter widget
            .bind('change' + c.namespace + 'filter', function(){
                var v = this.value;
                if (v.match(' - ')) {
                    v = v.split(' - ');
                    $cell.find('.numberTo').val(v[1]);
                    closeNumber(v[0]);
                } else if (v.match('>=')) {
                    closeNumber( v.replace('>=', '') );
                } else if (v.match('<=')) {
                    closeNumber( v.replace('<=', '') );
                }
            }),

        // make sure we're using parsed numbers in the search
        $hdr = c.$headerIndexed[ indx ].addClass('filter-parsed'),
        // Add range picker
        t = '<label>' + o.textFrom + '</label><input type="number" class="numberFrom" placeholder="' +
            ($hdr.data('placeholderFrom') || $hdr.attr('data-placeholder-from') || c.widgetOptions.filter_placeholder.from || '') + '" />' +
            '<label>' + o.textTo + '</label><input type="number" class="numberTo" placeholder="' +
            ($hdr.data('placeholderTo') || $hdr.attr('data-placeholder-to') || c.widgetOptions.filter_placeholder.to || '') + '" />';
        $(t).appendTo($cell);

        closeNumber = function( selectedNumber ) {
            var range,
                from = $cell.find('.numberFrom').val(),
                to = $cell.find('.numberTo').val();
            range = from ? ( to ? from + ' - ' + to : '>=' + from ) : (to ? '<=' + to : '');
            $cell.add( $shcell )
                .find('.numberRange').val(range)
                .trigger('search');

            if (/<=/.test(range)) {
                $cell.add( $shcell )
                    .find('.numberFrom').val( to || 0 ).end()
                    .find('.numberTo').val( to || 0 );
            } else if (/>=/.test(range)) {
                $cell.add( $shcell )
                    .find('.numberFrom').val( from || 0 ).end()
                    .find('.numberTo').val( from || 0 );
            } else {
                $cell.add( $shcell )
                    .find('.numberFrom').val( from || 0 ).end()
                    .find('.numberTo').val( to || 0 );
            }

            if (typeof o.callback === 'function') { o.callback($cell); }
        };

        $cell.add( $shcell )
            .find('.numberFrom')
            .val( o.from ).end()
            .find('.numberTo')
            .val( o.to ).end()
            .find('.numberFrom, .numberTo')
            .bind('change', function(){
                closeNumber();
            });

        // update date compare from hidden input, in case of saved filters
        c.$table.bind('filterFomatterUpdate', function(){
            var val = $input.val() || '',
                from = o.from,
                to = o.to;
            // date range
            if (/\s+-\s+/.test(val)){
                val = val.split(/\s+-\s+/) || [];
                from = val[0] || '';
                to = val[1] || '';
            } else if (/>=/.test(val)) {
                // greater than date (to date empty)
                from = val.replace(/>=/, '') || '';
            } else if (/<=/.test(val)) {
                // less than date (from date empty)
                to = val.replace(/<=/, '') || '';
            }

            $cell.add($shcell).find('.numberFrom').val( from || 0 );
            $cell.add($shcell).find('.numberTo').val( to || 0 );
            // give datepicker time to process
            setTimeout(function(){
                closeNumber();
                ts.filter.formatterUpdated($cell, indx);
            }, 0);
        });

        // has sticky headers?
        c.$table.bind('stickyHeadersInit', function(){
            $shcell = c.widgetOptions.$sticky.find('.tablesorter-filter-row').children().eq(indx).empty();
            $shcell.append(t);

            // add a jQuery datepicker!
            $shcell.find('.numberFrom').val( o.from );
            $shcell.find('.numberTo').val( o.to );

        });

        // on reset
        $cell.closest('table').bind('filterReset', function(){
            $cell.add($shcell).find('.numberFrom').val( o.from || 0 );
            $cell.add($shcell).find('.numberTo').val( o.to || 0 );
            setTimeout(function(){
                closeNumber();
            }, 0);
        });

        // return the hidden input so the filter widget has a reference to it
        return $input.val( o.from ? ( o.to ? o.from + ' - ' + o.to : '>=' + o.from ) : (o.to ? '<=' + o.to : '') );
    }

});

})(jQuery);

从/来过滤jQuery Tablesorter中的数字列？

1 个答案: