如何在 KendoUI 中获取选定的行及其数据项？答案

【问题标题】：How to get selected row and its dataItem in the KendoUI?如何在 KendoUI 中获取选定的行及其数据项？
【发布时间】：2017-04-15 03:42:05
【问题描述】：

这是我的剑道网格

dataSource = new kendo.data.DataSource({
                    transport: {
                        read: {
                            url: "/Actionables/GetAccessibleTemplateForAssets/",
                            data: { assetID: '@Model.AssetID', types: '@Model.TypeName' },
                            dataType:"Json",
                            type: "GET"
                        },
                    },                    
                    schema: {
                        model: {
                            id: "ID",
                            fields: {
                                ID: { type: "int" },
                                Name: { type: "string" },
                                Description: { type: "string" },
                                Types: { type: "string" },
                                EntryGroupID: {type:"int"}
                            }
                        }
                    },
                    pageSize: 3,

                });
                $("#grid").kendoGrid({
                    dataSource: dataSource,
                    dataBound: onDataBound,
                    autoSync: true,
                    serverPaging: true,
                    serverSorting: true,
                    serverFiltering: true,
                    height: 250,
                    sortable: true,
                    filterable: {
                        mode: "row"
                    },
                    pageable: {
                        refresh: true,
                        pageSizes: true,
                        buttonCount: 5
                    },
                    columns:
                    [{
                        field: "Types",
                        width: 100,
                        title: "Type",
                        template: "<image src='/Content/Images/Pins/#:data.Types#.png'/>",
                        filterable: false

                    },{
                        field: "Name",
                        width: 150,
                        title: "Name",
                        filterable: {
                            cell: {
                                operator: "contains"
                            }
                        }
                    }, {
                        field: "Description",
                        width: 150,
                        title: "Description",
                        filterable: {
                            cell: {
                                operator: "contains"
                            }
                        }
                    },{
                        command: [
                            {  name: "remove", text: "&nbsp;", click: removeTab, iconClass: "fa fa-trash" },
                            {  name:"view", text: "&nbsp;", click: addTab , iconClass: "fa fa-plus-circle"}],
                            title: "Action",
                            width: 100,


                    }],
                    editable: {
                        mode:"popup"                            
                    },
                }).data("kendoGrid");

                wnd = $("#details").kendoWindow({
                    title: "View Tab",
                    modal: true,
                    visible: false,
                    resizable: false,
                    width: 300
                }).data("kendoWindow");
                detailsTemplate = kendo.template($("#ViewDetails").html());

当用户在命令列中单击“+”号登录时，将调用此方法。它会打开一个弹出窗口。

function addTab(e) {
    e.preventDefault();
    var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
    wnd.content(detailsTemplate(dataItem));
    wnd.center().open();
}

弹出窗口包含两个按钮，在该按钮上单击事件 OpenRecentlyClosed() 函数将被调用。

<script type="text/x-kendo-template" id="ViewDetails">
<div id="details-container">
    <button id="oldEntryGroup" class="k-button" onclick="OpenRecentlyClosed()">Open recently closed</button>
    <br /><br />
    <button id="NewEntryGroup" class="k-button">Open new</button>
</div>

我正在尝试访问单击/选定行的 dataItem 的以下函数。请帮忙。提前谢谢你

function OpenRecentlyClosed() {
    //trying to access dataItem here.. please help 
    //var grid = $("#grid").data("kendoGrid");
    //var dataItem = grid.dataItem(grid.select());
    $.ajax({
            cache: false,
            type: "GET",
            url: "some url",
            data: {x: dataItem.ID},// need to pass value of dataItem.ID 
            success: function () {
                //my code
            }
    });
}

【问题讨论】：

标签： javascript kendo-ui kendo-grid

【解决方案1】：

捕获行点击并从该行获取数据的事件：

$(document).on("click", "#grid tbody tr", function (e) {
    var element = e.target || e.srcElement;
    var data = $("#grid").data("kendoGrid").dataItem($(element).closest("tr"));
});

【讨论】：

谢谢@Kyle，你的代码可以工作，但我做了一些小的改动，而是在我之前声明的函数内部声明了var data $(document).ready(function())，这样我就可以随时访问数据。

【解决方案2】：

我认为您需要在 javacript 函数 addTab 中保留对所选数据项的引用。

function addTab(e) {
e.preventDefault();
var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
wnd.selectedDataItem = dataItem;
wnd.content(detailsTemplate(dataItem));
wnd.center().open();
}

然后在 OpenRecentlyClosed 中您可以访问 dataItem。

function OpenRecentlyClosed() {    
var dataItem = wnd.selectedDataItem;
$.ajax({
        cache: false,
        type: "GET",
        url: "some url",
        data: {x: dataItem.ID},// need to pass value of dataItem.ID 
        success: function () {
            //my code
        }
    });
}

【讨论】：

谢谢 Martin D。不幸的是，您的答案也有效，我只能选择一个作为答案。

【解决方案3】：

请尝试以下代码 sn-p。

function OpenRecentlyClosed() {

var grid = $("#grid").data("kendoGrid");
var selectedRows = grid.select();


selectedRows.each(function(index, row) {
  var selectedItem = grid.dataItem(row);
  alert(selectedItem.ID);
});

...
...
}

如果有任何问题，请告诉我。

【讨论】：

var selectedRows=grid.select() Getting TypeError 'r' is undefined

【解决方案4】：

注意：grid.dataItem(row) 只会获取行中的内容。如果您有一个数据库并且真的想要 dataItem 以及另一个数据集中与您的项目有某种关系的某些项目，您可以执行例如一个AjaxCall。

【讨论】：