首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >带有jQuery tableSorter插件的过滤项的选择器

带有jQuery tableSorter插件的过滤项的选择器
EN

Stack Overflow用户
提问于 2014-09-24 15:36:16
回答 1查看 429关注 0票数 0

这件事最近出现在我的脑海里,老实说,我认为这值得一问。事情是这样的..。

我有一个表,就像任何其他带有jquery tablesorter插件和过滤器小部件的普通表一样。在表列的右边,我放置了一个复选框,在列的上方,在那个列的表标题上,我有另一个复选框,它有一个函数链接到它,所以当它被点击时,所有的复选框都用这个复选框的值进行更新。这不是很花哨或复杂,我有两种方法来完成这件事。要么使用jquery选择器,要么使用普通的旧javascript。

所以我想做的是..。我想要过滤表格中的元素,然后点击标题上的复选框,并且我想要影响用插件过滤的行的复选框。

有人想说点什么吗?谢谢。

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2014-09-24 20:27:23

我已经为那个这里设置了一个演示程序

代码语言:javascript
运行
AI代码解释
复制
$( function() {
    // using .on() which requires jQuery 1.7+
    $( 'table' ).on( 'tablesorter-initialized', function() {

        // class name to add on tr when checkbox is checked
        var highlightClass = 'checked',
        // resort the table after the checkbox is modified?
        resort = true,
        // if a server side database needs to be updated, do it here
        serverCallback = function( table, inputElement ) {},

        $table = $( this ),
        c = this.config,
        wo = c && c.widgetOptions,
        // include sticky header checkbox; if installed
        $sticky = c && wo.$sticky || '',
        doChecky = function( c, col ) {
            $table
                .children( 'tbody' )
                .children( 'tr:visible' )
                .children( 'td:nth-child( ' + ( parseInt( col, 10 ) + 1 ) + ' )' )
                .find( 'input[type=checkbox]' )
                .each( function() {
                    this.checked = c;
                    $( this ).trigger( 'change' );
                });
        };

        $table
            .children( 'tbody' )
            .on( 'change', 'input[type=checkbox]', function() {
                // ignore change if updating all rows
                if ( $table[0].ignoreChange ) { return; }
                var col, $this = $( this );
                $this.closest( 'tr' ).toggleClass( highlightClass, this.checked );
                $this.trigger( 'updateCell', [ $this.closest( 'td' ), resort ] );
                // if your server side database needs more parameters, add them here sent to the callback
                serverCallback( $table[0], this );
                // uncheck header if any checkboxes are unchecked
                if ( !this.checked ) {
                    $table.add( $sticky ).find( 'thead input[type=checkbox]' ).prop( 'checked', false );
                }
            })
            .end()
            .add( $sticky )
            .find( 'thead input[type=checkbox]' )
            // Click on checkbox in table header to toggle all inputs
            .on( 'change', function() {
                // prevent updateCell for every cell
                $table[0].ignoreChange = true;
                var c = this.checked,
                    col = $( this ).closest( 'th' ).attr( 'data-column' );
                doChecky( c, col );
                // update main & sticky header
                $table.add( $sticky ).find( 'th[data-column=' + col + '] input[type=checkbox]' ).prop( 'checked', c );
                $table.children( 'tbody' ).children( 'tr:visible' ).toggleClass( highlightClass, c );
                // update all at once
                $table[0].ignoreChange = false;
                $table.trigger( 'update', [ resort ] );
            })
            .on( 'mouseup', function() {
                return false;
            });

    });

    $('table').tablesorter({
        theme: 'blue',
        widgets: ['zebra', 'stickyHeaders','filter'],
        headers: {
            0: { sorter: 'checkbox' }
        }
    });
});

只需确保包含文件

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/26028209

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档