具有分组列序列的Angularjs ui网格变得混乱答案

【问题标题】：Angularjs ui grid with grouping column sequence is getting jumbled up具有分组列序列的Angularjs ui网格变得混乱
【发布时间】：2015-05-13 07:04:36
【问题描述】：

我正在使用 AngularJs ui 网格进行分组。表格显示正常，但我面临的问题是表格中的月份序列变得混乱。请找到我的Plunker。在表格中，月份出现在混乱的序列 11-14、05-15、04-15、... 02-15 中。但我需要它的顺序是 11-14、12-14、01-15、02-15、03-15、04-15、05-15。谁能帮我解决一下？

我正在使用以下 for 来获取 colDefs：

$scope.getColumnDefsForUiGrid = function(columns) {
     var colDef = [];
     colDef.push({
         name: 'mode',
         grouping: {
             groupPriority: 0
         },
         displayName: 'Type',
         enableCellEdit: false,
         width: '5%'
     });
     colDef.push({
         name: 'service',
         displayName: 'Catg',
         enableCellEdit: false,
         width: '5%'
     });
     angular.forEach(columns, function(value, key) {
         colDef.push({
             name: key,
             displayName: value,
             enableCellEdit: true,
             aggregationType: uiGridConstants.aggregationTypes.sum,
             width: '5%'
         })
     });
     return colDef;
 };

【问题讨论】：

实际上，您的 ui-grid 列的顺序与您的 $scope.columns 完全相同。如果你想改变顺序，你可以重新排序这个对象。
如何在 getColumnDefsForUiGrid 中做到这一点？
我只想按正确的顺序排列月份。
plnkr.co/edit/MkE58U9mefiRyMTC4Ohf?p=preview 现在他们是。但我不确定我得到你的问题。在您的应用程序中，此列 def 是否也是硬编码的？还是该列是动态的？
它是动态的。首先我需要获取模式，然后服务，然后所有月份都应该按顺序显示。将 Mode 和 Service 推入 colDef 后，我可以灵活地更改逻辑，同时使用 angular.forEach(columns, function( value, key ) 进行循环。我们可以在这里做点什么来保持顺序吗？

标签： angularjs angularjs-directive angular-ui angular-ui-bootstrap angular-ui-grid

【解决方案1】：

这是解决您问题的方法 you can see it working on this plunker

$scope.getColumnDefsForUiGrid = function( columns ){
        var colDef = [];                        
        colDef.push({name: 'mode', grouping: { groupPriority: 0 }, displayName: 'Type', enableCellEdit: false, width: '5%'});
        colDef.push({name: 'service',  displayName: 'Catg', enableCellEdit: false, width: '5%'});

        //I split the monthColumns into an other array                      
        var monthCol = [];
        angular.forEach(columns, function( value, key ) {
              monthCol.push({name: key, displayName: value, enableCellEdit: true, aggregationType : uiGridConstants.aggregationTypes.sum, width: '5%' })
        });

        //I sort this array using a custom function
        monthCol.sort(function(a,b){
              a = a.displayName.split("-");
              b = b.displayName.split("-");
              if(a[1] < b[1]){
                  return -1;
              }else if (a[1] > b[1]){
                  return 1;
              }else {
                  if(a[0] < b[0]){
                     return -1;
                  }else{
                    return 1;
                  }
              }
        });

   //I concat the two array
   return colDef.concat(monthCol);
};

【讨论】：

是的，接受了答案。谢谢