Kar*_*hik 4 javascript jquery drag-and-drop html-table
我需要通过从表格到另一个表格中选择所需的行来拖放表格行.首先提供从一个表中选择所需行的选项,然后需要将所有选定的行拖放到其他表中.
我已经完成了将示例从表格拖放到另一个表格的示例.找到以下代码:
HTML:
<div id="table1" class="bitacoratable">
<table>
<thead>
<tr>
<th>ID</th>
<th>ClassName</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Class 1</td>
</tr>
<tr class="childrow">
<td collspan = "2" >
<table class="childgrid">
<tr class="draggable_tr">
<td>1</td>
<td>Student 1</td>
</tr>
<tr class="draggable_tr">
<td>2</td>
<td>Student 2</td>
</tr>
<tr class="draggable_tr">
<td>3</td>
<td>Student 3</td>
</tr>
<tr class="draggable_tr">
<td>4</td>
<td>Student 4</td>
</tr>
<tr class="draggable_tr">
<td>5</td>
<td>Student 5</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>2</td>
<td>Class 2</td>
</tr>
<tr class="childrow">
<td collspan = "2">
<table class="childgrid">
<tr class="draggable_tr">
<td>6</td>
<td>Student 6</td>
</tr>
<tr class="draggable_tr">
<td>7</td>
<td>Student 7</td>
</tr>
<tr class="draggable_tr">
<td>8</td>
<td>Student 8</td>
</tr>
<tr class="draggable_tr">
<td>9</td>
<td>Student 9</td>
</tr>
<tr class="draggable_tr">
<td>10</td>
<td>Student 10</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<div id="table2" class="bitacoratable">
<table>
<thead>
<tr>
<th>ID</th>
<th>ClassName</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Class 1</td>
</tr>
<tr class="childrow">
<td>
<table class="childgrid">
<tr class="draggable_tr">
<td>1</td>
<td>Student 1</td>
</tr>
<tr class="draggable_tr">
<td>2</td>
<td>Student 2</td>
</tr>
<tr class="draggable_tr">
<td>3</td>
<td>Student 3</td>
</tr>
<tr class="draggable_tr">
<td>4</td>
<td>Student 4</td>
</tr>
<tr class="draggable_tr">
<td>5</td>
<td>Student 5</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>2</td>
<td>Class 2</td>
</tr>
<tr class="childrow">
<td>
<table class="childgrid">
<tr class="draggable_tr">
<td>6</td>
<td>Student 6</td>
</tr>
<tr class="draggable_tr">
<td>7</td>
<td>Student 7</td>
</tr>
<tr class="draggable_tr">
<td>8</td>
<td>Student 8</td>
</tr>
<tr class="draggable_tr">
<td>9</td>
<td>Student 9</td>
</tr>
<tr class="draggable_tr">
<td>10</td>
<td>Student 10</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</div>
脚本:
$("#table1 .childgrid tr, #table2 .childgrid tr").draggable({
helper: 'clone',
revert: 'invalid',
start: function (event, ui) {
$(this).css('opacity', '.5');
},
stop: function (event, ui) {
$(this).css('opacity', '1');
}
});
$("#table1 .childgrid, #table2 .childgrid").droppable({
drop: function (event, ui) {
$(ui.draggable).appendTo(this);
}
});
$(document).on("click", ".childgrid tr", function () {
$(this).addClass("selectedRow");
});
CSS:
table
{
border-collapse:collapse;
}
table, td, th
{
border:1px solid black;
}
.bitacoratable {
height: 400px;
overflow-y: auto;
width: 220px;
float:left;
}
#table1 {
margin-right: 100px;
}
.selectedRow {
background-color: #E7E7E7;
cursor: move;
}
怎么做多行？
此致,Karthik.
小智 8
你可以使用draggable的帮助函数.有一个很好的实现在这里.
以下是使用上述内容作为特定代码的指南:
解释发生了什么:
(1)如果只选择了一个,那么我们将把它视为单个拖放.因为它还没有被点击(鼠标按住并立即拖动),我们将手动添加selectedRow类以确保它从原始位置正确删除.
(selected.length === 0) {
selected = $(this).addClass('selectedRow');
}
(2)创建一个临时容器,将所有行存储为一个单元,就像我们拖动一个项目一样.
var container = $('<div/>').attr('id', 'draggingContainer');
container.append(selected.clone().removeClass("selectedRow"));
return container;
(3)您可以修改CSS,以便我们在显示移动光标之前始终单击这些项目.我已经做过了,但你可以随意改变它.
(4)现在我们将临时分隔符中的所有表行追加到我们选择放入并删除最初选中的所有元素的.childgrid中.
$("#table1 .childgrid, #table2 .childgrid").droppable({
drop: function (event, ui) {
$(this).append(ui.helper.children());
$(this)是我们选择的,我们将元素追加到辅助函数返回的临时分隔符中,这些是表行.
$('.selectedRow').remove();
}
现在摆脱我们之前选择的那些表行.
});
如果有任何错误,请告诉我,我会尽力排除它们.它适用于我.由于您可以突出显示表格行中的文本,因此如果您拖放太快而且您突出显示文本而不是选择行本身,则可能会出现一些问题.
| 归档时间： |
|
| 查看次数： |
9556 次 |
| 最近记录： |