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）”，宽度：'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之后，我创建了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

4 个答案: