1

我正在使用旧的 tablesorter 插件。

在我的表格中，我有一列可排序的组合框。
但是，当我更改它们的值时，我无法让组合框正确排序。

我有这样的东西（修改，摘录）：

function sortTable(columnId, sortOrder) {

    if (columnId && sortOrder) {
    // previous settings available

    var columnIndex = $("#" + columnId).index();

    // determine sort index
    var sortIndex = -1;
    if ("asc" == sortOrder) {
        sortIndex = 0;
    } else if ("desc" == sortOrder) {
        sortIndex = 1;
    }

    // sort table
    if (sortIndex > -1) {
        $('#table1').tablesorter({
            textExtraction: function(node) {
                // special processing for combobox
                if ($(node).find('option:selected').text() != "") {
                    var selected = $(node).find('option:selected').text();
                    return selected;
                } else {
                    return $(node).text();
                }
            },
            sortList: [[columnIndex, sortIndex]]
        });
    }
}  else {
    // no previous settings available

    $('#table1').tablesorter({
        textExtraction: function(node) {
            // special processing for combobox
            if ($(node).find('option:selected').text() != "") {
                var selected = $(node).find('option:selected').text();
                return selected;
            } else {
                return $(node).text();
            }
        }
    });
}

当我单击表头时调用此函数。

$("#table1 th").click(function() {
    var sortInfo = determineColumnIdToSort();
    var sortOrder = determineNewSortOrder();
    removeTablesorter(); // removes binds to the tableSorter
    sortAssignMeasuresTable(columnId, sortOrder);
});

我的问题是：
如果我有不同值的组合框，当我单击标题时它们会正确排序。但是，如果我更改，为组合框选择另一个值，排序将无法正常工作。组合框将保持在相同的位置，即使它应该被排序。

4

1 回答 1

1

tablesorter 的原始版本有一个方法 to updateCell，但在这种情况下，它没有正确索引要更新的单元格，因此您需要触发一个完整的update，这在大表中效率不高。希望您至少使用 jQuery 1.7+，如果您使用此代码（演示）：

// Custom parser which returns the currently selected options
// updated dynamically using the "change" function below
$.tablesorter.addParser({
    id: "select",
    is: function () {
        return false;
    },
    format: function (s, table, cell) {
        return $(cell).find('select').val() || s;
    },
    type: "text"
});

// update select in the tablesorter cache when the change event fires.
// This method only works with jQuery 1.7+
// you can change it to use delegate (v1.4.3+) or live (v1.3+) as desired
// if this code interferes somehow, target the specific table $('#mytable'),
// instead of $('table')
$(window).load(function () {
    // this flag prevents the update event from being spammed
    var alreadyUpdating = false;
    $('table').find('tbody').on('change', 'select', function (e) {
        if (!alreadyUpdating) {
            alreadyUpdating = true;
            $(this).trigger('update');
            setTimeout(function () {
                alreadyUpdating = false;
            }, 10);
        }
    });
});

$('table').tablesorter({
    headers: {
        1: {
            sorter: 'select'
        }
    }
});

如果您有兴趣，我已经分叉了原始的表格排序器并添加了解析器来更新选择、输入和复选框。您可以在此分组行小部件演示中看到这些解析器的运行情况。

于 2013-05-10T22:12:46.903 回答