Я создал ui-сетку в модальном режиме в angualr js. В модальной вкладке каждая вкладка имеет свою собственную сетку ui. Для этой вкладки "Профиль" у меня есть сетка, и я хочу, чтобы выровнять названия столбцов и оригиналы. Я также хочу выровнять содержимое в столбце Originals. Я новичок в этом, поэтому любая помощь приветствуется.
Код для Profile.js:
var app = angular.module('serviceDesk.restroom-services.profile', []);
app.controller('ProfileCtrl', [ '$scope', '$http', function($scope, $http) {
$scope.gridOptions = {
showGridFooter: true,
enableHorizontalScrollbar: 0,
showColumnFooter: false,
enableFiltering: false,
enableColumnMenus: false,
enableGridMenu: false,
columnDefs: [
{ field: 'empty', width: '33%', displayName: ''},
{ field: 'modified', width: '33%', displayName: 'Modified'},
{ field: 'original', width: '33%', displayName: 'Originals'},
],
data: [{
"empty":"Number of Employees(Daily)",
"modified":"",
"original":"20",
},
{
"empty":"Customer Restroom Visits(Daily)",
"modified":"",
"original":"5",
},
{
"empty":"Days Open per Week",
"modified":"",
"original":"5",
},
{
"empty":"Number of Restrooms",
"modified":"",
"original":"2",
},
{
"empty":"Number of Stalls",
"modified":"",
"original":"2",
},
{
"empty":"Number of Urinals",
"modified":"",
"original":"2",
},
{
"empty":"Delivery Frequency",
"modified":"",
"original":"Weekly Deliveries",
},
{
"empty":"Billing Frequency",
"modified":"",
"original":"Monthly",
}
],
onRegisterApi: function(gridApi) {
$scope.gridApi = gridApi;
}
};
$http.get("app/views/restroom-services/action/profile/profile.json").success(function(data) {
$scope.gridOptions.data = data;
});
}
]);
Не уверен, что это необходимо, но вот код для Profile.html:
<div ng-controller="ProfileCtrl">
<!--button for profile..
<div class="users-button-group">
<button type="button" class="btn btn-aramark-primary btn-xs" ng-click="">Revert Profile</button>
</div>
-->
<div class="modal-body">
<div id="grid1" ui-grid="gridOptions" class="grid"></div>
</div>
Я понял проблему.
Здесь у меня есть два div в html-странице:
<div id="gridTest" ui-grid="gridOptions" class="grid"></div>
<div id="grid1" ui-grid="gridOptions2" class="grid"></div>
Здесь я устанавливаю текст для выравнивания центра так, чтобы текст заголовка был центрирован:
#gridTest .ui-grid-header-cell .ui-grid-cell-contents{
text-align:center;
}
После этого строка заголовка должна быть выровнена по центру.
ui-grid
3.x похоже, что .ui-grid-header-cell
больше не существует. Таким образом, достаточно #gridTest .ui-grid-cell-contents
.