编辑 DataTables 源数据，使用弹出窗口内的表单 [英] Edit DataTables source data, using form inside pop-up window

问题描述

我有一个数据表，它使用 ajax 从数据库中获取记录.我想添加编辑工具提示，如 jquery-datatables-editor 扩展到 datatables 但免费.有没有插件可以做到这一点?如果没有，有人可以帮我手动执行此操作吗?

这是我的 JavaScript 代码:

$('#table_id').DataTable({服务器端":真，处理":真的，ajax":函数(数据，回调，设置){$.ajax({网址:'/一些网址'，类型:'获取'，数据:数据，成功:功能(数据){控制台日志(数据)}});},列": [{"title": "编辑",数据":空，"className": "中心","defaultContent": '编辑/删除</a>'}, {"title": "姓名",数据":名称"}, {"title": "id",数据":ID"},]});

解决方案

由于您的问题(和发布的代码示例)主要与可编辑行功能的前端部分有关，因此我将主要关注它，因为后端逻辑几乎是直接(在收到 AJAX 请求时更新/插入数据到存储中).

为了按照逻辑实现该功能，我可能会建议:

• 附加(通过createdRow 选项)一些锚点(row().index() 或源对象 id 属性等)添加到某些 属性中的源数据(例如 rowindex)，以便您稍后知道修改服务器端的条目:

$('table').DataTable({...createdRow: (tr, _, rowIndex) =>$(tr).attr('rowindex', rowIndex)})

• 将一些锚属性(例如 data-src)附加到您的编辑器弹出窗口(我将使用 bootstrap-4 模式用于此目的) 节点将这些输入字段链接到对应的源对象属性:

PropertyX:

• 点击 edit 按钮后，获取相应的行数据，使用该数据填充编辑器弹出的 字段，将锚点传递到已编辑的行(rowindex 属性值)到弹出属性:

//for table id 'example' 句柄点击//具有编辑"类的编辑按钮$('#example').on('click', '.edit', function () {//调用 row() API 方法获取被点击的行//针对分配给dataTable的DataTables对象const rowClicked = dataTable.row($(this).closest('tr'));//通过相应的行数据填充编辑表单//基于'data-src'属性的rowClicked属性$.each($('#editform input'), function () {$(this).val(rowClicked.data()[$(this).attr('data-src')]);});//设置模态属性rowindex为对应的行索引$('#editform').attr('rowindex', rowClicked.index());//打开编辑表单模态$('#editform').modal('toggle');});

• 完成行数据编辑后，将值存储到对象中:

const modifiedData = {};$.each($('#editform input'), function(){Object.assign(modifiedData, {[$(this).attr('data-src')]:$(this).val()});});

• POST 数据(连同相应的 rowindex)到服务器并重新加载 (ajax.reload()) 成功后的最新数据表:

$.ajax({网址:'/编辑行'，方法:'POST'，数据:{id: $('#editform').attr('rowindex'), ...modifiedData},成功:() =>{$('#editform').modal('hide');dataTable.ajax.reload();}});

完成该方法的现场演示，您可以通过以下 在浏览器的 DevTools 中检查链接以行删除按钮的形式提供一些奖励.

HTML 和 jQuery 代码示例可能如下所示(不可执行，因为没有后端支持):

$(document).ready(() => {//数据表初始化const dataTable = $('#example').DataTable({阿贾克斯:{网址:'/获取数据'，类型:'获取'，数据源:''},dom: 't',//使用属性rowindex"锚定到源数据行索引createdRow: (tr, _, rowIndex) =>$(tr).attr('rowindex', rowIndex),列: [{数据:'姓名'，标题:'姓名'}，//将编辑"/删除"按钮附加到单元格的最右边缘{data: 'title', title: 'Title', 渲染: (cellData, _, __, meta) =>cellData+'<i class="delete fa fa-trash"></i><i class="edit fa fa-pencil"></i></button>'}],});//删除按钮处理程序$('#example').on('click', '.delete', function() {//提取要删除的行的索引//来自'rowindex'属性const rowIndex = $(this).closest('tr').attr('rowindex');//对后端进行AJAX调用$.ajax({url: '/deleterow',方法:'删除'，数据:{id:rowIndex}，//使用最新数据重新绘制数据表成功:() =>dataTable.ajax.reload()});});//编辑按钮处理程序(打开编辑表单模式)$('#example').on('click', '.edit', function(){//获取被点击的行const rowClicked = dataTable.row($(this).closest('tr'));//通过相应的行数据填充编辑表单//基于'data-src'属性的rowClicked属性$.each($('#editform input'), function(){$(this).val(rowClicked.data()[$(this).attr('data-src')]);});//设置模态属性rowindex为对应的行索引$('#editform').attr('rowindex', rowClicked.index());//打开编辑表单模态$('#editform').modal('toggle');});//提交编辑处理程序$('#editform').on('click', '#submitedits', function(){//将修改后的数据抓取到对象中常量修改数据 = {};$.each($('#editform input'), function(){Object.assign(modifiedData, {[$(this).attr('data-src')]:$(this).val()});});//将修改后的数据发送到后端$.ajax({网址:'/编辑行'，方法:'POST'，数据:{id: $('#editform').attr('rowindex'), ...modifiedData},成功:() =>{//关闭模态$('#editform').modal('hide');//重新绘制数据表dataTable.ajax.reload();}});});});

<头><script type="application/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script><script type="application/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQd1HsFuji="cross"<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+jRMB"cross/脚本><script src="https://use.fontawesome.com/937a319e2f.js"></script><script type="application/javascript" src="/main.js"></script><link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css"><link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"><link rel="stylesheet" type="text/css" href="/main.css"><身体><!-- 表--><table id="示例"></table><!-- 模态--><div class="modalfade" id="editform" tabindex="-1" role="dialog"><div class="modal-dialog" role="document"><div class="modal-content"><div class="modal-header"><h5 class="modal-title">行详情</h5>

<div class="modal-body"><表格><div class="form-group"><label>Name:</label><input data-src="name" class="form-control"></input></div><div class="form-group"><label>Title:</label><input data-src="title" class="form-control"></input></div></表单>

<div class="modal-footer"><button type="button" class="btn btn-outline-dark" data-dismiss="modal">关闭</button><button type="button" class="btn btn-outline-dark" id="submitedits">保存更改</button>

</html>