在我的应用程序中,我使用的是ng-grid,我需要显示12列和庞大的数据。但是NG-Grid并未在初始负载上显示所有列。如果我通过调整大小显示数据来对列进行任何轻微的更改。有什么方法可以在初始加载本身上显示数据。
网格定义
<div ui-grid="gridOptions"
ui-grid-selection
ui-grid-resize-columns
ui-grid-move-columns></div>
网格数据绑定
$http.post('/api/search')
.success(function (data) {
$scope.gridOptions.data = data.Items;
if (data.Items.length == 0) {
$timeout(function () { notificationService.error("not found"}, 50);
}
else if (data.Items.length != 1) {
$alert.InlineWide('#' + $scope.modalId);
} else {
broadcast(data.Items[0]);
}
$(window).resize();
}).error(function (msg) {
notificationService.formattedError(msg);
});
样本网格列定义:
$scope.gridOptions = {
columnDefs: [
{
field: 'Number',
displayName: 'number',
minWidth: 50,
sort: { direction: 'asc', priority: 0 }
},..],
onRegisterApi: function (gridApi) {
gridApi.selection.on.rowSelectionChanged($scope, afterSelectionChange);
},
enableRowSelection: true,
enableRowHeaderSelection: false,
multiSelect: false,
enableColumnResize: true,
enableColumnMenus: false,
plugins: [new ngGridFlexibleHeightPlugin()]
};
我已经通过设置网格的宽度,高度和填充框架
来解决问题<div ui-grid="gridOptions"
style="width:855px; height:300px"
ui-grid-selection
ui-grid-resize-columns
ui-grid-move-columns
fill-remainder-min-height="300"></div>