jQuery表分类器不适用于AJAX提取的值

Question

我在我的项目中实现了jQuery tablesorter.

我的表由输入文本字段组成,其中一些由ajax填充.表排序适用于用户输入的输入字段,但使用ajax从数据库填充的输入字段未正确排序.

我的代码:

jQuery(function () {
    jQuery('#tablesorter-demo').tablesorter({
        widgets: ['zebra', 'stickyHeaders'],
        headers: {
            2: {
                sorter: 'inputs'
            },
            3: {
                sorter: 'inputs'
            },
            5: {
                sorter: 'inputs'
            }
        }
    });
});

jQuery.tablesorter.addParser({
    id: 'inputs',
    is: function (s) {
        return false;
    },
    format: function (s, table, cell, cellIndex) {
        var jQueryc = jQuery(cell);

        // return 1 for true, 2 for false, so true sorts before false
        if (!jQueryc.hasClass('updateInput')) {
            jQueryc
                .addClass('updateInput')
                .bind('keyup', function () {
                    console.log(table);
                    jQuery(table).trigger('updateCell', [cell, false]); // false to prevent resort
                });
        }
        return jQueryc.find('input[type="text"]').val();
    },
    type: 'text'
});

我的AJAX功能:

jQuery('.bulkupload').keyup(function () {
    check = 1;
    jQuery("#" + jQuery(this).attr("id")).css("color", "#928F8F");
    var part_no1 = jQuery("#" + jQuery(this).attr("id")).val();
    var fieldcount = part_no1.toString().length;
    var thenum = jQuery(this).attr("id").replace(/^\D+/g, '');

    if (jQuery('#qty' + thenum).val() == '') {
        jQuery('#qty' + thenum).val('Enter Quantity');
        jQuery('#qty' + thenum).css("color", "#DF1F26");
    }

    var url1 = "<?php echo Mage::getBaseUrl(); ?>availableorders/index/getdetails";
    jQuery.ajax({
        type: "POST",
        url: url1,
        data: {
            part_no1: part_no1
        },
        success: function (response) {
            if (response == "check") {
                jQuery('#item_name' + thenum).val("Not Found");
                jQuery('#item_desc' + thenum).val("Not Found");
                jQuery('#av_qty' + thenum).css("color", "#DF1F26");
                jQuery('#item_name' + thenum).css("color", "#DF1F26");
                jQuery('#item_desc' + thenum).css("color", "#DF1F26");
                jQuery('#brand_name' + thenum).css("color", "#DF1F26");
            } 
            else {
                var result1 = jQuery.parseJSON(response);

                jQuery('#item_name' + thenum).val(result1.prodname1);
                jQuery('#item_desc' + thenum).val(result1.productdescription1);
                jQuery('#brand_name' + thenum).val(result1.brand);
                jQuery('#av_qty' + thenum).css("color", "#DF1F26");
                jQuery('#item_name' + thenum).css("color", "#DF1F26");
                jQuery('#item_desc' + thenum).css("color", "#DF1F26");
                jQuery('#brand_name' + thenum).css("color", "#DF1F26");
                if (jQuery('#av_qty' + thenum).val(result1.stock) == 0) {
                    jQuery('#av_qty' + thenum).val("Not in Stock");
                } else {
                    jQuery('#av_qty' + thenum).val(result1.stock);
                }

                jQuery("#tablesorter-demo").trigger('updateCell');
            }
        }
    });
});

Answer 1

从您正在使用的选项和小部件来看，您实际上正在使用我的tablesorter 分支而不是原始插件。

无论如何，您为输入解析器创建的小部件已绑定到单元格

jQuery(cell).bind('keyup', function () { ... }

但是当对表进行排序时，单元格将从 tbody 中删除，从而导致任何事件绑定中断。解决这个问题的方法是在 tbody 上使用委托事件绑定（但在小部件功能之外format完成，因为它只需要完成一次）。

jQuery('table tbody').on('keyup', 'input', function(e) {
    var $input = $(e.target);
    ...
}

此外，当您通过 ajax 调用更新大量输入时，最好一次更新所有输入 ( .trigger('update'))，否则您会updateCell过多地使用该方法，并可能导致整个过程花费比必要时间更长的时间。

该演示使用非常相似的方法来更新表中的复选框，因此将其转换为使其能够处理输入值应该相当简单 - 如果您遇到问题，请在此处发布，我会提供帮助。

// checkbox parser
$.tablesorter.addParser( {
    id: 'checkbox',
    is: function( s ) {
        return false;
    },
    format: function( s, table, cell ) {
        var $c = $( cell ).find( 'input' );
        return $c.length ? $c.is( ':checked' ) ? 1 : 2 : s;
    },
    type: 'numeric'
});

$( 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' )
                .each( function() {
                    this.checked = c;
                    $( this ).trigger( 'change' );
                });
        };

        $table
            .children( 'tbody' )
            .on( 'change', 'input', 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' ).prop( 'checked', false );
                }
            })
            .end()
            .add( $sticky )
            .find( 'thead input' )
            // 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' ).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;
            });

    });
});

我还应该注意，当您的 ajax 调用完成并且更改已应用时，即应该触发“update”方法，而不是“updateCell”。

最后，有一个现有的方法input-select parser，但它不包括防止大量updateCell方法调用和一次更新表的方法。