是否有办法使用jQueryUI排序表与隐藏的列

最近我必须修复一个使用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();

我猜，当一些列被隐藏时，导航器认为行中的颜色比标题中的颜色多。

我的问题:是否有人有同样的问题，以及如何解决它?

我能够通过修改你的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个单元格，其中没有一个是隐藏的

相关内容

最新更新

热门标签：