Question

我正在尝试编辑Datatable.Data中的行正在从数据库加载。之后点击行弹出将会到来。然后在单击提交按钮后编辑字段，它不会更新。在控制台网络错误是403。故宫。如何更新编辑的行？

var workorder_path = "/dashboard/workorder_list/0/?format=json";

var editor = new $.fn.dataTable.Editor( {
    ajax: {


edit: {
                        type: 'PUT',
                        dataType:"json",
                        contentType: "application/json",
                        url: '/dashboard/workorder_list/0/?format=json',
                        data: function ( d ) {
                            return JSON.stringify( d );
                        }
                    },


  },
    table: "#workorder_table",
    idSrc: "id",
    fields: [
        { label: "ID:", name: "id" },
        { label: "Task:",   name: "task.name" },
        { label: "Description:",   name: "description" },

        { label: "Start Date:",   name: "start_date",
                "type": "datetime" },
        { label: "End Date:",   name: "end_date",
                "type": "datetime" }
    ]
} );





var workorder_table = $('#workorder_table').dataTable({
    dom: 'Blfrtip',
    JQueryUI: true,
    bPaginate: false,
    sScrollX: "100%",
    responsive: true,
    select: true,
    buttons: [
        {
            text: 'New',
            action: function () {
                create_workorder_window();
            },
            className: 'btn btn-warning btn-outline'
        },
        { extend: "edit",   editor: editor, className: 'btn btn-warning btn-outline' },
       // { extend: "create", editor: editor },
        { extend: 'colvis', text: 'Show', className: 'btn btn-warning btn-outline'}
    ],
    ajax: {
        url: workorder_path,
        dataSrc: ''
    },
    columns: [
        {"data": "id", "class": "workorder_id"},
        {"data": "thumb", "render": function(data, type, row) {
                                        return `<a href=` + data + ` data-fancybox> <img src=` + data + ` width="80" height="45"> </a>`;
                                    }},
        {"data": "task.name"},
        {"data": "description"},
        {"data": "status", "class":"v-a-m", "render": function (status, type, row) {
                                                return `<div class="media media-auto">
                                                            <div class="media-left">
                                                                <div class="avatar">
                                                                    <img class="media-object img-circle"
                                                                         src=${ status.image }
                                                                         alt=${ status.name }
                                                                         title=${ status.name }>
                                                                </div>
                                                            </div>
                                                           <div class="media-body">
                                                                <span class="media-heading">${ status.name }</span>
                                                            </div>
                                                        </div>`;

        } },
        {"data": "start_date", "visible": false},
        {"data": "end_date", "visible": false},
        {"data": "assign_to", "width": "400px", "defaultContent": "None", "render": function (assign_to, type, row) {

                                                return `<div class="media media-auto">
                                                        <div class="media-left">
                                                            <div class="avatar">
                                                                <img class="media-object img-circle"
                                                                     src=${ assign_to.photo }
                                                                     alt=${ assign_to.official_name }>
                                                            </div>
                                                        </div>
                                                        <div class="media-body">
                                                            <span class="media-heading text-white">${ assign_to.official_name }</span>
                                                            <br>
                                                            <span class="text-gray-lighter"><span>${ assign_to.designation.designation }</span></span>
                                                        </div>
                                                    </div>`

        } },
        {"data": "creation_time", "visible": false},
        {"data": "modified_time", "visible": false}
    ]
});

Answer 1

您正在为两者调用相同的函数（在数据表中加载数据以及更新记录），我的意思是您在问题中提到的URL。

因此，在编辑ajax函数中，您需要调用另一个服务器端方法，您可以在其中传递数据。例如，

[HttpPut]
public returnType EditRecord(int id, WorkorderModel model)
 {
   //Here you can update the record then return a success message or whatever
   return message;
 }

注意：请参阅，我不知道您所使用的是哪种语言。当我用C＃编写时，我在HttpPut attribute之上添加了EditRecord method，使其成为PUT。你需要相应地改变它。

然后，从您的客户端编辑ajax，您可以这样调用它，

url: '/dashboard/EditRecord/'+d.id,

只需更改您在ajax编辑中编写的网址即可。请参阅此处 d.id 只是您的记录ID ，您将要更新。

希望有所帮助:)

如何更新DataTables中已编辑的行

1 个答案: