如何对具有输入元素的列进行排序？

Question

我有一张这样的桌子：

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

更新列包含复选框<input type='checkbox' />。

复选框的初始状态在呈现表格之前确定，但在从数据库中获取行之后（它基于一组条件，在服务器端）。

复选框可以默认选中、默认不选中或禁用（disabled='disabled' 为input 属性）。

我正在使用jQuery's Tablesorter 对我的表格进行排序。而且我希望能够按包含复选框的列进行排序。这怎么可能（如果有帮助的话，我可以将一些额外的属性传递给我的input 元素……）？

我应该编写自己的解析器来处理它吗？

Answer 1

您可以向 TableSorter 添加自定义解析器，如下所示：

 $.tablesorter.addParser({ 
    // set a unique id 
    id: 'input', 
    is: function(s) { 
        // return false so this parser is not auto detected 
        return false; 
    }, 
    format: function(s) { 
        // Here we write custom function for processing our custum column type 
        return $("input",$(s)).val() ? 1 : 0; 
    }, 
    // set type, either numeric or text 
    type: 'numeric' 
}); 

然后在你的表中使用它

$("table").tablesorter(headers:{0:{sorter:input}});

Answer 2

最后一触即可使 Aaron 的答案完整并避免堆栈溢出错误。因此，除了如上所述使用 $.tablesorter.parser() 功能外，我还必须在我的页面中添加以下内容，以使其在运行时使用更新的复选框值。

    var checkboxChanged = false;

    $('input[type="checkbox"]').change(function(){
        checkboxChanged = true;
    });

    // sorterOptions is a variables that uses the parser and disables
    // sorting when needed
    $('#myTable').tablesorter(sorterOptions);
    // assign the sortStart event
    $('#myTable')..bind("sortStart",function() {
        if (checkboxChanged) {
            checkboxChanged = false;
            // force an update event for the table
            // so the sorter works with the updated check box values
            $('#myTable')..trigger('update');
        }
    });

Answer 3

我在其他答案中尝试了多种方法，但最终使用了 salgiza 接受的答案，以及 martin 关于更新表模型的评论。但是，当我第一次实现它时，我在复选框 onchange 触发器中设置了更新行，就像建议的措辞一样。这重新排列了我选中/取消选中复选框的行，我发现这很混乱。线条只是在点击时跳开。因此，我将更新功能绑定到实际的复选框列标题，以便仅在单击以更新排序时重新排列行。它就像我想要的那样工作：

// checkbox-sorter is the assigned id of the th element of the checbox column
$("#checkbox-sorter").click(function(){ 
    $(this).parents("table").trigger("update");
});

Answer 4

    <td align="center">
    <p class="checkBoxSorting">YOUR DATA BASE VALUE</p>
    <input type="checkbox" value="YOUR DATA BASE VALUE"/>
    </td>

//javascript
$(document).ready(function() {
$(".checkBoxSorting").hide();
});

Answer 5

这是 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 6

您可以使用 tablesorter jQuery 插件并添加一个能够对所有复选框列进行排序的自定义解析器：

$.tablesorter.addParser({
        id: 'checkbox',
        is: function (s, table, cell) {
            return $(cell).find('input[type=checkbox]').length > 0;
        },
        format: function (s, table, cell) {
            return $(cell).find('input:checked').length > 0 ? 0 : 1;
        },
        type: "numeric"
    });

Answer 7

我添加此响应是因为我正在使用具有新功能的受支持/分叉的 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' }
}

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

Answer 8

在输入之前添加一个隐藏跨度，并在其中包含一些文本（将用于对列进行排序）。比如：

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

})

注意：我没有检查代码，所以它可能有错误。