剑道网格行的PK

时间:2015-06-11 13:51:25

标签: jquery ajax asp.net-mvc asp.net-mvc-4 kendo-ui

<%: Html.Kendo().Grid<Model>()
        .Name("Grid")
        .BindTo((IEnumerable<Model>)ViewBag.List)
        .Columns(columns =>
        {
            columns.Bound(p => p.PK).Title("pk");
            columns.Bound(p => p.NAME).Title("Name");


            columns.Command(command => command.Custom("Delete").Click("Delete")).Width(100);

        })

        %>     


<div id="modalWindow">
            <h2>Delete?</h2>
            <button id="yes" class="k-button">Yes</button>
            <button id="no" class="k-button">No</button>
        </div>


        <script>             

            var wnd;
            $(document).ready(function () {
                wnd = $("#modalWindow").kendoWindow({
                    title: "Delete confirmation",
                    modal: true,
                    visible: false,
                    resizable: false,
                    width: 300
                }).data("kendoWindow");

            });


            function Delete(e) {
                e.preventDefault();

                var grid = this;
                var row = $(e.currentTarget).closest("tr");
                wnd.center().open();



                $("#yes").unbind('click').click(function () {       

                    $.ajax({                          

                        type: 'POST',
                        url: '/Home/Delete',
                        data: ???
                        contentType: 'application/json; charset=utf-8',


                        success: function (result) {

                        },
                        error: function (err, result) {
                        alert("Error in delete" + err.responseText);
                        }

                    });                   

                    grid.removeRow(row);
                    wnd.close();
                });


                $("#no").unbind('click').click(function () {
                    wnd.close();
                });
            }      
        </script>

你好,

我想删除Kendo Grid的相关自定义删除按钮的行。 该脚本运行良好,但我有数据问题。 我不知道如何获得行的PK,我需要它来删除记录。

如何点击我的自定义按钮来获取它?

此致

2 个答案:

答案 0 :(得分:0)

您是否知道基础dataItem的ID属性?一旦有了行,就可以从网格的数据源中获取dataItem。 因此,在var row = $(e.currentTarget).closest('tr');之后,您可以添加var dataItem = grid.dataItem(row);然后您应该能够获取dataItem dataItem.id的id属性(或其他类似内容);

答案 1 :(得分:0)

您需要使用dataItem函数将tr元素转换为数据对象:

function Delete(e) {
    e.preventDefault();

    var grid = this;
    var row = $(e.currentTarget).closest("tr");
    var obj = grid.dataItem(row); //<---
    wnd.center().open();

    $("#yes").unbind('click').click(function () {       
       $.ajax({                          
          type: 'POST',
          url: '/Home/Delete',
          data: obj.PK, //<---
          contentType: 'application/json; charset=utf-8',
          success: function (result) {
          },
          error: function (err, result) {
             alert("Error in delete" + err.responseText);
          }
       });                   

       grid.removeRow(row);
       wnd.close();
    });

    $("#no").unbind('click').click(function () {
       wnd.close();
    });
}