jquery - 带有命令按钮和服务器排序的 Kendo UI Grid 问题

Question

我使用 ASP.net MVC4。

我使用 odata 数据源创建了一个简单的 Kendo UI Web 网格。我还添加了 2 个命令按钮：每行的编辑和删除。

如果我对列进行排序，并且如果我单击编辑按钮：剑道数据项将在排序之前返回给我同一行的项。

这对我来说是个大问题，因为可以编辑或删除错误的行。

Answer 1

$.fn.BuildGrid = function(){
    var datasource = new kendo.data.DataSource({
    type: "odata",
    serverPaging: true,
    serverSorting: true,
    pageSize: 10,
    transport:
    {
        read:
        {
            url: "/odata/contactaddresses?$filter=FK_User eq guid'" + UserId + "'",
            dataType: "json",
            cache: false
        }
    },
    schema:
    {
        data: function (data) {
            return data["value"];
        },
        total: function (data) {
            return data["odata.count"];
        },
        model: {
            fields: {
                Id: { type: "number" },
                AddressLabel: { type: "string" },
                Town: { type: "string" },
                Country: { type: "string" },
                TimeZone: { type: "string" },
                UTCOffset: { type: "string" },
                UTCOffsetDST: { type: "string" },
                isCorrespondence: {
                    type: "boolean",
                    parse: $.fn.kenduUINullableBoolColumnParser,
                    nullable: true
                },
                isDelivery: {
                    type: "boolean",
                    parse: $.fn.kenduUINullableBoolColumnParser,
                    nullable: true
                },
                isBilling: {
                    type: "boolean",
                    parse: $.fn.kenduUINullableBoolColumnParser,
                    nullable: true
                }
            }
        }
    }
});

var grid = {
    dataSource: datasource,

    filterable: true,
    sortable: true,
    pageable: { messages: { display: "{0:d0} - {1:d0} / {2:d0} elements" } },
    columns: [
        {
            field: "Id",
            filterable: false,
            hidden: true
        },
        {
            field: "AddressLabel",
            title: "Address Label",
            filterable: true,
            width: 130
        },
        {
            field: "Town",
            title: "Town",
            filterable: true,
            width: 100
        },
        {
            field: "Country",
            title: "Country",
            filterable: true,
            width: 100
        },
        {
            field: "TimeZone",
            title: "Time zone",
            filterable: true,
            width: 50
        },
        {
            field: "UTCoffset",
            title: "UTC offset",
            filterable: true,
            width: 50
        },
        {
            field: "UTC_DST_offset",
            title: "UTC DST offset",
            filterable: true,
            width: 50
        },
        {
            field: "isCorrespondence",
            title: "Corr.",
            filterable: true,
            width: 50
        },
        {
            field: "isBilling",
            title: "Bill.",
            filterable: true,
            width: 50
        },
        {
            field: "isDelivery",
            title: "Deliv.",
            filterable: true,
            width: 50
        },
        {
            field: "SortIndex",
            title: "Ordr.",
            filterable: false,
            width: 45
        },
        {
            command: {
                name: "edt",
                click: $.fn.GridRowClick
            },
            title: "",
            width: 85
        }
    ]
};
$("#Grid").css("overflow", "hidden");
$("#Grid").kendoGrid(grid);
}
$.fn.GridRowClick = function (evt, ui) {
    evt.preventDefault();
    var dataItem = this.dataItem($(evt.currentTarget).closest("tr"));
    alert(dataItem.Id);
}

Answer 2

将此添加到一个字段（在此示例中为 AddressLabel）：

template: "<span class='dataId value' data-id='#= Id #'>#= AddressLabel #</span>"

---

$.fn.GridRowClick = function (evt, ui) {
evt.preventDefault();
//var dataItem = this.dataItem($(evt.currentTarget).closest("tr")); 
var realId = $(evt.currentTarget).closest("tr").find(".dataId").data("id");
alert(realId);
}