javascript - 开发者 dxDataGrid : Pass selected RowData to function when clicking on a button on that Row

Question

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

我想将其列之一用作按钮。因此，到目前为止，我已经完成了以下 list :

我的领域之一

  { 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);
};

点击Field中的按钮调用的函数

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

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

ng-click=Show([Object Object])

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

Answer 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);
            }
        }
    ]
};

接下来，将此标记添加到 View 中:

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

希望对您有所帮助!