使用帶有“編輯”按鈕的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
    });