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

Posted 2023-05-07

【中文标题】如何在 KendoUI 中获取选定的行及其数据项？

【英文标题】：How to get selected row and its dataItem in the 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
            
    );

【参考方案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。