时间戳

首页 > 解决方案 > 获取列值的总和，并且不允许在 UI 网格中添加新行

javascript - 获取列值的总和，并且不允许在 UI 网格中添加新行

问题描述

我有一个带有百分比值的列 C 的 ui-grid，我们有一个“添加行”按钮来在网格中添加新行。可以添加新行，直到该列 C 达到 100%，不能再添加任何行。

我们如何为它定义网格选项？

  $ctrl.structuringGrid =  {
             columnDefs : [
                  {
                     name : 'structurer',
                     displayName : 'Structurer',
                     headerCellClass: 'text-align-center',                  
                     headerTooltip: true,

                     editableCellTemplate: "<input name=\"structurer\" ng-model=\"MODEL_COL_FIELD\" ng-class=\"'colt' + col.uid\" class=\"form-control\" type=\"text\" uib-typeahead=\"user as user.name for user in grid.appScope.$ctrl.fetchUsers($viewValue)\" typeahead-select-on-blur='true' typeahead-min-length=\"4\" typeahead-editable=\"false\" ui-grid-editor>", 
                     cellTemplate: "<input style=\"height:26px;\"  name=\"structurer\" ng-model=\"MODEL_COL_FIELD\" ng-class=\"'colt' + col.uid\" class=\"form-control\" type=\"text\" uib-typeahead=\"user as user.name for user in grid.appScope.$ctrl.fetchUsers($viewValue)\" typeahead-select-on-blur='true' typeahead-min-length=\"4\" typeahead-editable=\"false\" ui-grid-editor>",
                     cellEditableCondition: true,
                     width: 200
                 },
                  {
                     name : 'Business',                    
                     displayName : 'Structuring Business',
                     headerCellClass: 'text-align-center',                     
                     headerTooltip: true,  
                     width: 200,
                     cellTemplate: "<select name=\"structBusiness\" model=\"MODEL_COL_FIELD\" list-id=\"'STRUCT_BUSINESS'\" align=\"right\" edit-enabled=\"true\" disable=\"false\" custom-select-value=\"'value'\" ordering=\"'value'\"></select> ",
                     cellEditableCondition: true
                  },
                  {
                      name : 'SubBusiness',                    
                      displayName : 'Structuring Sub-Business',
                      cellTemplate: "<loud-select name=\"'structSubBusiness'\" model=\"MODEL_COL_FIELD\" items=\"$ctrl.subbusinessList\" align=\"right\" edit-enabled=\"true\" disable=\"false\" custom-select-value=\"'value'\" ordering=\"'value'\"></loud-select>",
                      headerCellClass: 'text-align-center',                     
                      headerTooltip: true,
                      width: 200,
                      cellEditableCondition: true
                   },
                   {
                       name : 'BusinessAllocation',                    
                       displayName : 'Business Allocation',
                       cellTemplate: "<input style=\"height:26px; background-color: #091c2b;\" type=\"number\" name=\"structBusinessAllocation\" ng-model=\"MODEL_COL_FIELD\"  text-align=\"right\" placeholder=\"0.00\" ng-max=\"99.99\"  ng-min=\"0\" > </input>",
                       headerCellClass: 'text-align-center',
                       aggregationType: uiGridConstants.aggregationTypes.sum,
                       headerTooltip: true,
                       width: 200,
                       cellEditableCondition: true,
                       height: 25
                    },
                    {
                        name : 'actions',
                        displayName : 'Actions',                    
                        headerTooltip: true,
                        width: 100,
                        enableFiltering: false,
                        cellTemplate: getButtons()
                    }
             ],
             enableSorting : false,
             minRowsToShow : 7,
             autoResize : true,
             enableHorizontalScrollbar : 0,
             enableVerticalScrollbar : 1,
             enableRowSelection : true,
             enableFullRowSelection : true,
             enableRowHeaderSelection : false,
             multiSelect : false,
             enableFiltering: false,
             enableGridMenu : false,
             onRegisterApi: function(gridApi){
                 $ctrl.aGridApi = gridApi;

             }
         };

在按钮单击我有以下代码：

     $ctrl.addNewRow = function() {
         console.log(" Total business allocation -------------------------- " + $ctrl.GridApi.grid.columns[3].getAggregationValue());
         $ctrl.Grid.data.push({Id:'', structurer: '', business: '', SubBusiness: '', BusinessAllocation: ''});  
     };

标签： javascriptangularjsangular-ui-gridui-grid

解决方案

使用 ng-change() 方法来解决这个目的。

推荐阅读