我有一个包含4列和几行的html表。行需要是可排序的(我使用jquery ui可排序),但是在左外侧 td永远不应该移动。所以基本上我希望能够移动行而不移动该行中的左外侧td。 我试图搞乱项目选项和取消方法没有成功。 我查找了类似的线程,但我的目标不是让每个td都可以排序:
jquery sortable with multiple tbody
How to make a single <td> element in a <tr> not sortable (jquery ui)
这可以使用sortable吗? 如果有人能指出我正确的方向,我会非常感激。
我的标记:
<table>
<tr class="head_row">
<td>Counter</td>
<td>Position</td>
<td>Note</td>
<td>Visible</td>
</tr>
<tbody class="sort">
<tr>
<td>1</td>
<td>1</td>
<td>TEST1</td>
<td>Y</td>
</tr>
<tr>
<td>2</td>
<td>1</td>
<td>TEST2</td>
<td>Y</td>
</tr>
<tr>
<td>3</td>
<td>1</td>
<td>TEST3</td>
<td>Y</td>
</tr>
</tbody>
jquery的:
$(function(){
$(".sort").sortable({
helper: fixWidth,
revert : true,
cursor: "move",
opacity: 0.5
});
});
// fixes the width of the table rows while sorting
var fixWidth = function(e, tr) {
var $originals = tr.children();
var $helper = tr.clone();
$helper.children().each(function(index)
{
$(this).width($originals.eq(index).width())
});
return $helper;
};
这是我到目前为止的链接:
http://jsfiddle.net/zSzks/2/
在这种情况下,“计数器”列不应移动。
谢谢你, 莫妮卡
答案 0 :(得分:3)
一种方法 - 真的不是最聪明的 - 可能是将Counter部分分成另一个表。 它看起来一样,就像你希望它一样工作,但正如我所说,我认为这不是解决问题的最明智的方法。
无论如何看看我做了什么: jsfiddle
<强> HTML 强>
<table id="counterTable">
<thead>
<tr class="head_row">
<th>Counter</th>
</tr>
</thead>
<tbody class="fake">
<tr>
<td>1</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>3</td>
</tr>
</tbody>
</table>
<强> CSS 强>
#counterTable {
float: left;
/* to hide the noticeable difference between the 2 tables */
margin-right: -2px;
}
.sort td, .fake td {
border: 1px solid;
width: 100px;
}
顺便说一下,您通常应将表格标题包裹在<th>
标签中,这样您的标题(如计数器,位置,注释......)就可以识别为标题。
编辑(解决方案)
$(".sort").sortable({
//other config
update: function (event, ui) {
$('.sort > tr .counter').each(function (index) {
$(this).text(index + 1);
});
}
});