1
我正在使用jquery.dataTables.js,我試圖從一個表拖放行到另一個,反之亦然,從表2到table1就像這樣:http://jsfiddle.net/yf47u/Jquery Datatable將一行從一個表拖放到另一個表
上面的示例是與json,所以我想與我的json示例做同樣的工作。
這是我的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);
});
});
謝謝你這麼多的人對這種幫助,只是2個問題,我可以阻止從表1中拖放到表2?而不是移動整行可以移動一列嗎?並取代?示例:將表2中的列位拖放到表1中的位置?並用新數據更新該字段?而不是移動整行?,謝謝。 – Raduken
不客氣。第二個問題更詳細,需要一些時間來改變例子。考慮到你的目標,有必要應用幾乎相同的邏輯,但是應用到單元屬性而不是第一行。至於阻塞,當然,可以阻止這種拖放,你只需要從第一個表中刪除鼠標事件。這樣的事情:http://jsfiddle.net/jahn08/f7debwj2/35/ –
好的np謝謝,我改變了插件,我使用的是官方的數據表,因此可以讓你的代碼在jsfiddle中工作? :http://jsfiddle.net/f7debwj2/37/謝謝 – Raduken