Datatables 行内编辑,获取鼠标点击的当前单元格
首先需要引入,重点在 columnDefs:
<link href="http://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css" 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 是原始的发送给服务器的数据,默认很长,这里是我自己封装过的,你使用自己的方式传输data就可以了。
}
},
searching: false,//关闭搜索框
serverSide: true,//服务器分页
processing: true,
paging: true,
bSort: true,
ordering: true,
autoWidth: true,
scrollCollapse: false,
stateSave: true,//开启记录上次翻页
info:true,
createdRow: function (row, data, index) {
/* 设置表格中的内容居中 */
$('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], //设置你要给哪一列开启行内编辑
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));
//现在你就可以将获取到当前行的json发送到后台进行修改了
});
})
}]
}
});
datatables的API 和文档教程太散了,大家如果有其他需求可以去看看:http://datatables.club/blog/listall.html
最后感谢来自:(https://www.cnblogs.com/GaiaBing/p/9317702.html)提供的帮助