强制编辑各个行ui grid 3.0的模式

时间：2015-02-05 15:03:21

标签： angularjs angular-ui-grid

我需要一次编辑多个单元格。我添加了一个columnDef，每行都有一个编辑按钮。我希望编辑按钮允许根据条件允许尽可能多的列。

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

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

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

2 个答案:

答案 0 :(得分：4)

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

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 }, ]

如果您希望enitre网格的所有列都遵循相同的条件，则将条件仅放在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 }, ]
}

答案 1 :(得分：1)

我一直在研究类似的问题，主要不同之处在于行可以根据数据中的标志进行编辑（而不是像您所拥有的独立按钮）。你可以see it in action here;这是链接中断的代码。

index.html: 

<!DOCTYPE html>
<html ng-app="rowLockDemo">
  <head>
    <meta charset="utf-8" />
    <title>Angular UI-Grid row-lock/cell-edit demo</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <script data-require="angular.js@1.2.x" src="https://code.angularjs.org/1.2.28/angular.js" data-semver="1.2.28"></script>
    <script src="http://ui-grid.info/release/ui-grid-unstable.js"></script>
    <link rel="stylesheet" href="http://ui-grid.info/release/ui-grid-unstable.css" type="text/css">
  </head>
  <body>
    <div ng-controller="MainCtrl">
      <div ui-grid="gridOptions" ui-grid-edit ui-grid-cellNav class="grid"></div>
      <strong ng-show="msg.lastCellEdited">Last Edit:</strong> {{msg.lastCellEdited}}
    </div>
    <script src="app.js"></script>
  </body>
</html>

app.js: 

var app = angular.module('rowLockDemo', ['ui.grid', 'ui.grid.edit', 'ui.grid.cellNav']);

app.controller('MainCtrl', function($scope, $http) {
  $scope.msg = {};

  $scope.gridOptions = {
    enableCellEdit: false, // set all columns to non-editable unless otherwise specified; cellEditableCondition won't override that
    enableCellEditOnFocus: true, // set any editable column to allow edit on focus
    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.isActive; // in this example, we'll only allow active rows to be edited
    }
  };

  $scope.gridOptions.columnDefs = [
    {name: 'isActive', displayName: 'Edit Status', enableColumnMenu: false, cellTemplate: 'cellTemplate_lock.html'}, // displays isActive status as a button and allow toggling it 
    {name: 'name', enableCellEdit: true}, // editing is enabled for this column, but will be overridden per row by cellEditableCondition
    {name: 'company', enableCellEdit: true} // same for this column
  ];

  $scope.gridOptions.onRegisterApi = function(gridApi) {
    $scope.gridApi = gridApi;
    gridApi.edit.on.afterCellEdit($scope, function(rowEntity, colDef, newValue, oldValue) {
      $scope.msg.lastCellEdited = 'ID: ' + rowEntity.id + ', Column: ' + colDef.name + ', New Value: ' + newValue + ', Old Value: ' + oldValue;
      $scope.$apply();
    });
  };

  $http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/500_complex.json').success(function(data) {
    $scope.gridOptions.data = data;
  });
})

cellTemplate_lock.html: 

<!--
  Button shows current state (locked/unlocked); clicking it toggles the state.  

  Initial button state is set by retrieved read-only grid data; lock state is not persisted.
-->

<button ng-click="row.entity.isActive = !row.entity.isActive" ng-model="row.entity.isActive" style="{{row.entity.isActive ? 'background-color: lightgreen' : ''}}">
  {{ row.entity.isActive ? 'Unlocked' : 'Locked' }}
</button>
相关问题
最新问题