使用tablesorter插件对组合框进行排序

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中看到这些解析器在运行。