Datatables 行內(nèi)編輯,獲取鼠標點擊的當前單元格
首先需要引入,重點在 columnDefs:
<link rel="stylesheet">
<script src="http://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
html代碼:
<table id="editable">
</table>
js代碼:
var oTable;
oTable = $('#editable').DataTable({
ajax: {
url: "/keyword/keywordAjax",
type: "post",
data: function (d) {
//d 是原始的發(fā)送給服務(wù)器的數(shù)據(jù)氧猬,默認很長怀伦,這里是我自己封裝過的壁涎,你使用自己的方式傳輸data就可以了。
}
},
searching: false,//關(guān)閉搜索框
serverSide: true,//服務(wù)器分頁
processing: true,
paging: true,
bSort: true,
ordering: true,
autoWidth: true,
scrollCollapse: false,
stateSave: true,//開啟記錄上次翻頁
info:true,
createdRow: function (row, data, index) {
/* 設(shè)置表格中的內(nèi)容居中 */
$('td', row).attr("class", "text-center");
$('th').attr("class", "text-center");
},
columns: [
{
title: "ID",
data: "id"
} ,{
title:"中文名稱",
data:"displayvaluezh"
} ,{
title:"操作列",
render:function (data,type,full,callback) {
return `<a title="編輯" onclick="#">編輯</a>;
}
}
],
columnDefs: [{
"targets": [3, 4, 5, 7], //設(shè)置你要給哪一列開啟行內(nèi)編輯
fnCreatedCell: function(cell, cellData, rowData, rowIndex, colIndex) {
var trow = null;
$(cell).click(function() {
$(this).html('<input type="text" value="請輸入" size="16" style="width: 100%"/>');
var aInput = $(this).find(":input");
aInput.focus().val(cellData);
//在用戶點擊某一單元格的時候志秃,獲取當前單元格的信息( trow )怔球,以便后面修改和使用。
trow = oTable.row($(this)).data();
});
$(cell).on("blur", ":input", function() {
var text = $(this).val();
$(cell).html(text);
oTable.cell(cell).data(text);
console.info("當前修改行:" + JSON.stringify(trow));
//現(xiàn)在你就可以將獲取到當前行的json發(fā)送到后臺進行修改了
});
})
}]
}
});
datatables的API 和文檔教程太散了浮还,大家如果有其他需求可以去看看:http://datatables.club/blog/listall.html
最后感謝來自:(https://www.cnblogs.com/GaiaBing/p/9317702.html)提供的幫助