单个行的强制编辑模式ui grid 3.0答案

【问题标题】：Force edit mode for individual rows ui grid 3.0单个行的强制编辑模式ui grid 3.0
【发布时间】：2015-02-05 15:03:21
【问题描述】：

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

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

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

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

【问题讨论】：

你有没有得到这个答案？我希望在编辑模式下添加一个包含所有字段的新行，这样我也不必维护单独的表单来执行此操作。与此类似：vitalets.github.io/angular-xeditable/#editable-row
我还没有找到解决这个问题的办法。不幸的是，我过去一直在使用 xeditable 并逐渐习惯了该 API。我现在正在使用 ui-grid 并且非常怀念这种能力，但是即使缺少功能，您也可以通过 ui-grid 获得很多。
嗨 kevindstanley，除了单击单元格之外，您是否能够找到一种方法来在一行上调用编辑模式？

标签： angularjs angular-ui-grid

【解决方案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 }, ]
}

【讨论】：

【解决方案2】：

我一直在研究类似的问题，主要区别在于行可根据数据中的标志进行编辑（而不是像您拥有的独立按钮）。你可以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>

【讨论】：

这只是使用标准 api 的 cellEditableCondition，但是当一行是“可编辑”时仍然不显示 2 个输入框（在您的情况下解锁）。在 UI-Grid 3 的 api 中，这仍然是标准 afterCellEdit。也没有选项可以触发，甚至“afterRowEdit”也没有，这将允许单个事件用于将 Save 回调到服务器。