分类导航

Angularjs 发布时间：2022-04-20 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了angularjs – 如何使用ag-grid动态显示列，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

我是 angularjs技术的新手.我正在使用ag-grid并想要动态显示列

我的json数据是：

[{Date:'12-12-2015',Name:'AMMu',mark:20},{Date:'12-12-2015',Name:'appu',mark:24},Name:'anu',mark:27},{Date:'13-12-2016',mark:23},{Date:'13-12-2015',mark:20}]

我的预期输出是
Expected Output

现有守则如下

$scope.gridoptions = {
    columnDefs: [],enableFilter: true,rowData: [],rowSELEction: 'multiple',rowDeSELEction: true
};
 $scope.customcolumns = [];
Getdetails();
function Getdetails()
{
    masterdataFactory.Getdetails()
     .success(function (student) {
        f (student.length != 0) {
             for(var i=0;i<student.length;i++) {
                 $scope.customcolumns.push(
                     {
                         headerName: student[i].Name,field: "Mark",headerClass: 'grid-halign-left'

                     }
                 );
             };
            $scope.gridoptions.columnDefs = $scope.customcolumns;
            $scope.gridoptions.rowData = student;
            $scope.gridoptions.api.setcolumnDefs();
          }                 
     })
      .error(function (error) {
          $scope.status = 'Unable to load data: ' + error.message;
      });
}

现有产出如下
Existing Output

如何从现有输出到达我的预期输出

解决方法

首先安排json数据

[{Date:'12-12-2015',AMMu:20,appu:24,anu:27},{Date:'13-12-2016' AMMu:23,anu:20}]

为此我正在使用以下代码

function generateChartData() {
             var chartData = [],categories = {};
             debugger;
             for ( var i = 0; i <student.length; i++ ) {
                 var newdate = student[ i ].Date;
                 var Name=student[ i ].Name;
                 var Mark=student[ i ].Mark;
                // add new data point
                 if ( categories[ newdate ] === undefined ) {
                     categories[ newdate ] = {
                         DATE: newdate
                     };
                     chartData.push( categories[ newdate ] );
                 }

                 // add value to exisTing data point

                 categories[ newdate ][ Name] = Mark;
             }

             return chartData;
         }

网格选项如下：

$scope.gridoptions = {
             columnDefs: coldef(),rowDeSELEction: true,enableColResize: true,}
           };
        $scope.gridoptions.columnDefs = $scope.customcolumns;
        $scope.gridoptions.rowData =generateChartData();
        $scope.gridoptions.rowData = generateChartData();
}

列定义是动态的,如下所示

function coldef()
{
    for(var i=0;i<headers.length;i++) {
        debugger;
        $scope.customcolumns.push(
                              {
                                  headerName: headers[i],field:headers[i],headerClass: 'grid-halign-left',width:180,filter: 'set',});
        } }

在这个标题中是一个数组.此数组包含不同的学生姓名

var headers=new Array();
 headers[0]="DATE";
 var Names= student.map(function (item) { return item.NamE}); 
 Names= Names.filter(function (v,i) { return Names.indexOf(v) == i; }); 
         for(var i=1;i<=Names.length;i++)
         {
             headers[i]=Names[i-1];
         }