如何使 angular-ui 单元格在单击时可编辑？

Question

我正在尝试让 angular ui-grid cell editable (row) 单元格在 single click.

上可编辑

现在，双击单元格即可编辑。

如何在单击时使单元格可编辑？

HTML:

<div class="grid testGrid" ui-grid="testGridOptions" ui-grid-edit 
     ui-grid-row-edit style="width: 100%;">
</div>

控制器：

var columns = [
    { field: 'Name', displayName: 'Name', cellEditableCondition: function ($scope) { return $scope.row.entity.showRemoved; } }
];

网格选项：

$scope.testGridOptions = {
    enableRowSelection: false,
    enableRowHeaderSelection: false,
    enableCellEdit: true,
    enableCellEditOnFocus: false,
    enableSorting: false,
    enableFiltering: false,
    multiSelect: false,
    rowHeight: 30,
    enableColumnMenus: false,
    enableGridMenu: false,
    showGridFooter: false,

    onRegisterApi: function (gridApi) {
        $scope.gridApi = gridApi;
    }
};

Answer 1

如果您使用 ui-grid 的导航并在 gridOptions 中将 enableCellEditOnFocus 设置为 true，则会自动添加单击编辑。

只需将 ui-grid-cellNav 添加到您的网格的 <div>。

我唯一不知道的是它是否与 ui-grid-row-edit 兼容。

无论如何看看 this tutorial 了解更多。

如何使 angular-ui 单元格在单击时可编辑？

How do I make angular-ui cell editable on single click?

angular-ui-grid