问题描述
我正在使用jquery.dataTables.js，并且尝试将行从一个表拖放到另一个表，反之亦然从表2拖放到表1，如以下示例: http://jsfiddle.net/yf47u/
I am using jquery.dataTables.js and I'm trying to drag and drop rows from one table to another and vice-versa from table 2 to table1 like this sample: http://jsfiddle.net/yf47u/
上面的示例与json一起使用，因此我想对json示例进行相同的工作.
Above sample was with json so I would like to make the same work with my json sample.
这是我的jsfiddle: http://jsfiddle.net/f7debwj2/12/
this is my jsfiddle:http://jsfiddle.net/f7debwj2/12/
html:
<br>
<br>
<h1>
table1
</h1><br>
<br>
<table id="example" class="display" width="100%" cellspacing="0">
<thead>
<tr>
<th>First name</th>
<th>Place</th>
<th>Order</th>
</tr>
</thead>
</table>
<br>
<br>
<h1>
table 2
</h1><br>
<br>
<table id="example2" class="display" width="100%" cellspacing="0">
<thead>
<tr>
<th>First name</th>
<th>Place</th>
<th>checkbox</th>
</tr>
</thead>
</table>
jquery:
$(document).ready(function() {
var dt = $('#example').dataTable();
dt.fnDestroy();
});
$(document).ready(function() {
var url = 'http://www.json-generator.com/api/json/get/clmDuyndua?indent=2';
var table = $('#example').DataTable({
ajax: url,
createdRow: function(row, data, dataIndex) {
$(row).attr('id', 'row-' + dataIndex);
},
rowReorder: {
dataSrc: 'order',
},
columns: [{
data: 'order'
}, {
data: 'name'
}, {
data: 'place'
}]
});
table.rowReordering();
});
$(document).ready(function() {
var dt = $('#example2').dataTable();
dt.fnDestroy();
});
$(document).ready(function() {
var url = 'http://www.json-generator.com/api/json/get/cnmZgfsBKa?indent=2';
var table = $('#example2').DataTable({
ajax: url,
createdRow: function(row, data, dataIndex) {
$(row).attr('id', 'row-' + dataIndex);
},
rowReorder: {
dataSrc: 'order',
},
columns: [{
data: 'order'
}, {
data: 'name'
}, {
data: 'checkbox'
}]
});
table.rowReordering();
});
$(document).ready(function() {
$('body').on('mouseenter', 'input', function() {
$('.btn').prop('disabled', true);
});
$('body').on('mouseout', 'input', function() {
$('.btn').prop('disabled', false);
});
});
推荐答案
这是我根据您的代码解决此问题的方法.可以将行从一个表拖放到另一个表，但是我被迫动态更改FirstName列的值，因为否则表将认为具有相同FirstName的两行相等，这在删除一个行时会出现问题那些相同的行.通常，在这种情况下，表应该具有唯一键.
Here is my solution to this problem based on your code. It's possible to drag and drop rows from one table to the other one, but I was compelled to change values of the FirstName column dynamically, because otherwise a table would consider two rows with an identical FirstName equal, which would be a problem when removing one of those identical rows. Generally, tables should have a unique key in such cases.
JavaScript:
JavaScript:
var rowCache;
$(document).ready(function() {
var dt = $('#example').dataTable();
dt.fnDestroy();
});
$(document).ready(function() {
var dt = $('#example2').dataTable();
dt.fnDestroy();
});
$(document).ready(function() {
rowCache = [];
var url = 'http://www.json-generator.com/api/json/get/clmDuyndua?indent=2';
var table = $('#example').DataTable({
ajax: url,
createdRow: function(row, data, dataIndex) {
$(row).attr('id', 'row-' + dataIndex);
},
rowReorder: {
dataSrc: 'order',
},
columns: [{
data: 'order'
}, {
data: 'name'
}, {
data: 'place'
}]
});
table.rowReordering();
table.on('mousedown', 'tbody tr', function () {
var $row = $(this);
var r = table.rows(function (i, data) {
return data.order == $row.children().first().text();
});
if (r[0].length > 1)
r = r.rows(r[0][0]);
rowCache.push({ selector: 'example', row: r });
});
table.on('mouseup', mouseUp);
});
$(document).ready(function() {
var url = 'http://www.json-generator.com/api/json/get/cnmZgfsBKa?indent=2';
var table = $('#example2').DataTable({
ajax: url,
createdRow: function(row, data, dataIndex) {
$(row).attr('id', 'row-' + dataIndex);
},
rowReorder: {
dataSrc: 'order',
},
columns: [{
data: 'order'
}, {
data: 'name'
}, {
data: 'checkbox'
}]
});
table.rowReordering();
table.on('mousedown', 'tbody tr', function () {
var $row = $(this);
var r = table.rows(function (i, data) {
return data.order == $row.children().first().text();
});
if (r[0].length > 1)
r = r.rows(r[0][0]);
rowCache.push({ selector: 'example2', row: r });
});
table.on('mouseup', mouseUp);
});
function mouseUp(event)
{
var id = $(document.elementsFromPoint(event.clientX, event.clientY))
.filter('table')
.attr('id');
if (id && event.currentTarget.id != id)
{
rowCache.every(function (el, i) {
if (el.selector != id)
{
var data = el.row.data();
if (data.length > 0) {
if (!data[0].checkbox)
data[0].checkbox = "<input type='checkbox' />"
el.row.remove().draw();
var $target = $("#" + id).DataTable();
if ($target.rows()[0].length > 0)
{
var rowsArray = $target.rows().data().toArray();
data[0].order = rowsArray[rowsArray.length - 1].order + 1;
}
else
data[0].order = 1;
$target.rows.add(data.toArray()).draw();
}
}}
);
}
rowCache = [];
}
$(document).ready(function() {
$('body').on('mouseenter', 'input', function() {
$('.btn').prop('disabled', true);
});
$('body').on('mouseout', 'input', function() {
$('.btn').prop('disabled', false);
});
});
JSFiddle: http://jsfiddle.net/jahn08/f7debwj2/34/
JSFiddle: http://jsfiddle.net/jahn08/f7debwj2/34/
这篇关于jQuery Datatable将一行从一个表拖放到另一个表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！