在 GridView DevExpress 中添加操作

Question

我想在我的函数 javascript 中添加一个删除、编辑和添加按钮的操作

这是我的 GridView 内容 DeleteButton、EditButton 和 AddButton 的代码：

@Html.DevExpress().GridView(settings =>
       {
           settings.Name = "GridView";
           settings.KeyFieldName = "Id";
           settings.SettingsBehavior.AllowSelectByRowClick = true;
           settings.SettingsBehavior.AllowFocusedRow = true;

           settings.SettingsBehavior.AllowSelectSingleRowOnly = true;

           settings.ClientSideEvents.RowClick = "function(s, e){rowSelected(s, e)}";

           settings.Columns.Add("CodeClient");
           settings.Columns.Add("Nom");
           settings.Columns.Add("Prenom");
           settings.Columns.Add("DateNaissance");
           settings.CommandColumn.Visible = true;
           settings.SettingsEditing.AddNewRowRouteValues = new { Controller = "Client", Action = "" };
           settings.SettingsEditing.DeleteRowRouteValues = new { Controller = "Client", Action = "" };
           settings.SettingsEditing.UpdateRowRouteValues = new { Controller = "Client", Action = "" };
           // Show the command column, and enable the "Edit" and "Delete" buttons within the command column. 
           settings.CommandColumn.Visible = true;
           settings.CommandColumn.ShowEditButton = true;
           settings.CommandColumn.ShowDeleteButton = true;
           // Show the "New" button within the column header. 
           settings.CommandColumn.ShowNewButtonInHeader = true;
           // Change the "New" button settings. 

           ///DeleteButton.Image.Url = "~/content/delete.png";
           settings.SettingsCommandButton.NewButton.Image.IconID = IconID.ActionsAdditem16x16;
           settings.SettingsCommandButton.EditButton.Image.IconID = IconID.ActionsEditname16x16;
           settings.SettingsCommandButton.DeleteButton.Image.IconID = IconID.ActionsDelete16x16gray;





       }).Bind(Model).GetHtml()

这是我在这三个按钮之一中单击时要执行的方法 javascript

<script>
  function AjouterClient(s, e) {

        var _id = 0;
        $.ajax
            ({
                url: "/Client/ajouter",
                type: "POST",
                dataType: "text",
                success: function (response) {

                    location.replace("/Client/ajouter");

                }
            })
    }
    function ModifierClient(s, e) {
        debugger;
        var _id = idClient;
        $.ajax
            ({
                url: "/Client/ModifierClient?id=" + _id,
                type: "POST",
                dataType: "text",
                success: function (response) {

                    location.replace("/Client/ModifierClient?id=" + _id);

                }
            })
    }



    function Delete(s, e) {
        debugger;

        var _id = idClient;
        $.ajax
            ({
                url: "/Client/delete?id=" + _id,
                type: "POST",
                dataType: "text",
                success: function (response) {
                    debugger;
                    if (response == "True")
                        location.replace("/Client/Listeclients");
                    else
                        alert("ERROR");
                }
            })
    }



</script>

谁能帮忙把这三个按钮和这个javascript方法联系起来，谢谢。

Answer 1

要调用 JS 函数，你可以尝试这样的方法

settings.Columns.Add(column =>
    {
        column.Settings.AllowSort = DevExpress.Utils.DefaultBoolean.False;
        column.SetDataItemTemplateContent(c =>
        {               
            ViewContext.Writer.Write(string.Format("<button class=\"btn btn-primary btn-xs additem\" title=\"Add\" data-id=\"{0}\"><i class=\"fa fa-edit\"></i></button>", DataBinder.Eval(c.DataItem, "Id")));
            ViewContext.Writer.Write(string.Format("<button class=\"btn btn-danger btn-xs deleteitem\" title=\"Delete\" data-id=\"{0}\"><i class=\"fa fa-trash\"></i></button>", DataBinder.Eval(c.DataItem, "Id")));
            ViewContext.Writer.Write(string.Format("<button class=\"btn btn-primary btn-xs updateitem\" title=\"Update\" data-id=\"{0}\"><i class=\"fa fa-edit\"></i></button>", DataBinder.Eval(c.DataItem, "Id")));
        });
    });

加载页面

$(function () {

        $(document).delegate(".additem", "click", function () { AjouterClient($(this).data('id')); });
        $(document).delegate(".deleteitem", "click", function () { Delete($(this).data('id')); });
        $(document).delegate(".updateitem", "click", function () { ModifierClient($(this).data('id')); });
    });

还有你的 js 方法

    function AjouterClient(id){
        ...
    }
    function Delete(id){
        ...
    }
    function ModifierClient(id){
        ...
    }