1

dxDataGridDevextreme 製品の UI ウィジェットを使用しています。

その列の1つをボタンとして機能させたい。したがって、これまでに次のリストを作成しました。

私の畑の一つ

  { 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([オブジェクト オブジェクト])

ちなみに、私は UI フレームワークとして Agular を使用しています。

4

2 に答える 2

3

次のコードを使用して を定義してみてください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>

それが役に立てば幸い！

于 2015-05-15T07:41:23.610 に答える