Devextreme dxDataGrid：单击该行上的按钮时将选定的行数据传递给函数答案

【问题标题】：Devextreme dxDataGrid: Pass selected RowData to function when clicking on a button on that RowDevextreme dxDataGrid：单击该行上的按钮时将选定的行数据传递给函数
【发布时间】：2017-08-30 02:38:09
【问题描述】：

我正在使用 Devextreme 产品的dxDataGrid UI 小部件。

我想让它的一列用作按钮。因此，到目前为止，我已经完成了以下清单：

我的一个领域

  { dataField: 'LetterNumber', caption: 'Letter Number', cellTemplate: showLetterImageTemplate }

它的 CellTemplate 显示按钮

function showLetterImageTemplate (cellElement, cellInfo) {
    cellElement.html(' <button class="btn btn-info btn-sm btn-block" ng-click="show('+cellInfo+')">' + cellInfo.displayValue + ' </button> ');
    $compile(cellElement)($scope);
};

点击字段中的按钮调用的函数

$scope.show = function (cellInfo) {
    DevExpress.ui.notify("TEST" + cellInfo.data, "error", 2000);
}

问题是我想将当前点击的行数据传递给Show() 函数，这样我就可以了解点击了哪一行。但是，当我单击该按钮时，出现以下错误：

ng-click=Show([对象对象])

请注意，我使用 Agular 作为我的 UI 框架。

【问题讨论】：

标签： javascript angularjs devexpress devextreme

【解决方案1】：

尝试使用以下代码定义cellTemplate：

$scope.onClick = function(cellInfo) {
    // cellInfo object
};

$scope.dataGridOptions = {
    dataSource: [
        { name: "Alex", age: 23 },
        { name: "Bob", age: 25 }
    ],
    columns: [
        "name", {
        dataField: "age", cellTemplate: function(cellElement, cellInfo) {

            var $button = $("<button>")
                .text("Click me")
                .on("click", $.proxy($scope.onClick, this, cellInfo));

            cellElement.append($button);
            }
        }
    ]
};

接下来，将此标记添加到视图中：

<div dx-data-grid="dataGridOptions"></div>

希望对你有帮助！

【讨论】：

谢谢@Sergey。它按我的预期工作。请您帮我理解$.proxy 究竟在这里做什么？
在我的示例中，$.proxy 更改了单击事件处理程序的上下文和参数。
如何应用 Bootstrap Css 类。当我这样做时，Css 类不起作用var $button = $("<button class=btn btn-warning>")
看起来你错过了报价：var $button = $("<button class='btn btn-warning'>")。您也可以使用addClass() 方法：$("<button>").text(...).on(...).addClass('your classes')。

【解决方案2】：

// Based on your code, this should work for you        
columns: [
    // ...
              {
                dataField: "LetterNumber",  
                caption: "Letter Number",
                cellTemplate: function (container, cellInfo) {
                  var gridButton = $("<button>")
               // (if needed)
               // .attr("attribute name (i.e. class, disabled)", "attribute value")  
                  .text("Show Letter")
                  .on("click", function () { $scope.show(cellInfo) });

                  container.append(gridButton);

                }

              }
    // ... 
    ]

您还可以查看以下示例： https://codepen.io/alfredomason1986/pen/KveBNd

【讨论】：