Question

我正在尝试使用JQuery tablesorter创建一个可排序的表，并且还可以使用select all / none复选框切换各个行复选框。 Tablesorter正在禁用切换。

在类似的帖子中，我读到“tablesorter正在破坏/重新创建原始的Dom元素” - 这表示我仍然不确定如何修复它。

我的代码是：

<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <link rel='stylesheet' href='css/simple.css' type='text/css'/>
    <script type='text/javascript' src='js/jquery.js'></script>
    <script type='text/javascript' src='js/tablesorter.js'></script>
    <script type='text/javascript'>
        function checkAll(checkname, exby) {
        for (i = 0; i < checkname.length; i++)
        checkname[i].checked = exby.checked? true:false
        }
    </script>
    <script type="text/javascript">$(document).ready(function() {$("#dataGrid").tablesorter({ widgets: ['zebra'] });});</script>
    <title>test</title>
  </head>

<body>
<form id='dataGridForm' name='mylist' action='test.php' method='post'>
<table id='dataGrid' class='tablesorter'>
<thead>
<tr>
<th><input type="checkbox" name="all" onClick="checkAll(document.getElementsByName('checkGroup[]'),this)"></th>
<th>col1</th>
<th>col2</th>
</tr>
</thead>
<tbody>
<tr><td><input type="checkbox" name="checkGroup[]" value="1"></td><td>1</td><td>4</td></tr>
<tr><td><input type="checkbox" name="checkGroup[]" value="2"></td><td>2</td><td>3</td></tr>
<tr><td><input type="checkbox" name="checkGroup[]" value="3"></td><td>3</td><td>2</td></tr>
<tr><td><input type="checkbox" name="checkGroup[]" value="4"></td><td>4</td><td>1</td></tr>
</tbody>
</table>
<div>
<input id='submit' type='submit' name='submit' value='submit'/></div>
</form>

  </body>
</html>

任何想法都会受到赞赏。

Answer 1

添加标头选项，如下所示：

$("#dataGrid").tablesorter({ widgets: ['zebra'], headers:{0:{sorter:false}} });

Answer 2

如果打开和关闭，看起来你打开它们......

使用此

function toggleAll(selector){
    $(selector).each(function(){
        this.checked = !this.checked;
    })
}

然后使用jquery选择器，它将为您提供所需的所有复选框。

onclick="toggleAll('input[type:checkbox]')"

（未测试的）

Answer 3

我必须做一个解决方法，就是将checkall复选框从tablesorter表中拉出来 - 然后就可以了。但是我仍然没有办法让它在桌子上工作。

JQuery tablesorter与checkall切换冲突

3 个答案: