angularjs - 强制编辑单行 ui grid 3.0 模式

Question

我需要同时编辑 1 个以上的单元格。我添加的 columnDef 每行都有一个编辑按钮。我希望编辑按钮允许根据条件编辑任意数量的列。

当我设置如下条件时，这只会在我双击单元格时检查是否满足此条件。

$scope.gridOptions.cellEditableCondition: function(scope){
  scope.row.entity.name = "Jay"
}

有没有办法为满足条件的所有单元格在整行上调用网格“编辑模式”？

Answer 1

如果您只想在网格的某些列上应用条件，下面是示例:

columnDefs: [
      // default
    { field: 'FileName', displayName: 'FileName', enableCellEdit: false, cellTooltip: true },
    { field: 'RootFilePath', displayName: 'RelativePath', cellTooltip: true, enableCellEdit: false },
    { name: 'File Properties', enableFiltering: false, cellTemplate: '<center><div>' + '<a href="~/../../TaxonomyVersion/GetTaxonomyVersionDetails">View</a>' + '</div></center>' },
    { field: 'IsEditable', displayName: 'Editable/NonEditable', headerTooltip: true, enableCellEdit: false },
    { field: 'HttpPath', displayName: 'HttpPath', enableCellEdit: true, cellTooltip: true },
    { name: 'Generate HttpPath', cellTemplate: '<center><input type="checkbox" ng-model="row.entity.ToGenerateHttpPath", ng-checked="row.entity.ToGenerateHttpPath", ng-click="grid.appScope.generateHttpPath(row.entity.ToGenerateHttpPath,row.entity.HttpPath)"></center>', enableFiltering: false, headerTooltip: true, enableCellEdit: false },
    {field: 'TopLevelSchemaComments', displayName: 'Top Level\n Comments', headerTooltip: true, enableFiltering: true, cellTooltip: true,
        cellEditableCondition: function ($scope) {
            // put your enable-edit code here, using values from $scope.row.entity and/or $scope.col.colDef as you desire
            return $scope.row.entity.IsEditable; // in this example, we'll only allow editable rows to be edited
        },
    },
    { name: 'Remove', enableFiltering: false, cellTemplate: '<div><center><button ng-disabled ="!(row.entity.IsEditable)" class="fa fa-trash-o" ng-click="grid.appScope.Remove(row.entity.XsdSchemaID,row.entity.XbrlLinkbaseID)"></button></center></div>', enableCellEdit: false }, ]

如果您希望整个网格的所有列都遵循相同的条件，则仅将条件放在 columnDefs 之前的 gridOptions 中。下面是示例:

    $scope.gridOptions1 = {
    enableFiltering: true,
    data: [],
    showGridFooter: true,
    enableGridMenu: true,
    enableColumnResizing: true,
    cellEditableCondition: function ($scope) {
        // put your enable-edit code here, using values from $scope.row.entity and/or $scope.col.colDef as you desire
        return $scope.row.entity.IsEditable; // in this example, we'll only allow editable rows to be edited
    },
    columnResize: true,
    columnDefs: [
      // default
    { field: 'FileName', displayName: 'FileName', cellTooltip: true },
    { field: 'RootFilePath', displayName: 'RelativePath', cellTooltip:true},
    { name: 'File Properties', enableFiltering: false, cellTemplate: '<center><div>' + '<a href="~/../../TaxonomyVersion/GetTaxonomyVersionDetails">View</a>' + '</div></center>' },
    { field: 'IsEditable', displayName: 'Editable/NonEditable', headerTooltip: true},
    { field: 'HttpPath', displayName: 'HttpPath', cellTooltip: true },
    { name: 'Generate HttpPath', cellTemplate: '<center><input type="checkbox" ng-model="row.entity.ToGenerateHttpPath", ng-checked="row.entity.ToGenerateHttpPath", ng-click="grid.appScope.generateHttpPath(row.entity.ToGenerateHttpPath,row.entity.HttpPath)"></center>', enableFiltering: false, headerTooltip: true, enableCellEdit: false },
    {field: 'TopLevelSchemaComments', displayName: 'Top Level\n Comments', headerTooltip: true, enableFiltering: true, cellTooltip: true},
    { name: 'Remove', enableFiltering: false, cellTemplate: '<div><center><button ng-disabled ="!(row.entity.IsEditable)" class="fa fa-trash-o" ng-click="grid.appScope.Remove(row.entity.XsdSchemaID,row.entity.XbrlLinkbaseID)"></button></center></div>', enableCellEdit: false }, ]
}