javascript - Jquery 数据表从按钮单击获取行 ID

Question

我在数据表的每一行上呈现了两个按钮，编辑和删除。是否可以在单击“删除”或“编辑”按钮时获取员工的 ID 或行的 ID，并将该 ID 值传递到我拥有的 Web 方法中，该方法采用 ID 参数以从数据库中删除记录？

到目前为止我的 jquery 代码:

 $(document).ready(function () {
        $.support.cors = true;
        $.ajax({
            url: '<%=ResolveUrl("GetEmployee.aspx") %>',
            type: 'POST',
            contentType: 'application/json; charset=utf-8',
            dataType: 'json',
            success: function (data) {
              var table = $('#datatable').dataTable({
                    data: data,
                    columns: [
                        { 'data': 'Id' },
                        { 'data': 'image' },
                        { 'data': 'lastName' },
                        { 'data': 'firstName' },
                        { 'data': 'jobTitle' },
                        {
                            'data': 'StartDate',
                            'render': function (jsonDate) {
                                var date = new Date(parseInt(jsonDate.substr(6)));
                                var month = date.getMonth() + 1;
                                return date.getDate() + "/" + month + "/" + date.getFullYear();
                            }
                        },
                        {
                            'data': 'EndDate',
                            'render': function (jsonDate) {
                                var date = new Date(parseInt(jsonDate.substr(6)));
                                var month = date.getMonth() + 1;
                                return date.getDate() + "/" + month + "/" + date.getFullYear();
                            }
                        },
                        {
                            'data': null,
                            'render': function (data, type, row) {
                                return '<button id="' + row.id +'" onclick="editClick()">Edit</button>'
                            }
                        },
                        {
                            'data': null,
                            'render': function (data, type, row) {
                                return '<button id="' + row.id + '" class="dodo" onclick="deleteClick()">Delete</button>'
                            }
                        }
                    ]
                });
            }
        });

        $('#datatable').on('click', 'button', function () {
            var id = $(this).data();
            //var id = table.row($(this)).data();
            alert(JSON.stringify(id));
        });
    });

现在，当我尝试获取 id 时，它会返回一个 undefined。

我的网络方法:

  [WebMethod]
    public static void DeleteRecord(string id)
    {
        var query = "DELETE FROM employee WHERE ID=?";
        OdbcConnection myConn = new OdbcConnection(myConnection);
        OdbcTransaction transaction = null;
        myConn.Open();

        transaction = myConn.BeginTransaction();
        OdbcCommand command = new OdbcCommand(query, myConn, transaction);
        command.Parameters.Add("ID", OdbcType.Int).Value = id;
        command.ExecuteNonQuery();

        transaction.Commit();

        myConn.Close();
    }

谢谢!

Answer 1

是的，您可以在单击按钮时同时获取员工 ID 或行 ID。为此，您需要在定义编辑和删除按钮时执行一些小的更改。

{
     'data': null,
     'render': function (data, type, row) {
                   return '<button id="' + row.id +'" onclick="editClick(this)">Edit</button>'
               }
},
{
     'data': null,
     'render': function (data, type, row) {
                       return '<button id="' + row.id + '" class="dodo" onclick="deleteClick(this)">Delete</button>'
               }
}

Javascript / jQuery

function editClick (obj) {
      var rowID = $(obj).attr('id');
      var employeeID = $(obj).closest('tr').find('td:first').html());
}

function deleteClick (obj) {
      var rowID = $(obj).attr('id');
      var employeeID = $(obj).closest('tr').find('td:first').html());
}