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

DevC 发表于 Dev

开发人员

是否有一种简单的方法，只需单击一个按钮，即可使整行ng-grid进入编辑模式。我知道如果您为enableCellEditOnFocus或设置gridOptions enableCellEdit，则可以单击/双击以编辑特定的单元格。但是我想要的是在每一行中都有一个按钮，并且当单击该按钮时，整行应该是可编辑的。

我现在拥有的代码是这样，但没有实现我想要的。

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

开发人员

似乎没有简单的方法可以执行此操作，我必须添加一个单元格模板并将其设置为在[编辑]按钮单击中进行编辑。以下是我所做的：

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