在 DataTable Edit 按钮上打开一个弹出窗体单击

Question

我正在尝试在DataTable Edit按钮单击上打开一个弹出表单。 我在 ASP.NET MVC 项目中这样做。

<table id="tbl_class" class="table table-striped table-bordered dt-responsive nowrap" style="width:100%;" cellspacing="0">
    <thead>
        <tr>
            <th>Id</th>
            <th>ClassName</th>
            <th>Student</th>
            <th>Edit</th>
            <th>Delete</th>
        </tr>
    </thead>
</table>
<script>
        $('#tbl_vehicle').DataTable({
            "processing": true, // for show progress bar
            "serverSide": true, // for process server side
            "filter": true, // this is for disable filter (search box)
            "orderMulti": false, // for disable multiple column at once
            "pageLength": 5,
            "ajax": {
                "url": "/Students/LoadData",
                "type": "POST",
                "datatype": "json"
            },
            "columnDefs":
                    [{
                        "targets": [0],
                        "visible": false,
                        "searchable": false
                    },
                   ],

            "columns": [
                  { "data": "Id", "name": "Id", "autoWidth": true },
                  { "data": "ClassName", "name": "ClassName", "autoWidth": true },
                  { "data": "Student", "title": "Student", "name": "Student", "autoWidth": true },                 
                  {
                      "render": function (data, type, full, meta)
                      {
                          var setUrl = "/Students/AddorEdit/' + full.Id +'";
                          var result = "<a class='btn btn-info btn-sm' onclick='PopupForm('" + setUrl + "')'><i class='fa fa-edit'></i> Edit </a>"
                          return result;
                      }
                  },
            ]

        });
        function PopupForm(url) {
            alert("value of url " + url);
            var formDiv = $('<div/>');
            $.get(url).done(function (response) {
                formDiv.html(response);

                Popup = formDiv.dialog({
                    autoOpen: true,
                    resizable: false,
                    title: 'fill details',
                    height: 500,
                    width: 700,
                    close: function () {
                        Popup.dialog('destroy').remove();
                    }
                });
            });
        }
    </script>

但问题是没有从 DataTable 行的Edit按钮调用PopupForm函数，因为没有弹出警报消息。 此外， PopupForm参数也未正确呈现。 这段代码有什么问题？

Answer 1

看起来您在该段的以下行不正确。

"render": function (data, type, full, meta)
                      {
                          var setUrl = "/Students/AddorEdit/' + full.Id +'";
                          var result = "<a class='btn btn-info btn-sm' onclick='PopupForm('" + setUrl + "')'><i class='fa fa-edit'></i> Edit </a>"
                          return result;
                      }

这是产生这样的元素。

<a class='btn btn-info btn-sm' onclick='PopupForm('/Students/AddorEdit/' + full.Id +'')'><i class='fa fa-edit'></i> Edit </a>

这不是有效的 DOM 元素。

将您的代码段更改为：

"render": function (data, type, full, meta)
                          {
                              var setUrl = "/Students/AddorEdit/some_id";
                              var result = '<a class="btn btn-info btn-sm" onclick="PopupForm(\'' + setUrl + '\')"><i class="fa fa-edit"></i> Edit </a>'
                              return result
                          }

这将产生输出元素为：

<a class="btn btn-info btn-sm" onclick="PopupForm('/Students/AddorEdit/some_id')"><i class="fa fa-edit"></i> Edit </a>

编辑

请注意，您的以下行也不正确：

var setUrl = "/Students/AddorEdit/' + full.Id +'";

将其更改为：

var setUrl = "/Students/AddorEdit/" + full.Id;