Question

我正在使用旧的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);
});

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

Answer 1

tablesorter的原始版本有updateCell的方法，但在这种情况下，它没有正确索引要更新的单元格，因此您需要触发一个完整的update，它不是'在大型餐桌上非常有效。希望你至少使用jQuery 1.7+，如果你使用这段代码（demo）：

// 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'
        }
    }
});

如果您有兴趣，我有forked the original tablesorter并添加解析器来更新选择，输入和放大器复选框。您可以在此grouping rows widget demo中查看这些解析器。

使用tablesorter插件使用combobox对表进行排序

1 个答案: