我有一个 html 表格,有 4 列和几行。这些行需要可排序(我使用 jquery ui 可排序),但是外部左侧 td 永远不应该移动。所以基本上我希望能够移动该行而不移动该行中的外侧左侧 td 。 我尝试过使用项目选项和取消方法,但没有成功。 我查找了类似的线程,但我的目标不是让每个 td 可排序:
jquery sortable with multiple tbody
How to make a single <td> element in a <tr> not sortable (jquery ui)
使用可排序可以实现吗? 如果有人能指出我正确的方向,我将不胜感激。
我的标记:
<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/
在这种情况下,“计数器”列不应移动。
谢谢你, 莫妮卡
最佳答案
一种方法(实际上不是最聪明的)可能是将计数器部分分离到另一个表中。 它看起来一样,并且工作起来就像您希望的那样,但正如我所说,我认为这不是解决您的问题的最明智的方法。
无论如何,看看我做了什么: 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);
});
}
});
关于jquery - 可排序 : disable a column in a sortable row,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16420709/