Jquery Tablesorter - 按<input>元素的列排序

Question

我有这样一张桌子:

|   Update   |   Name  |  Code      | modification date |
|            |   name1 | code1      | 2009-12-09        |
|            |   name2 | otehercode | 2007-09-30        | 

"更新"列包含复选框的位置<input type='checkbox' />.

复选框初始状态在呈现表之前确定,但是在从数据库中获取行之后(它基于条件集,在服务器端).

默认情况下,可以选中此复选框,默认情况下取消选中或禁用(disabled='disabled'作为input属性).

我正在使用JQuery的Tablesorter对表格进行排序.我希望能够按包含复选框的列进行排序.怎么可能(我可以将一些额外的属性传递给我的input元素,如果它有帮助......)？
我应该编写自己的解析器来处理吗？

Answer 1

在输入之前添加隐藏的跨度,并在其中包含一些文本(将用于对列进行排序).就像是:

<td>
    <span class="hidden">1</span>
    <input type="checkbox" name="x" value="y">
</td>

如果需要,您可以将一个事件附加到复选框,以便在选中/取消选中时修改前一个兄弟(跨度)的内容:

$(document).ready(function() {

    $('#tableid input').click(function() {
         var order = this.checked ? '1' : '0';
         $(this).prev().html(order);
    })

})

注意:我没有检查代码,因此可能有错误.

Answer 2

这是Haart答案的更完整/正确的版本.

$(document).ready(function() {
    $.tablesorter.addParser({ 
        id: "input", 
        is: function(s) { 
            return false; 
        }, 
        format: function(s, t, node) {
            return $(node).children("input[type=checkbox]").is(':checked') ? 1 : 0;
        }, 
        type: "numeric" 
    });

    sorter = $("#table").tablesorter({"headers":{"0":{"sorter":"input"}}});
// The next makes it respond to changes in checkbox values 
    sorter.bind("sortStart", function(sorter){$("#table").trigger("update");});

}); 

Answer 3

我添加此响应是因为我正在使用具有新功能的受支持/分叉的 jQuery TableSorter 库。包含用于输入/选择字段的可选解析器库。

http://mottie.github.io/tablesorter/docs/

这是一个例子：http : //mottie.github.io/tablesorter/docs/example-widget-grouping.html ，它是通过包含输入/选择解析器库“parser-input-select.js”来完成的，添加一个标题对象并声明列和解析类型。

headers: {
  0: { sorter: 'checkbox' },
  3: { sorter: 'select' },
  6: { sorter: 'inputs' }
}

其他解析器包括：日期解析（带糖和 DateJS）、ISO8601 日期、月份、2 位数年份、工作日、距离（英尺/英寸和公制）和标题格式（删除“A”和“The”）。