[英]How to load dynamic column and rows from http call (both column and record should be dynamic) in ag-grid
i have requirement like user will click on any table name then i have to render respective data in ag-grid. 我有要求,例如用户将单击任何表名,然后我必须在ag-grid中呈现相应的数据。
i am using angular js 1.x. 我正在使用angular js1.x。
i tried all the ways 我尝试了所有方法
$scope.gridOptions = {};
$scope.loadTableInGrid = function (tablename) {
$http.post($scope.url + "/getPagingRecordImportedTable", { 'dbname': $stateParams.dbname, 'tableName': tablename, 'pageNumber': 1 }).success(
function (response) {
$scope.names = response.records;
$scope.mdata = response.metadata;
console.log(response.records);
console.log(response.metadata);
var columnsize = 0;
for (var obj in $scope.mdata) {
if ($scope.mdata[obj]['columnsize'] > 20) {
columnsize = 20;
} else {
columnsize = $scope.mdata[obj]['columnsize'];
}
$scope.columnDefs.push({
"headerName": $scope.mdata[obj]['columnname'],
"field": $scope.mdata[obj]['columnname']
});
}
var gridDiv = document.querySelector('#myGrid');
alert(gridDiv);
new agGrid.Grid(gridDiv, $scope.gridOptions);
$scope.gridOptions.api.setColumnDefs( $scope.columnDefs);
$scope.gridOptions.api.setRowData(response.records);
$scope.gridOptions.api.refreshView();
console.log("-----------Data received");
}).error(function (data) {
alert(data);
});
} else {
$scope.reset();
$scope.resetGridTableName();
}
console.log(tablename);
};
as per table name i have to load column and record both dynamically in grid . 根据表名称,我必须加载列并在网格中动态记录两者。 but it is always saying "loading" and nothing to render.
但总是说“正在加载”,什么也没渲染。
if any example is there please refer or refactor my code. 如果有任何示例,请参考或重构我的代码。
I can see 1 if and 2 else statement in your code... You are missing something..? 我可以在您的代码中看到1 if和2 else语句...您缺少某些东西..?
Anyhow. 无论如何。 Angular ajax method returns a Promise, so it should be used with .then/.catch instead of .success/.error
角ajax方法返回Promise,因此应与.then / .catch而不是.success / .error一起使用
I would have written it more like this: (untested) (beware ES6 arrow fn and const) 我会这样写:(未测试)(请注意ES6箭头fn和const)
$scope.gridOptions = {};
$scope.loadTableInGrid = tablename => {
const url = $scope.url + "/getPagingRecordImportedTable"
const formData = {
dbname: $stateParams.dbname,
tableName: tablename,
pageNumber: 1
}
console.log(tablename);
$http.post(url, formData)
.then( response => {
$scope.names = response.records;
$scope.mdata = response.metadata;
console.log(response.records);
console.log(response.metadata);
var columnsize = 0;
for (var obj in $scope.mdata) {
if ($scope.mdata[obj]['columnsize'] > 20) {
columnsize = 20;
} else {
columnsize = $scope.mdata[obj]['columnsize'];
}
$scope.columnDefs.push({
headerName: $scope.mdata[obj]['columnname'],
field: $scope.mdata[obj]['columnname']
});
}
var gridDiv = document.querySelector('#myGrid');
alert(gridDiv);
new agGrid.Grid(gridDiv, $scope.gridOptions);
$scope.gridOptions.api.setColumnDefs( $scope.columnDefs]);
$scope.gridOptions.api.setRowData(response.records);
$scope.gridOptions.api.refreshView();
console.log("-----------Data received");
}).catch( err => {
console.log( "Error: ", err )
})
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.