Question

我正在使用jQuery DataTable以表格形式公开数据;在桌面上，我有一个按钮，打开一个Bootstrap Modal来修改其中两个值，我使用Ajax将修改后的值发送给Spring Controller。

这是数据表中的第一个列定义：

"columnDefs": [
                        {
                           "targets": [ 0 ],
                           "visible": false
                           //"searchable": false
                        }],

                "columns":  [
                    { "data": "id" },
                    { "data": "date" },
                    { "data": "type" },
                    { "data": "name" },
                    { "data": "user_name" },
                    { "data": "status" },
                    { "data": "closing_date" },
                    { "data": "info" },
                    { "data": "note" },
                    { "render": function ( data, type, full, meta ) {


                        return "<button type='button' class='btn btn-info btn-md' data-toggle='modal' data-id=\'" + data.id + "\' data-target='#myModal'> Edit </button>";

                    }

因为我在加载应用程序后得到了控制台错误：

“数据未定义”

我在Stack上问过这个问题，建议我更改渲染功能：

{ "render": function ( data, type, full, meta ) {


                        return "<button type='button' class='btn btn-info btn-md' data-toggle='modal' data-id=\'" + full[0] + "\' data-target='#myModal'> Edit </button>";

                    }

现在我没有数据错误，但是当我尝试使用按钮并修改数据时，我得到了这个输出：

Object { newnote: "aaa", newstatus: "closed", idevent: undefined } <button type="submit" class="btn btn-success" data-dismiss="modal">

（请注意，注释和状态是可以修改的变量）。在eclipse中看到，我可以注意到控制台错误告诉我，总结一下，id字段没有传递给控制器。

实际上，在我用来发送数据的ajax函数中，即：

$('#myModal').on('click', '.btn.btn-success', function(event) {
        var form = $('#updateeventsform');
        var formdata = form.serializeObject();
        formdata.idevent = $(this).data('id');
        console.log(formdata, this);
        event.preventDefault();

        $.ajax({
                url: "../updateevents.json",
                type: "post",
                data: formdata,
                success : function() {

                    console.log("Invio riuscito.");
                }

            });

        });

如果我尝试使用某个数值更改formdata.idevent = $(this).data('id');，例如：formdata.idevent = 1;我可以将数据完美地发送到控制器，并且它们可以毫无问题地进行更改。

所以，问题是渲染函数无法正确获取id，这导致ajax函数无法接受并传递控制器;我决定这样检查这个功能，我得到了两个我无法理解的结果。

我放在这里的代码位于一个名为eventsdetailsdatatable.js的文件中;但是，如果我在full[0]代码上传递鼠标，我收到了这条消息：Origin：

src/main/webapp/static/js/custom/firewalldatatable.js

此文件是另一个数据表定义，用于防火墙部分。为什么会这样？可以取决于应用程序的结构以及数据在文件夹中的位置吗？

其他奇怪的事情是，如果我使用前一个表单full[0]而不是data.id，将鼠标移到它上面，我可以读到：

Returns:
service.$locale
Origin:
angular
Guess?:
true
See:
http://docs.angularjs.org/api/ng.$locale

但是......我没有使用Angular;再次，为什么会发生这种情况？

求和，我有一个渲染函数，它没有正确设置data-id值，不能识别数据的使用或者是完整的，并告诉我这些值的来源可能没有。

有什么想法吗？

Answer 1

您必须将data定义为null（我相信您不希望将该按钮放在note列中）：

...
{ "data": "note" },
{ "data": null,
  "render": function ( data, type, full, meta ) {
    return "<button type='button' class='btn btn-info btn-md' data-toggle='modal' data-id=\'" + full.id + "\' data-target='#myModal'> Edit </button>";
  }
}

并代理full代替data，即data-id=\'" + full.id + "\'

$(this).data('id');错了。这是jQuerys自己在元素上存储变量的发明。除非您已data-id专门添加data()，否则无法使用data()检索$(this).attr('data-id')。请改用private void gridViewRaces_RowFormatting(object sender, RowFormattingEventArgs e) { foreach (var cellColumn in e.RowElement.Data.Cells) { var cellInfo = cellColumn as GridViewCellInfo; if (cellInfo != null) { cellInfo.Style.DrawFill = true; if (cellInfo.ColumnInfo.Name == "columnContactProducerName") { cellInfo.Style.DrawFill = true; cellInfo.Style.BackColor = Color.Yellow; } else if (cellInfo.ColumnInfo.Name == "columnTransport") { cellInfo.Style.BackColor = Color.Yellow; } else { cellInfo.Style.BackColor = ColorTranslator.FromHtml((e.RowElement.Data.DataBoundItem as RaceForListDto).Color); } } } //e.RowElement.BackColor = ColorTranslator.FromHtml((e.RowElement.Data.DataBoundItem as RaceForListDto).Color); }。

Answer 2

由我自己解决。在与同事谈话时，我们认为，因为模态将文件上的激活按钮代码作为字符串，其余代码转换为另一个，这可能会带来一些问题。我们不知道这些假设是否正确，但从这个假设出发，我们制定了这个解决方案：

我们在代码的开头放置了一个全局变量id_event;
在渲染函数中，使用data.id值设置此变量，而不使用模态按钮中的data-id字段，方法是单击按钮：

{＆＃34; data＆＃34;：null，＆＃34; render＆＃34;：function（data，type，full，meta）{
```
                    return "<button type='button' class='btn btn-info btn-md' data-toggle='modal' data-target='#myModal' onclick=\'id_event="+data.id+"\'> Edit </button>";

                }
```
在用于向Controller发送数据的ajax函数中，使用IDnumber设置formdata.idevent字段：

formdata.idevent = id_event; //在使用IDnumber变量

这使我们的代码完美无缺。

使用jQuery DataTable的未定义值

2 个答案: