最近我不得不修復一個使用 jQueryUI 可在行上排序的表上的奇怪行為。
當我拖動并移動一行時，表格會縮小。
經過一些研究，我能夠重現簡單表上的行為：
jsFiddle 鏈接
#sort2 .hidden {
display: none;
}
.fullsize {
width: 100%;
}
.fix30 {
width: 30px;
}
.fix100 {
width: 100px;
}
<html>
<body>
<table id="sort1" class="fullsize">
<thead><tr>
<th class="hidden">hide</th>
<th class="hidden">hide</th>
<th class="hidden">hide</th>
<th class="fix30">Test1</th>
<th>Test2</th>
<th class="fix100">Test3</th>
<th class="fix100">Test4</th>
<th class="fix100">Test5</th>
</tr></thead>
<tbody>
<tr>
<td class="hidden">hide</td>
<td class="hidden">hide</td>
<td class="hidden">hide</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td class="hidden">hide</td>
<td class="hidden">hide</td>
<td class="hidden">hide</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td class="hidden">hide</td>
<td class="hidden">hide</td>
<td class="hidden">hide</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
</tbody>
</table>
<hr />
<table id="sort2" class="fullsize">
<thead><tr>
<th class="hidden">hide</th>
<th class="hidden">hide</th>
<th class="hidden">hide</th>
<th class="fix30">Test1</th>
<th>Test2</th>
<th class="fix100">Test3</th>
<th class="fix100">Test4</th>
<th class="fix100">Test5</th>
</tr></thead>
<tbody>
<tr>
<td class="hidden">hide</td>
<td class="hidden">hide</td>
<td class="hidden">hide</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td class="hidden">hide</td>
<td class="hidden">hide</td>
<td class="hidden">hide</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td class="hidden">hide</td>
<td class="hidden">hide</td>
<td class="hidden">hide</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
</tbody>
</table>
</body>
</html>
var fixHelperModified = function(e, tr) {
var $originals = tr.children();
var $helper = tr.clone();
$helper.children().each(function(index)
{
$(this).width($originals.eq(index).width())
});
return $helper;
};
$("tbody").sortable({
helper: fixHelperModified
}).disableSelection();
我的猜測是，當某些列被隱藏時，導航器認為行中的列比標題中的列多。
我的問題：有沒有人有同樣的問題以及如何解決它？
uj5u.com熱心網友回復：
我可以通過稍微修改你的 JS 來修復它，這就是我所做的：
var fixHelperModified = function(e, tr) {
var $originals = tr.children();
var $helper = tr.clone();
$helper.children().each(function(index)
{
$(this).outerWidth($originals.eq(index).outerWidth())
});
return $helper;
};
$("tbody").sortable({
start: function(event, ui) {
ui.helper.css('display', 'table')
},
stop: function(event, ui) {
ui.item.css('display', '')
},
helper: fixHelperModified ,
start: function(event, ui) {
return ui.placeholder.children().each(function(index, child) {
var source;
source = ui.helper.children().eq(index);
$(child).removeAttr('class').removeAttr('colspan');
$(child).addClass(source.attr('class'));
if (source.attr('colspan')) {
return $(child).attr('colspan', source.attr('colspan'));
}
});
}
}).disableSelection();
發生此問題是因為您有一個隱藏的單元格（并且在可排序為您創建的占位符中，有 8 個單元格并且沒有一個是隱藏的
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/430908.html
標籤：jQuery-ui html表 jquery-ui-可排序
上一篇：每行只勾選一個復選框