从网格定义中调用函数

Question

我有一个 ui-grid 列定义如下：

$scope.gridOptions.columnDefs = [
{ name: 'Year 3', field: 'Year 3', cellEditableCondition: function($scope) { return $scope.row.entity[$scope.col['field']+'_editable']; },
  editableCellTemplate: 'ui-grid/dropdownEditor',  editDropdownValueLabel: 'yoy', editDropdownOptionsArray: $scope.yoyGrowthDropDown,
  cellClass: function(grid, row, col, rowRenderIndex, colRenderIndex) {
      if (row.entity[col['field']+'_editable'])
        return 'red';
      else
        return "";
  }
},
{ name: 'Year 4', field: 'Year 4', cellEditableCondition: function($scope) { return $scope.row.entity[$scope.col['field']+'_editable']; }, editableCellTemplate: 'ui-grid/dropdownEditor',  editDropdownValueLabel: 'yoy', editDropdownOptionsArray: $scope.yoyGrowthDropDown,
  cellClass: function(grid, row, col, rowRenderIndex, colRenderIndex) {
      if (row.entity[col['field']+'_editable'])
        return 'red';
      else
        return "";
  }
},
{ name: 'Year 5', field: 'Year 5', cellEditableCondition: function($scope) { return $scope.row.entity[$scope.col['field']+'_editable']; }, editableCellTemplate: 'ui-grid/dropdownEditor',  editDropdownValueLabel: 'yoy', editDropdownOptionsArray: $scope.yoyGrowthDropDown,
  cellClass: function(grid, row, col, rowRenderIndex, colRenderIndex) {
      if (row.entity[col['field']+'_editable'])
        return 'red';
      else
        return "";
  }
},
{ name: 'Year 6-10', field: 'Year 6-10', cellEditableCondition: function($scope) { return $scope.row.entity[$scope.col['field']+'_editable']; }, editableCellTemplate: 'ui-grid/dropdownEditor',  editDropdownValueLabel: 'cagr', editDropdownOptionsArray: $scope.cagrDropDown,
  cellClass: function(grid, row, col, rowRenderIndex, colRenderIndex) {
      if (row.entity[col['field']+'_editable'])
        return 'red';
      else
        return "";
  }
}

];

为每个 cellEditableCondition 和 cellClass 调用一个函数。我不想为每个列定义定义函数。相反，我想定义一次并为每一列调用它。

有人可以告诉我我们必须定义函数的范围以及我们如何调用它吗？

谢谢！

Answer 1

你可以用一个函数来完成：

function isCellEditable(scope) {
     return scope.row.entity[scope.col['field']+'_editable'];
}

function getCellClass(grid, row, col) {
     return row.entity[col['field']+'_editable'] ? 'red' : '';
}

$scope.gridOptions.columnDefs = [
  { name: 'Year 3', field: 'Year 3', cellEditableCondition: isCellEditable,
    editableCellTemplate: 'ui-grid/dropdownEditor',  editDropdownValueLabel: 'yoy', editDropdownOptionsArray: $scope.yoyGrowthDropDown,
    cellClass: getCellClass
  },
  { name: 'Year 4', field: 'Year 4', cellEditableCondition: isCellEditable, editableCellTemplate: 'ui-grid/dropdownEditor',  editDropdownValueLabel: 'yoy', editDropdownOptionsArray: $scope.yoyGrowthDropDown,
    cellClass: getCellClass
  },
  { name: 'Year 5', field: 'Year 5', cellEditableCondition: isCellEditable, editableCellTemplate: 'ui-grid/dropdownEditor',  editDropdownValueLabel: 'yoy', editDropdownOptionsArray: $scope.yoyGrowthDropDown,
    cellClass: getCellClass
  },
  { name: 'Year 6-10', field: 'Year 6-10', cellEditableCondition: isCellEditable, editableCellTemplate: 'ui-grid/dropdownEditor',  editDropdownValueLabel: 'cagr', editDropdownOptionsArray: $scope.cagrDropDown,
    cellClass: getCellClass
  } 
  ];

从网格定义中调用函数

Call function from Grid definition

angularjs

angular-ui-grid

ui-grid