我有一组非常大的数据,需要水平滚动才能适合页面。 UI Grid是否支持水平滚动以获取页面之外的数据宽度?
Plunker:http://plnkr.co/edit/WcdQyUNm4UNxjdyX6UDh?p=preview
css:
.grid {
width: 200px;
height: 250px;
}
js:
var app = angular.module('app', ['ngTouch', 'ui.grid']);
app.controller('MainCtrl', ['$scope', function ($scope) {
$scope.myData = [
{
"firstName": "Cox",
"lastName": "Carney",
"company": "Enormo",
"employed": true
},
{
"firstName": "Lorraine",
"lastName": "Wise",
"company": "Comveyer",
"employed": false
},
{
"firstName": "Nancy",
"lastName": "Waters",
"company": "Fuelton",
"employed": false
}
];
}]);
答案 0 :(得分:1)
这是工作Plunker
<强> HTML 强>
<div ng-controller="MainCtrl">
<div id="grid1" ui-grid="yourGridOptions" class="grid"></div>
</div>
<强> JS 强>
注入uiGridConstants
服务。
var app = angular.module('app', ['ngTouch', 'ui.grid']);
app.controller('MainCtrl', ['$scope', 'uiGridConstants', function($scope, uiGridConstants) {
$scope.yourGridOptions = {
enableHorizontalScrollbar: uiGridConstants.scrollbars.WHEN_NEEDED,
enableVerticalScrollbar: uiGridConstants.scrollbars.WHEN_NEEDED,
columnDefs: [{
name: 'firstName',
width:100
}, {
name: 'lastName',
width:100
}, {
name: 'company',
width:100
}, {
name: 'employed',
width:100
}],
data: [{
"firstName": "Cox",
"lastName": "Carney",
"company": "Enormo",
"employed": true
}, {
"firstName": "Lorraine",
"lastName": "Wise",
"company": "Comveyer",
"employed": false
}, {
"firstName": "Nancy",
"lastName": "Waters",
"company": "Fuelton",
"employed": false
}]
};
}]);