AngularJs，在ui-grid中显示函数结果

Question

我正在尝试对一个函数中的两列求和，然后在 ui 网格中显示它们的结果。关于如何执行此操作的任何想法，然后将 ui 网格内容保存在数据库中？

see the picture 所以在我的例子中：a 和 b 是从数据库绑定的，而我希望 angularjs 计算它们的总和并将其添加到列 "Quantite reelle" 中。这是我的网格代码 $scope.gridOptions = {

    showGridFooter: true,
    onRegisterApi: function (gridApi) {
        $scope.gridApi = gridApi;
        gridApi.core.on.renderingComplete($scope, function () {

            $timeout(function () {
                var gridBodyElem = document.getElementById(gridApi.grid.id + '-grid-container');
                gridApi.grid.element.on('mouseup', handleGridClick);
            });
        });
    }

};
$scope.gridOptions.columnDefs = [
    { name: 'Num', enableHiding: false, enableColumnMenu: false, enableCellEdit: false, width: '5%' },
    { name: 'CodeArticle', enableHiding: false, enableColumnMenu: false, displayName: 'Code Article ', width: '10%' },
    { name: 'Ref', enableHiding: false, enableColumnMenu: false, displayName: 'Référence ', width: '10%' },
    { name: 'Designation', enableHiding: false, enableColumnMenu: false, displayName: 'Désignation ', width: '30%' },
    { name: 'Stock', enableHiding: false, enableColumnMenu: false, displayName: "Qté théorique (a)", width: '13%' },
    { name: "ajust", enableHiding: false, enableColumnMenu: false, displayName: "Ajustement (b)", width: '12%' },
    { name: "sum", enableHiding: false, enableColumnMenu: false, displayName: "Quantité Réelle(a+b)", width: '14%' },
    { name: "motif", enableHiding: false, enableColumnMenu: false, displayName: "Motif", width: '20%' }
];

` 谢谢大家。

Answer 1

你可以试试这个：

$scope.gridApi.grid.columns[column a].getAggregationValue() + 
$scope.gridApi.grid.columns[column b].getAggregationValue()

Answer 2

您需要将列字段属性设置为表达式。

$scope.gridOptions.columnDefs = [
{ name: "sum", enableHiding: false, enableColumnMenu: false, field:'CalculateSum(a,b)', displayName: "Quantité Réelle(a+b)", width: '14%' } ];

这里a&b分别是列名

Answer 3

 $scope.gridOptions.columnDefs = [
    { name: 'Num', enableHiding: false, enableColumnMenu: false, enableCellEdit: false, width: '5%' },
    { name: 'CodeArticle', enableHiding: false,field:'CodeArticle', enableColumnMenu: false, displayName: 'Code Article ', width: '10%' },
    { name: 'Ref', enableHiding: false,enableColumnMenu: false, displayName: 'Référence ', width: '10%' },
    { name: 'Designation', enableHiding: false, enableColumnMenu: false, displayName: 'Désignation ', width: '30%' },
    { name: 'Stock', enableHiding: false,field:'Stock', enableColumnMenu: false, displayName: "Qté théorique (a)", width: '13%' },
    { name: "ajust", enableHiding: false, field: 'ajust', enableColumnMenu: false, displayName: "Ajustement (b)", width: '12%' },
    { name: "sum", enableHiding: false, enableColumnMenu: false, field: 'CalculateSum(ajust,Stock)', displayName: "Quantité Réelle(a+b)", width: '14%' },
    { name: "motif", enableHiding: false, enableColumnMenu: false, displayName: "Motif", width: '20%' }
];

$scope.CalculateSum = function (ajust, Stock) {


    return ajust + Stock;
};

Answer 4

在 Tutorial: 323 More Binding examples I created a Plunker 之后，使用过滤器 calculateSum 计算两个字段的总和。

angular.module('app', ['ngAnimate', 'ngTouch', 'ui.grid'])
  .controller('MainCtrl', MainCtrl)
  .filter('calculateSum', function () {
  return function (input, a, b) {
    return input[a]+input[b];
  };
});;

MainCtrl.$inject = ['$http', 'uiGridConstants'];

function MainCtrl($http, uiGridConstants) {
  var vm = this;

  vm.gridOptions = {
    enableFiltering: true,
    onRegisterApi: function(gridApi){
      vm.gridApi = gridApi;
    },
    columnDefs: [
      { field: 'name'},
      { field: 'num1'},
      { field: 'num2'},
      { name: 'sum', field: uiGridConstants.ENTITY_BINDING, cellFilter: 'calculateSum:"num1":"num2"' }
    ]
  };

  $http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/500_complex.json')
    .then(function(response) {
      response.data.forEach(function(row){
        row.num1 = row.age;
        row.num2 = row.age*2;
      });
      vm.gridOptions.data = response.data;
    });
}

AngularJs，在ui-grid中显示函数结果

AngularJs, display function result in ui-grid

angularjs

angularjs-directive

angularjs-scope

angular-ui-grid