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

Question

我有一个像这样的表：

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

其中“更新”列包含复选框 。

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

该复选框可以默认选中、默认不选中或禁用（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

这是哈特答案的更完整/正确版本。

$(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 -分组.html
它是通过包含输入/选择解析器库“parser-input-select.js”、添加标题对象并声明列和解析类型来完成的。

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

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

Answer 4

您可以使用 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 5

我尝试了其他答案中的多种方法，但最终使用了 salgiza 接受的答案，以及马丁关于更新表模型的评论。然而，当我第一次实现它时，我在复选框 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 6

您可以向 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 7

    <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 8

只需最后一步即可使 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');
        }
    });