Question

在我的项目中，我在剃刀页面中设置了一个简单的数据网格，如下所示：

<div id="Datagrid" dx-item-alias="itemData">
    @(Html.DevExtreme().DataGrid<Batch>().ID("gridContainer")
    .Columns(columns =>
    {
        columns.Add().CellTemplate(
          @<text>
            @(Html.DevExtreme().Button()
            .ID("sendButton")
            .Text("Select Batch")
            .OnClick("onItemClick")     
            )                          
          </text>);
        columns.AddFor(m => m.Id);
        columns.AddFor(m => m.Name).Caption("Name");
    })
    .DataSource(d => d.Mvc().Controller("Batches").LoadAction("GetAllEntries").Key("BatchId")) 
    ) 
</div>

数据通过我创建的WebApi加载到datagrid中。我从问题中删除了该代码，因为它没有任何价值。

在第一列中，我为要渲染的每一行添加了一个按钮。我想发生的是，当我单击此按钮时，它旁边的单元格ID的值将呈现在屏幕/控制台/任何地方。我只需要抓住价值。

对此的大致了解是：

       | Id  | Name
-------|-----|------
button |  1  | John
button |  2  | Chris

因此，当我按下包含Id值为1的单元格旁边的按钮时，我想获取此值并在屏幕或控制台上打印出来。当我按下ID值2旁边的按钮时，我想获取“ 2”的值并执行相同的操作。

我有以下js代码试图实现这一目标：

function onItemClick(e) {
    DevExpress.ui.notify("The " + e.component.option("value"));
  }

但是，这不起作用。我该怎么做才能获得正确的单元格值？

Answer 1

添加自定义单元格模板cellTemplate回调，以在单击单元格按钮时接收完整的行数据。

cellTemplate: function (container, options) {
                    $("<div>")
                        .append($("<button>", { text:"Button","data-key":JSON.stringify(options.data), "click": function(e){
                           console.log("Button Click Row Data => ",JSON.parse(e.target.getAttribute('data-key')));
                        }.bind(this) }))
                        .appendTo(container);
                }

我创建了一个jsfiddle演示供参考-https://jsfiddle.net/hzgfetLj/2/

Answer 2

最简单的方法是使用ASP.NET MVC Controls -> Fundamentals -> Implementing Templates -> Accessing Template Parameters文章中描述的方法。即在Button OnClick事件处理程序中，您可以使用data变量来访问当前的网格行：

columns.Add().CellTemplate(
    @<text>
        @(Html.DevExtreme().Button()
                .ID("sendButton")
                .Text("Select Batch")
                .OnClick("function () { onItemClick(data); }")
        )
    </text>);

然后，onItemClick方法将类似于：

function onItemClick(data) {
    DevExpress.ui.notify(data.Id);
}

单击按钮后，DevExtreme datagrid返回单元格值

2 个答案: