Javascript 在jQueryUI sortable中的表之间移动列(包括th)
我有两个示例表,第一个单元格中有主题标题Javascript 在jQueryUI sortable中的表之间移动列(包括th),javascript,jquery,html,jquery-ui,jquery-ui-sortable,Javascript,Jquery,Html,Jquery Ui,Jquery Ui Sortable,我有两个示例表,第一个单元格中有主题标题 <table class='sort connect'> <thead> <tr> <th class='ui-state-disabled'></th> <th>Person 1</th> <th>Person 2</th> </
<table class='sort connect'>
<thead>
<tr>
<th class='ui-state-disabled'></th>
<th>Person 1</th>
<th>Person 2</th>
</tr>
</thead>
<tbody>
<tr>
<td class='ui-state-disabled'>Age</td>
<td>18</td>
<td>23</td>
</tr>
<tr>
<td class='ui-state-disabled'>Job</td>
<td>Clerk</td>
<td>Policeman</td>
</tr>
</tbody>
</table>
<table class='sort connect'>
<thead>
<tr>
<th class='ui-state-disabled'></th>
<th>Person 3</th>
<th>Person 4</th>
</tr>
</thead>
<tbody>
<tr>
<td class='ui-state-disabled'>Age</td>
<td>17</td>
<td>46</td>
</tr>
<tr>
<td class='ui-state-disabled'>Job</td>
<td>Student</td>
<td>Firefighter</td>
</tr>
</tbody>
</table>
JS代码:
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;
};
$(function() {
$( ".sort" ).sortable({
change: function( event, ui ) {
var see = ui.item.index();
console.log(see);
$(this).find('td:nth-child(see),th:nth-child(see)')
},
helper: fixHelperModified,
cancel: ".ui-state-disabled",
connectWith: ".connect"
}).disableSelection();
});
像这样的怎么样
这是一个解决你所要求的问题的方法,但它基本上做了相同的事情,只是根据你的需要修改样式、空间等
HTML
<div class="sortableContainer sort connect">
<div>
<table>
<thead>
<tr>
<td height="20px"></td>
</tr>
</thead>
<tbody>
<tr>
<td>Age</td>
</tr>
<tr>
<td>Job</td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<thead>
<tr>
<td>Person 1</td>
</tr>
</thead>
<tbody>
<tr>
<td>18</td>
</tr>
<tr>
<td>Clerk</td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<thead>
<tr>
<td>Person 2</td>
</tr>
</thead>
<tbody>
<tr>
<td>23</td>
</tr>
<tr>
<td>Policeman</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="sortableContainer sort connect">
<div>
<table>
<thead>
<tr>
<td height="20px"></td>
</tr>
</thead>
<tbody>
<tr>
<td>Age</td>
</tr>
<tr>
<td>Job</td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<thead>
<tr>
<td>Person 3</td>
</tr>
</thead>
<tbody>
<tr>
<td>17</td>
</tr>
<tr>
<td>Student</td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<thead>
<tr>
<td>Person 4</td>
</tr>
</thead>
<tbody>
<tr>
<td>46</td>
</tr>
<tr>
<td>Firefighter</td>
</tr>
</tbody>
</table>
</div>
</div>
JS
td, th {
border:1px solid #222
}
.red {
background:red
}
.ui-state-disabled {
opacity:1
}
.sortableContainer>div {
display:inline-block;
}
table {
border-spacing:0px;
border-collapse:collapse;
}
$(function () {
$(".sort").sortable({
connectWith: ".connect"
}).disableSelection();
});
您的HTML结构需要保持不变还是可以编辑?也就是说,为每一列创建一个表,然后将它们放在一个div中,并使divs可排序,而sortable元素则是表本身。我没有时间写任何代码,但我认为解决方案比文字移动更抽象一些。对一行中的td进行计数,并对其进行模数运算以获得一行中的所有tds,即,我们希望移动包含子项els td3/td6/td9的表。也许有人可以带着它跑。我不确定这是否有帮助,但对我来说,这似乎是一个数据表示问题。行表示记录,列表示该记录的属性值。对我来说,
person
是一个记录,age
,job
等是person的属性。(是不是person1
,person2
等都是年龄
或工作
的属性?嗯,不是我的。)基于此。对,这不是问题的答案,因此有一个评论:)我还没想过。这似乎是一个很好的解决办法。我需要注意的是第二个和第三个表中内容的长度,以确保它们的高度和宽度与第一个表匹配。否则整个结构都会被破坏。@RedGiant我不太清楚你的意思,你能强调一点吗?@RedGiant我想我现在知道你的意思了,有可能,这就是你的意思吗?是的,这就是我想说的。我想保持表之间的高度相等,这样如果其中一个单元格包含更多文本,它就不会破坏整个结构。@RedGiant关于我提供的代码,您还有什么其他困难吗?或者您是否希望添加或更改任何内容?
$(function () {
$(".sort").sortable({
connectWith: ".connect"
}).disableSelection();
});