Question

我的页面上有一个ng-grid，用于显示详细信息。有没有办法在我的ng-grid中添加编辑或删除等操作按钮？或者需要设置gridOpts中的任何属性以启用编辑和删除按钮。此外，单击按钮，我将如何获取所选行的详细信息。这是我的ng-grid的代码。

$scope.gridOptions = {
            paginationPageSizes: [25, 50, 75],
            paginationPageSize: 25,
            multiSelect: false,
            enableCellEdit: true,
            enableRowSelection: true,
            enableColumnResize: true,
            enableCellSelection: true,
            columnDefs: [
              { name: 'Name' },
              { name: 'Description' },
              { name: 'FinalModuleWisePrivileges' },
              { name: 'FinalFunctionWisePrivileges' },
              { name: 'Active' },

            ]
        };

HTML：

我尝试过像enableCellEdit和enableRowSelection这样的选项，但它们似乎不起作用。这是否必须通过在加载网格时使用循环来完成？

我也尝试查看以下参考文献，但它没有多大帮助。 ng-grid how to enable Edit and Delete buttons

编辑：我在gridOptions中添加了以下代码行。这解决了临时目的，但有一种巧妙的方法吗？

cellTemplate: '<button ng-click="grid.appScope.editClicked(row)" ng-if="row.entity.Active == true">Edit</button>'

Answer 1

您需要在ColumnDefs中添加一个带有自定义单元格模板的列。

columnDefs: [{ field: 'name', displayName: 'Name'},
             { field: 'description', displayName: 'Description'},
             { displayName: 'Actions', cellTemplate: 
             '<div class="grid-action-cell">'+
             '<a ng-click="deleteThisRow(row.entity);" >Delete</a></div>'}
            ]
    };

此示例显示如何添加自定义删除按钮

示例代码取自here

向ng-grid中的每一行添加操作按钮

1 个答案: