我是angularjs技术的新手。我正在使用ag网格，并希望动态显示列
我的json数据是：
[{Date:'12-12-2015',Name:'ammu',mark:20},{Date:'12-12-2015',Name:'appu',mark:24},{Date:'12-12-2015',Name:'anu',mark:27},{Date:'13-12-2016',Name:'ammu',mark:23},{Date:'13-12-2015',Name:'anu',mark:20}]
我的预期输出是预期输出
下方给出了现有代码
$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;
});
}
现有输出如下现有输出
如何从现有输出达到我的预期输出
首先排列json数据
[{Date:'12-12-2015',ammu:20,appu:24,anu:27},{Date:'13-12-2016' ammu:23,anu:20}]
为此，我使用以下代码
function generateChartData() {
var chartData = [],
categories = {};
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(),
enableFilter: true,
rowData: [],
rowSelection: 'multiple',
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++) {
$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];
}
您似乎正在使用异步调用来获取数据，因此当调用成功时，网格已经初始化。
网格初始化后，您需要使用网格API（gridOptions.API…），而不是gridOptions.columnsDef（请参阅http://www.ag-grid.com/angular-grid-api/index.php)
// the api will not be available unless it is compiled with the **$timeout** or **setTimeout** because this javascript library does not fall in angular digest cycle
$timeout(function() {
$scope.gridOptions.api.setColumnDefs(masterColumnDefs);
}, 0);
这将帮助您访问ag-grid的API。
希望这能有所帮助！
您的代码中有很多错误：
第一个："API"字段在开始时不可用。这可能意味着两件事：
- 网格尚未加载YET（将调用包装在上的
$timeout或就绪事件检查文档中http://www.ag-grid.com) - 您忘记了DOM元素中的ag网格指令，因此网格根本不会初始化
第二次：不使用$scope.gridOptions.api.setColumnDefs();，而是使用$scope.gridOptions.api.setColumnDefs(myNewColumnsDefs);
3rd：如果网格已经初始化，不要使用rowData，使用api.setRowData(myDatas)，在调用setColumnDefs之后使用它可能更好，但我认为它不会造成任何混乱。
我认为数据你的输入数据（学生）可能是罪魁祸首，因为括号似乎奇怪地配对（复制了你的数据，但格式更易于阅读）：
[
{Date:'12-12-2015',Name:'ammu',mark:20},
Date:'12-12-2015',Name:'appu',mark:24},
Date:'12-12-2015',Name:'anu',mark:27},
Date:'13-12-2016',Name:'ammu',mark:23},
{Date:'13-12-2015',Name:'anu',mark:20}
]
第二行、第三行和第四行不具有起始{。
$scope.gridOptions ={
enableSorting: true,
enableFilter: true,
suppressMovableColumns:true,
enableColResize: true,
columnDefs : [],
rowHeight : 27,
tooltipField : true,
suppressLoadingOverlay : true,
overlayLoadingTemplate: '<span class="ag-overlay-loading-center" style=background:lightgoldenrodyellow>Please wait while your rows are loading</span>',
//getRowStyle : getRowStyleScheduled
};
$scope.gridRefresh = function() {
$scope.columnsHeaders =[];
for (var i = 0, len = $scope.columnsHeaders.length; i < len; i++) {
$scope.columnsHeaders[i].headerName = $scope.columnsHeaders[i].name;
$scope.columnsHeaders[i].field = $scope.columnsHeaders[i].field;
$scope.columnsHeaders[i].cellRenderer = function(params) {
if(params.value != null) {
return '<span title="'+params.value+'">'+params.value+'</span>';
}else {
return null;
}
}
$scope.gridOptions.columnDefs.push($scope.columnsHeaders[i]);
}
$scope.gridOptions.api.setColumnDefs($scope.gridOptions.columnDefs);
$scope.gridOptions.api.setRowData($scope.Rows);
$scope.gridOptions.columnApi.autoSizeColumns($scope.gridOptions.columnDefs);
}
我在角6中寻找同样的东西。但这个页面是在谷歌上发布的。我在角6中提供答案，以防有人想从其余的API、导出列定义
我使用大小列来适应，因为列是动态的，所以它们适合可用的网格宽度
ngOnInit() {
this.gridOptions = {
onGridSizeChanged: () => {
this.gridApi.sizeColumnsToFit();
},
onNewColumnsLoaded: () => {
if (this.gridApi) {
this.gridApi.sizeColumnsToFit();
}
},
defaultColDef: {
width: 150,
minWidth: 100,
maxWidth: 400
}
};
this.getcolumnData();
}
getcolumnData() {
this.pageType = this.route.snapshot.paramMap.get('type');
this.http.get(`${this.baseURL}/getStaticMetaData`).subscribe(res => {
let columnDef = [];
res.forEach(column => {
columnDef = [...columnDef, {headerName: column.columnName, field: column.columnId}];
});
this.gridApi.setColumnDefs(columnDef);
});
}
onGridReady(params) {
this.gridApi = params.api;
this.http.get(`${this.baseURL}/getStaticData`).subscribe(data => {
if (data.length < 20) {
this.isSmallGrid = true;
}
this.gridApi.setRowData(data);
}, err => {
// handle error
});
}
<ag-grid-angular style="width: 100%;"
[ngStyle]="{'height.px': isSmallGrid ? '325' : '725'}"
class="ag-theme-balham"
[gridOptions]="gridOptions"
(gridReady)="onGridReady($event)"
enableColResize enableSorting enableFilter
>
</ag-grid-angular>