使用带有“编辑”按钮的Jquery数据表的可重用局部视图？

Question

我已经用Jquery数据表创建了局部视图。 我只是将GridResulViewtModel传递到需要Jquery数据表网格的局部视图。 工作正常。 现在，我需要带有编辑按钮的列，以便可以实现编辑功能，但是我无法弄清楚如何实现它。

在GridResulViewtModel之后，我在每个控制器上设置值并在局部视图上使用。

 public class GridResulViewtModel
   {
    private List<ColumnsHeader> _Header;
    private string _JsonHeader;
    public String TableId { get; set; }

    public List<string> DisplayHeader { get; set; }

    public List<ColumnsHeader> Header
    {
        get { return _Header; }

        set
        {
            _Header = value;

            StringBuilder headerProperty = new StringBuilder();
            headerProperty.Append("[");
            foreach (var item in Header)
            {
                if (!string.IsNullOrEmpty(item.DefaultContent))
                    headerProperty.Append("{ 'mDataProp': '" + item.DataField + "', sDefaultContent: '" + item.DefaultContent + "' },");
                else
                    headerProperty.Append("{ 'mData': '" + item.DataField + "', sDefaultContent: '" + item.DefaultContent + "' },");
            }
            headerProperty.Append("]");

            _JsonHeader = headerProperty.ToString().Replace(",]", "]");
        }
    }

    public String JsonData { get; set; }

    public String JsonHeader { get { return _JsonHeader; } }

    public string URL { get; set; }
}

像这样从控制器设定值

    public ActionResult Index()
    {
        try
        {
            GridResulViewtModel model = new GridResulViewtModel();
            List<ColumnsHeader> lstColumnsHeader = new List<ColumnsHeader>();
            var data = customerService.GetCustomers();

          //  var Edit = new ColumnsHeader() { DataField = null, DefaultContent = "<button style=\"color:green;\">I am text</button>" };
            var Edit = new ColumnsHeader() { DataField = "", DefaultContent = "<a href="#" data-id=\"CustomerID\">How to make it Edit button?</a>" };
            var CustomerID = new ColumnsHeader() { DataField = "CustomerID", DefaultContent = "" };
            var firstName = new ColumnsHeader(){ DataField="FirstName", DefaultContent =""};
            var LastName = new ColumnsHeader() { DataField = "LastName", DefaultContent = "" };
            var CustomerCode = new ColumnsHeader() { DataField = "CustomerCode", DefaultContent = "" };


            lstColumnsHeader.Add(CustomerID);
            lstColumnsHeader.Add(firstName);
            lstColumnsHeader.Add(LastName);
            lstColumnsHeader.Add(CustomerCode);
            lstColumnsHeader.Add(Edit);
            model.Header = lstColumnsHeader;
            //model.Header = new List<string> { "CustomerID", "FirstName", "LastName", "CustomerCode" };


            model.DisplayHeader = new List<string> { "Edit", "ID", "First Name", "Last Name", "Customer Code" };
            model.TableId = "tblCustomer";
            model.JsonData = JsonConvert.SerializeObject(data);
            model.URL = "/Customer/GetCustomer";

            return ViewResult("Index", model);

        }
        catch (Exception ex)
        {

            throw;
        }

这是部分视图，我的观点是多种多样的

      <script type="text/javascript">
$(document).ready(function () {



    try {
        var table = $(@Model.TableId);
        var tableData = @Html.Raw(Model.JsonData)
        var tableHeader = @Html.Raw(Model.JsonHeader)
        oTable = $(table).dataTable(
                            {
                                "processing": true,
                                "serverSide": true,
                                "ajax":
                                    {
                                        "url": "@Model.URL",
                                        "type": "POST",
                                        "dataType": "JSON"
                                    },
                                "aaData": tableData,
                                "aoColumns": tableHeader,
                                "bPaginate": true,
                                //"bLengthChange": true,
                                //"bFilter": true,
                                //"bSort": true,
                                //"bInfo": true,
                                //"bAutoWidth": false,
                                //"bStateSave": false,
                                //"idisplayLength": 15,
                                "sPaginationType": "full_numbers",
                                  "bDeferRender": true,
                               // "sDom": 'T<"clear">lfrtip',
                                //"oTableTools":
                                // {
                                //     "sSwfPath": "../Content/DataTables-1.9.4/extras/TableTools/media/swf/copy_csv_xls_pdf.swf",

                                //     "aButtons": [ "copy",
                                //                     {
                                //                         "sExtends":    "collection",
                                //                         "sButtonText": "Save",
                                //                         "aButtons":    [ "csv", "pdf" ]
                                //                     }
                                //     ]
                                // }
                            });
    }
    catch (err) {
        //alert("Error in operation! " + err);
    }

});
    </script>
</div>
}

我仍然不明白如何在“编辑”按钮上将Id设置为data-id属性？

Answer 1

下面的代码将DataTable选项更新为1.10+版本，并添加了一个事件处理程序，使您可以获取一行的数据对象。

   oTable = $(table).dataTable(
                  {
                      "processing": true,
                      "serverSide": true,
                      "ajax":
                          {
                              "url": "@Model.URL",
                              "type": "POST",
                              "dataType": "JSON"
                          },
                      "data": tableData,
                      "columns": tableHeader,
                      "paging": true,
                      //"bLengthChange": true,
                      //"bFilter": true,
                      //"bSort": true,
                      //"bInfo": true,
                      //"bAutoWidth": false,
                      //"bStateSave": false,
                      //"idisplayLength": 15,
                      "pagingType": "full_numbers",
                      "deferRender": true,
                      // "sDom": 'T<"clear">lfrtip',
                      //"oTableTools":
                      // {
                      //     "sSwfPath": "../Content/DataTables-1.9.4/extras/TableTools/media/swf/copy_csv_xls_pdf.swf",

                      //     "aButtons": [ "copy",
                      //                     {
                      //                         "sExtends":    "collection",
                      //                         "sButtonText": "Save",
                      //                         "aButtons":    [ "csv", "pdf" ]
                      //                     }
                      //     ]
                      // }
                  });

    // row button on click handler
    $("#example tbody").on("click", "button", function () {
        var tr = $(this).closest("tr");
        var data = oTable.rows(tr).data()[0];
        // do what you need to do with the row data
    });