这是我现在的代码:
$('#positionsCapteurs').dataTable({
"paging": false,
"ordering": false,
"info": false,
"bJQueryUI": true,
"bFilter": false,
"columnDefs": [{
"targets": 0,
"orderable": false
}]
}).makeEditable(
{
sUpdateURL:"/Appareils/UpdateData",
});
我创建了一个数据表并使其可编辑，它工作得很好，但我想允许用户在不按回车键的情况下更新数据，我找到了一个属性来做到这一点:onblur:'submit' 。
我尝试将其添加到我的选项(dataTable 或 makeEditable)中，但它不起作用。
如何添加此选项并允许用户按 Enter 或不按 Enter 来更新数据？
提前致谢
最佳答案
编辑: 我已经帮你想好了。
以下代码添加自定义处理程序。您可以在 onblur 中创建 ajax 请求。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Datatable Save on blur</title>
<link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css">
<script type="text/javascript" language="javascript" src="http://code.jquery.com/jquery-1.12.3.min.js">
</script>
<script type="text/javascript" language="javascript" src="http://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js">
</script>
<script type="text/javascript" language="javascript" class="init">
$(document).ready(function() {
$('#positionsCapteurs').DataTable( {
"paging": false,
"ordering": false,
"info": false,
"bJQueryUI": true,
"bFilter": false,
"columnDefs": [{
"targets": 0,
"orderable": false
}]
});
$('#positionsCapteurs').on('click', 'tbody td', function (e) {
// check if inout does not already exist
if ( $(this).html().indexOf('input') == -1 ) {
var rel = $(this).attr('rel');
var fieldname = $(this).attr('fieldname');
var val = $(this).html();
$(this).html(inlineEdit(this, rel, fieldname, val));
var myTd = this;
// implement the blur
$("#" + rel + '_' + fieldname ).on('blur', function() {
// create ajax call to save data
/*
$.ajax({
url: "backendscript.php",
method: "POST",
data: { id : rel, fieldname: fieldname, val: $(this).val() }
}).done(function( html ) {
stopEdit(this, myTd);
});
*/
stopEdit(this, myTd); // comment this out when ajax call is impleneted stopEdit should be done when ajax call is done
});
// implement the enter press
$("#" + rel + '_' + fieldname ).on('keypress', function(event) {
if ( event.keyCode == 13 ) {
$(this).trigger('blur');
}
});
// focus the input
$("#" + rel + '_' + fieldname ).focus();
// put the cursor on the end
var tmpStr = $("#" + rel + '_' + fieldname ).val();
$("#" + rel + '_' + fieldname ).val('');
$("#" + rel + '_' + fieldname ).val(tmpStr);
}
});
});
// generate input
function inlineEdit(td, rel, fieldname, val) {
return $('<input/>').attr({ type: 'text', rel: rel, name: fieldname, autofocus: 'true', value: val, id: rel + '_' + fieldname})
}
// stop input
function stopEdit(input, myTd) {
$(myTd).html($(input).val());
}
</script>
</head>
<body>
<div class="container">
<table id="positionsCapteurs" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Col3</th>
<th>Col4</th>
</tr>
</thead>
<tbody>
<tr>
<td rel="1" fieldname="name">Olivier</td>
<td rel="1" fieldname="pos">Developer</td>
<td rel="1" fieldname="col3">val3</td>
<td rel="1" fieldname="col4">val4</td>
</tr>
<tr>
<td rel="2" fieldname="name">Olivier2</td>
<td rel="2" fieldname="pos">Developer2</td>
<td rel="2" fieldname="col3">val32</td>
<td rel="2" fieldname="col4">val42</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
关于javascript - Jquery数据表makeEditable更新无需按回车键，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40126709/