Javascript Jquery 数据表编辑行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/42491910/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jquery Datatables Editing row
提问by raduken
I am using: jquery.dataTables.js from: https://datatables.net
我正在使用：jquery.dataTables.js 来自：https://datatables.net
Issue 1 - Drag and Drop does not work after the user add a new row
问题 1 - 用户添加新行后拖放不起作用
What I need: make the row editable after click in the pencil.
我需要的是：在铅笔中单击后使该行可编辑。
similar to this sample: https://editor.datatables.net/examples/simple/inTableControls.html
类似于此示例：https: //editor.datatables.net/examples/simple/inTableControls.html
html:
html：
<table id="example" class="display" width="100%" cellspacing="0">
<thead>
<tr>
<th>order</th>
<th>name</th>
<th>country</th>
<th>action</th>
</tr>
</thead>
</table>
<button id="addRow">Add New Row</button>
<table id="newRow">
<tbody>
<tr>
<td><select id="selectbasic" name="selectbasic" class="form-control">
<option value="1">option 1</option>
<option value="2">option 2</option>
<option value="2">option 3</option>
</select>
</td>
<td>DVap
</td>
<td>
www</td>
<td><i class="fa fa-pencil-square" aria-hidden="true"></i>
<i class="fa fa-minus-square" aria-hidden="true"></i> </td>
</tr>
</tbody>
</table>
jquery:
查询：
$(document).ready(function() {
var dt = $('#example').dataTable();
dt.fnDestroy();
});
$(document).ready(function() {
var url = 'http://www.json-generator.com/api/json/get/ccTtqmPbkO?indent=2';
var table = $('#example').DataTable({
ajax: url,
rowReorder: {
dataSrc: 'order',
},
columns: [{
data: 'order'
}, {
data: 'place'
}, {
data: 'name'
}, {
data: 'delete'
}],
"initComplete": function(oSettings) {
$(this).on('click', "i.fa.fa-minus-square", function(e) {
table.row( $(this).closest('tr') ).remove().draw();
});
}
});
// add row
$('#addRow').click(function() {
//t.row.add( [1,2,3] ).draw();
var rowHtml = $("#newRow").find("tr")[0].outerHTML
console.log(rowHtml);
table.row.add($(rowHtml)).draw();
});
});
jsfiddle: http://jsfiddle.net/5L2qy092/5/
jsfiddle：http: //jsfiddle.net/5L2qy092/5/
回答by Offir Pe'er
Now you can drag and drop with all the row and not only the first td.
Also the edit is inline the table.
I believe this is what you wanted: WORKING DEMO.
现在您可以拖放所有行，而不仅仅是第一个 td。
编辑也是内联表。我相信这就是您想要的：WORKING DEMO。
<script>
$(document).ready(function() {
var table;
$("#example").on("mousedown", "td .fa.fa-minus-square", function(e) {
table.row($(this).closest("tr")).remove().draw();
})
$("#example").on('mousedown.edit', "i.fa.fa-pencil-square", function(e) {
$(this).removeClass().addClass("fa fa-envelope-o");
var $row = $(this).closest("tr").off("mousedown");
var $tds = $row.find("td").not(':first').not(':last');
$.each($tds, function(i, el) {
var txt = $(this).text();
$(this).html("").append("<input type='text' value='" + txt + "'>");
});
});
$("#example").on('mousedown', "input", function(e) {
e.stopPropagation();
});
$("#example").on('mousedown.save', "i.fa.fa-envelope-o", function(e) {
$(this).removeClass().addClass("fa fa-pencil-square");
var $row = $(this).closest("tr");
var $tds = $row.find("td").not(':first').not(':last');
$.each($tds, function(i, el) {
var txt = $(this).find("input").val()
$(this).html(txt);
});
});
$("#example").on('mousedown', "#selectbasic", function(e) {
e.stopPropagation();
});
var url = 'http://www.json-generator.com/api/json/get/ccTtqmPbkO?indent=2';
table = $('#example').DataTable({
ajax: url,
rowReorder: {
dataSrc: 'order',
selector: 'tr'
},
columns: [{
data: 'order'
}, {
data: 'place'
}, {
data: 'name'
}, {
data: 'delete'
}]
});
// add row
$('#addRow').click(function() {
//t.row.add( [1,2,3] ).draw();
var rowHtml = $("#newRow").find("tr")[0].outerHTML
console.log(rowHtml);
table.row.add($(rowHtml)).draw();
});
});
</script>
回答by rad11
I give you a simple way to do this:
我给你一个简单的方法来做到这一点：
<div id="dialog" title="Basic dialog">
</div>
<table id="example" class="display" width="100%" cellspacing="0">
<thead>
<tr>
<th>order</th>
<th>name</th>
<th>country</th>
<th>action</th>
</tr>
</thead>
</table>
<button id="addRow">Add New Row</button>
<table id="newRow">
<tbody>
<tr>
<td><select id="selectbasic" name="selectbasic" class="form-control">
<option value="1">option 1</option>
<option value="2">option 2</option>
<option value="2">option 3</option>
</select>
</td>
<td>DVap
</td>
<td>
www</td>
<td><i class="fa fa-pencil-square" aria-hidden="true"></i>
<i class="fa fa-minus-square" aria-hidden="true"></i> </td>
</tr>
</tbody>
</table>
$(document).ready(function() {
var dt = $('#example').dataTable();
dt.fnDestroy();
});
$(document).ready(function() {
var url = 'http://www.json-generator.com/api/json/get/ccTtqmPbkO?indent=2';
var table = $('#example').DataTable({
ajax: url,
rowReorder: {
dataSrc: 'order',
},
columns: [{
data: 'order',
type: 'text'
}, {
data: 'place',
type: 'text',
edit: true
}, {
data: 'name',
type: 'text',
edit: true
}, {
data: 'delete',
type: 'text'
}],
"initComplete": function(oSettings) {
$(this).on('click', "i.fa.fa-minus-square", function(e) {
table.row( $(this).closest('tr') ).remove().draw();
});
$(this).on('click', 'i.fa.fa-pencil-square', function(e){
var rowData = table.row($(this).closest('tr')).data();
var columns = table.settings().pop().aoColumns;
var column = columns[table.column($(this).closest('td')).index()];
var rowIndex = table.row($(this).closest('tr')).index();
var html = '<form id="form">';
for(var col in columns){
if(columns[col].type === 'text' && columns[col].edit){
html += '<input type="text" value="'+rowData[columns[col].data]+'" name="'+columns[col].data+'" placeholder="'+columns[col].data+'"/><br />';
}
}
html += '<input type="hidden" name="rowIndex" id="rowIndex" value="'+rowIndex+'" />';
html += '<input type="submit" id="update"/></form>';
$('#dialog').html(html);
$( "#dialog" ).modal();
});
}
});
$('body').on('click', '#update', function(e) {
e.preventDefault();
var data = $('#form').serializeArray();
var rowIndex = $('#rowIndex').val();
var rowData = table.row(rowIndex).data();
var newData = {};
newData['order'] = rowData['order'];
newData['delete'] = rowData['delete'];
for(var d in data){
newData[data[d]['name']] = data[d]['value'];
}
table
.row(rowIndex)
.data(newData)
.draw();
});
});
回答by Willy David Jr
I used this code to edit or update specific row index on DataTable using Modal in which its a different section of my page. Most example points when you click a part of your datatable, from there you can update it. Unfortunately, I need to update it using Modal of Bootstrap:
我使用此代码使用 Modal 编辑或更新 DataTable 上的特定行索引，其中它是我页面的不同部分。大多数示例指向当您单击数据表的一部分时，您可以从那里更新它。不幸的是，我需要使用 Bootstrap 的 Modal 更新它：
var table = $('#tblSchedule').DataTable();
table.row($('#hdnRowClicked').val()).data([
"Tiger Nixon",
"System Architect",
",120",
"2011/04/25",
"Edinburgh",
"5421",
"Tiger Nixon",
"System Architect",
",120",
"<p>Hello</p>"
]).draw();
To get row index, I saved the row index whenever someone click my edit button with class btn-editusing hidden tag element with an ID of htnRowClicked:
为了获取行索引，每当有人btn-edit使用 ID 为的隐藏标记元素单击我的编辑按钮时，我都会保存行索引htnRowClicked：
$('#tblRecord .btn-edit').click(function () {
$('#hdnRowClicked').val($(this).parents('tr').index());
});
