EDITで
ありがとう： 私はあなたのためにそれを考え出しました。
次のコードは、カスタムハンドラを追加します。 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>
おかげで、私はすでに、このマニュアルをお読みください。私のアップデートは私のコントローラーで動作しています。既にポップアップしているので、他のポップアップを私の編集のために表示したくありません。そして、もし私が間違っていないなら、エディタはnoを編集するためのポップアップを提供しますか？ユーザーはセルごとに行単位ではなくセル単位で更新したいと考えています。 – Furtiro
私は誤解を招くかもしれませんが、リンク内に表示されているように、編集ポップアップはありません。行ごとに –
このエディターは無料ではありません... – Furtiro