ngGrid - 单击按钮编辑一行（ASP.NET Gridview 编辑等效）

Question

有没有一种简单的方法可以通过单击按钮使整行 ng-grid 进入编辑模式。我知道如果您为 enableCellEditOnFocus 或 enableCellEdit 设置 gridOptions，您可以 click/doubleclick 编辑特定的单元格。但我想要的是在每一行都有一个按钮，当点击它时，整行都应该是可编辑的。

我现在的代码是这样的，但是没有达到我想要的效果

 vm.grid.childServicesGridOptions = {
            data: "vm.grid.childServices",
            rowHeight: 35,
            enableCellSelection: false,
            enableRowSelection: true,
            multiSelect: false,
            columnDefs: [
                { field: 'serviceId', displayName: 'Service Id', visible: false },
                { field: 'location.locationName', displayName: 'Location Name', width: "25%" },
                { field: 'serviceDisplayName', displayName: 'Product/Service Display Name', width: "25%" },
                { field: 'duration', displayName: 'Duration', width: "10%" },
                {
                    field: '', displayName: 'Action', width: "10%",
                    cellTemplate: '<button ng-click="vm.grid.editChildService(row)"><span class="glyphicon glyphicon-pencil"></span></button>'
                }
            ],
            pagingOptions: { pageSizes: [10, 20, 30], pageSize: 10, currentPage: 1 },
            totalServerItems: 'vm.grid.childServices.length',
        };

        vm.grid.editChildService = function (row) {
            row.entity.edit = !row.entity.edit;
        }

Answer 1

似乎没有直接的方法可以做到这一点，我不得不添加一个单元格模板并将其设置为在单击 [编辑] 按钮时进行编辑。以下是我所做的：

   vm.holidayProperties.childHolidayGridOptions = {
            data: "holidayProperties.selectedHoliday.childHolidays",
            rowHeight: 35,
            enableCellSelection: false,
            enableRowSelection: true,
            multiSelect: false,
            columnDefs: [
                { field: 'holidayId', displayName: localize.getLocalizedString('_HolidayId_'), visible: false },
                { field: 'location.locationName', displayName: localize.getLocalizedString('_LocationName_'), width: "15%" },
                { field: 'holidayName', displayName: localize.getLocalizedString('_Holidayname_'), width: "15%" },
                {
                  field: 'isAllDay', displayName: localize.getLocalizedString('_IsAllday_'), width: "10%",
                  cellTemplate: '<input type="checkbox" ng-model="row.entity.isAllDay" ng-change="holidayProperties.setEndDateDisabled()" ng-disabled="!row.editable">'
                },
                {
                    field: '', displayName: localize.getLocalizedString('_Action_'), width: "10%",
                    cellTemplate: '<button ng-show="!row.editable" ng-click="holidayProperties.setRowEditable(row)"><span class="glyphicon glyphicon-pencil"></span></button>' +
                                  '<button ng-show="row.editable" ng-click="holidayProperties.reset(row)"><span class="glyphicon glyphicon-arrow-left"></span></button>'
                }
            ],
            enablePaging: true,
            showFooter: true,
            showFilter: true,
            pagingOptions: { pageSizes: [10, 20, 30], pageSize: 10, currentPage: 1 },
            totalServerItems: 'holidayProperties.selectedHoliday.childHolidays.length',
        };


        vm.holidayProperties.setRowEditable = function (row) {
            row.editable = true;
        }

        vm.holidayProperties.reset = function (row) {
            clientcontext.rejectChangesForEntity(row.entity);
            row.editable = false;
        }

使用row.editable字段，我将要编辑的字段的禁用属性设置为true或false。

ngGrid - 单击按钮编辑一行（ASP.NET Gridview 编辑等效）

ngGrid - edit a row on button click (ASP.NET Gridview edit equivalent)

row

edit

ng-grid