[英]Jquery Datatables Editing row
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/
Now you can drag and drop with all the row and not only the first td.现在您可以拖放所有行,而不仅仅是第一个 td。
Also the edit is inline the table.编辑也是内联表。 I believe this is what you wanted: WORKING DEMO .我相信这就是您想要的: 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>
I used this code to edit or update specific row index on DataTable using Modal in which its a different section of my page.我使用此代码使用 Modal 编辑或更新 DataTable 上的特定行索引,其中它是我页面的不同部分。 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:不幸的是,我需要使用 Bootstrap 的 Modal 更新它:
var table = $('#tblSchedule').DataTable();
table.row($('#hdnRowClicked').val()).data([
"Tiger Nixon",
"System Architect",
"$3,120",
"2011/04/25",
"Edinburgh",
"5421",
"Tiger Nixon",
"System Architect",
"$3,120",
"<p>Hello</p>"
]).draw();
To get row index, I saved the row index whenever someone click my edit button with class btn-edit
using hidden tag element with an ID of hdnRowClicked
:为了获取行索引,每当有人使用 ID 为hdnRowClicked
隐藏标记元素单击我的类btn-edit
编辑按钮时,我都会保存行索引:
$('#tblRecord .btn-edit').click(function () {
$('#hdnRowClicked').val($(this).parents('tr').index());
});
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();
});
});
http://jsfiddle.net/5L2qy092/7/ http://jsfiddle.net/5L2qy092/7/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.