欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

jquery datatables 編輯

老白2年前9瀏覽0評論

jQuery DataTables 是一種常用的表格插件,它提供了很多功能,其中包括編輯。通過其中的一些選項和事件,我們可以使DataTable具有基本的編輯功能和操作。

這里介紹一種使用DataTable編輯數據的簡單方法,通過這種方法你可以輕松地修改、保存和取消編輯數據。

$('#example').DataTable({
"columnDefs": [
{
"targets": 0,
"className": "editable"
},
{
"targets": 1,
"className": "editable"
},
{
"targets": 2,
"className": "editable"
}
],
"createdRow": function (row, data, index) {
$(row).addClass('editable');
}
});
$('#example').on('click', 'td.editable', function () {
var cell = $(this);
var cellData = cell.text();
var row = cell.parent();
var rowIndex = row.index();
var columnIndex = cell.index();
var columnIndexVisible = cell.index() - 1;
var input = $('');
cell.html(input);
input.focus().on('blur keypress', function (e) {
if (e.type === 'blur' || e.key === 'Enter') {
var newValue = $(this).val();
cell.html(newValue);
table.cell(rowIndex, columnIndexVisible).data(newValue);
} else if (e.key === 'Escape') {
cell.html(cellData);
}
});
});

需要注意的是,數據保存與更新將需要通過Ajax請求后臺實現。

通過上面的代碼,你可以很簡單地實現編輯功能。