Question

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

我现在的代码就是这样，但它没有实现我想要的目标。

 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

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

＆＃13;

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

＆＃13;

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

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

1 个答案: