如何对具有输入元素的列进行排序？
我有一张这样的桌子：
| Update | Name | Code | modification date |
| | name1 | code1 | 2009-12-09 |
| | name2 | otehercode | 2007-09-30 | 其中更新列包含复选框<input type='checkbox' />。
checkbox初始状态是在呈现表之前、从数据库获取行之后确定的(它基于服务器端的一组条件)。
该复选框可以默认选中、默认取消选中或禁用(disabled='disabled' as input attribute)。
我正在使用jQuery's Tablesorter对我的表进行排序。我希望能够按包含复选框的列进行排序。这是怎么可能的(我可以将一些额外的属性传递给我的input元素，如果它有帮助的话……)？
我是否应该编写自己的解析器来处理它？
回答 8
Stack Overflow用户
发布于 2009-12-16 15:59:51
在输入之前添加一个隐藏的跨度，并在其中包含一些文本(将用于对列进行排序)。类似于：
<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);
})
})注意:我没有检查代码，所以它可能有错误。
Stack Overflow用户
发布于 2013-03-26 23:22:22
这是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");});
}); Stack Overflow用户
发布于 2013-09-10 04:06:34
我之所以添加此响应，是因为我正在使用一个支持/派生的具有新功能的jQuery TableSorter库。还包括一个可选的用于输入/选择字段的解析器库。
http://mottie.github.io/tablesorter/docs/
下面是一个示例：http://mottie.github.io/tablesorter/docs/example-widget-grouping.html，它通过包含输入/选择解析器库" parser -input-select.js“、添加一个headers对象、声明列和解析类型来完成。
headers: {
0: { sorter: 'checkbox' },
3: { sorter: 'select' },
6: { sorter: 'inputs' }
}其他解析器包括:日期解析(w/Sugar & DateJS)、日期、月份、2位年份、工作日、距离(英尺/英寸&公制)和标题格式(去掉"A“和”ISO8601“)。
https://stackoverflow.com/questions/1912957
复制相似问题
腾讯云开发者
