移动列,包括日,表之间的我有与第一被摄体细胞标题两个示例性的表。
<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>
我做的th
和td
不可排序,因为他们是冠军的第一个孩子。有没有办法将其他列一次一个(td:nth-child,th:nth-child
)移动到另一个使用jQueryUI排序的表? 如何在change
或start
事件中对整列进行排序?
这里是我的预期输出:
<table class='sort connect'>
<thead>
<tr>
<th class='ui-state-disabled'></th>
<th>Person 1</th>
</tr>
</thead>
<tbody>
<tr>
<td class='ui-state-disabled'>Age</td>
<td>18</td>
</tr>
<tr>
<td class='ui-state-disabled'>Job</td>
<td>Clerk</td>
</tr>
</tbody>
</table>
<table class='sort connect'>
<thead>
<tr>
<th class='ui-state-disabled'></th>
<th>Person 3</th>
<th>Person 2</th> // sorted
<th>Person 4</th>
</tr>
</thead>
<tbody>
<tr>
<td class='ui-state-disabled'>Age</td>
<td>17</td>
<td>23</td> //sorted
<td>46</td>
</tr>
<tr>
<td class='ui-state-disabled'>Job</td>
<td>Student</td>
<td>Policeman</td> //sorted
<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中,并使div可排序,并将表排序为 – ctwheels 2014-08-29 18:29:24
我没有时间ATM来编写任何代码,但我认为解决方案更抽象一些而不是字面上的举动。一些在一行中执行td的计数,并在它上面进行模数以获得连续的所有tds,即,我们想要将子表移动到els td3/td6/td9。也许有人可以运行。 HTH – briansol 2014-08-29 20:34:54
我不确定这是否有帮助,但对我来说,这看起来像数据表示问题。 AFAIK,一行代表*记录*,而列代表该记录的*属性*值。对我而言,这里的'人'是一个记录,'年龄','工作'等是人的属性。 (*是'person1','person2'等'age'或'job'的属性?好吧,不适合我。*)基于此,[**你的结构应该是这样**](http ://jsfiddle.net/tt3ceLbf/21/)。对,不是*问题的回答,因此评论:) – 2014-08-31 09:02:15