我正在创建一个ui-grid，并尝试对其进行样式设置。我希望网格菜单（ui-grid右上角的汉堡菜单）与整个ui-grid具有相同的高度，即与标题+所有行的高度相同。当我从Mozilla开发人员工具查看ui-grid时，网格菜单位于ui-grid标题行的div内。这个div是从ui-grid api自动生成的。有没有一种方法可以将网格菜单的div从其默认位置移动到ui-grid-viewport div内部，该div环绕整个ui-grid。如果可以的话，我可以将网格菜单的高度设置为100％，以便它始终与ui网格相同。
控制器
'use strict'
angular.module('main')
.controller('mainCtrl', function($scope, $filter, uiGridConstants) {
// ********************************************
// ui-grid configuration and functionality
// ********************************************
$scope.atlasUserMonitorGrid = {
// Dummy test data
data: [
{counter: 1, username: 'bob27', last_view: '27/12/2018', total_views: 48, group: 'group 1', data_view: 32, records: 3, crosstabs: 8, reports: 5, explorer: 3, bookmarks: 2},
{counter: 2, username: 'sarah01', last_view: '04/01/2019', total_views: 8, group: 'group 2', data_view: 2, records: 2, crosstabs: 7, reports: 4, explorer: 2, bookmarks: 12},
{counter: 3, username: 'jono0501', last_view: '09/01/2019', total_views: 33, group: 'group 1', data_view: 12, records: 7, crosstabs: 4, reports: 18, explorer: 78, bookmarks: 44},
{counter: 4, username: 'peterh', last_view: '21/01/2019', total_views: 33, group: 'group 3', data_view: 111, records: 12, crosstabs: 6, reports: 55, explorer: 9, bookmarks: 5},
{counter: 5, username: 'joe201', last_view: '11/02/2019', total_views: 34, group: 'group 1', data_view: 3, records: 17, crosstabs: 24, reports: 128, explorer: 178, bookmarks: 144},
{counter: 6, username: 'amy_mcN', last_view: '25/01/2019', total_views: 65, group: 'group 2', data_view: 212, records: 27, crosstabs: 14, reports: 718, explorer: 278, bookmarks: 244},
{counter: 7, username: 'ke', last_view: '15/02/2019', total_views: 1156, group: 'group 3', data_view: 1124, records: 47, crosstabs: 64, reports: 17, explorer: 378, bookmarks: 344},
],
columnDefs: [
{
field: 'counter',
displayName: '',
name: 'Counter',
type: 'number',
sortDirectionCycle: [uiGridConstants.ASC, uiGridConstants.DESC],
enableSorting: false,
enableFiltering: false,
width: 45
},
{
field: 'username',
displayName: 'Username',
name: 'Username',
type: 'string',
sortDirectionCycle: [uiGridConstants.ASC, uiGridConstants.DESC],
enableSorting: true,
enableFiltering: false,
},
{
field: 'last_view',
displayName: 'Last View',
name: 'Last View',
type: 'date',
sortDirectionCycle: [uiGridConstants.ASC, uiGridConstants.DESC],
enableSorting: true,
enableFiltering: false,
filter: {
condition: uiGridConstants.filter.EXACT
}
},
{
field: 'total_views',
displayName: 'Total Views',
name: 'Total Views',
type: 'number',
sortDirectionCycle: [uiGridConstants.ASC, uiGridConstants.DESC],
enableSorting: true,
enableFiltering: false,
filters: [
{
condition: uiGridConstants.filter.GREATER_THAN,
placeholder: 'greater than'
},
{
condition: uiGridConstants.filter.LESS_THAN,
placeholder: 'less than'
}
]
},
{
field: 'group',
displayName: 'Group',
name: 'Group',
type: 'string',
sortDirectionCycle: [uiGridConstants.ASC, uiGridConstants.DESC],
enableSorting: true,
enableFiltering: false
},
{
field: 'data_view',
displayName: 'Data View',
name: 'Data View',
type: 'number',
sortDirectionCycle: [uiGridConstants.ASC, uiGridConstants.DESC],
enableSorting: true,
enableFiltering: false,
filters: [
{
condition: uiGridConstants.filter.GREATER_THAN,
placeholder: 'greater than'
},
{
condition: uiGridConstants.filter.LESS_THAN,
placeholder: 'less than'
}
]
},
{
field: 'records',
displayName: 'Records',
name: 'Records',
type: 'number',
sortDirectionCycle: [uiGridConstants.ASC, uiGridConstants.DESC],
enableSorting: true,
enableFiltering: false,
filters: [
{
condition: uiGridConstants.filter.GREATER_THAN,
placeholder: 'greater than'
},
{
condition: uiGridConstants.filter.LESS_THAN,
placeholder: 'less than'
}
]
},
{
field: 'crosstabs',
displayName: 'Crosstabs',
name: 'Crosstabs',
type: 'number',
sortDirectionCycle: [uiGridConstants.ASC, uiGridConstants.DESC],
enableSorting: true,
enableFiltering: false,
filters: [
{
condition: uiGridConstants.filter.GREATER_THAN,
placeholder: 'greater than'
},
{
condition: uiGridConstants.filter.LESS_THAN,
placeholder: 'less than'
}
]
},
{
field: 'reports',
displayName: 'Reports',
name: 'Reports',
type: 'number',
sortDirectionCycle: [uiGridConstants.ASC, uiGridConstants.DESC],
enableSorting: true,
enableFiltering: false,
filters: [
{
condition: uiGridConstants.filter.GREATER_THAN,
placeholder: 'greater than'
},
{
condition: uiGridConstants.filter.LESS_THAN,
placeholder: 'less than'
}
]
},
{
field: 'explorer',
displayName: 'Explorer',
name: 'Explorer',
type: 'number',
sortDirectionCycle: [uiGridConstants.ASC, uiGridConstants.DESC],
enableSorting: true,
enableFiltering: false,
filters: [
{
condition: uiGridConstants.filter.GREATER_THAN,
placeholder: 'greater than'
},
{
condition: uiGridConstants.filter.LESS_THAN,
placeholder: 'less than'
}
]
},
{
field: 'bookmarks',
displayName: 'bookmarks',
name: 'bookmarks',
type: 'number',
sortDirectionCycle: [uiGridConstants.ASC, uiGridConstants.DESC],
enableSorting: true,
enableFiltering: false,
filters: [
{
condition: uiGridConstants.filter.GREATER_THAN,
placeholder: 'greater than'
},
{
condition: uiGridConstants.filter.LESS_THAN,
placeholder: 'less than'
}
],
}
],
pagination: {
pageSize: 5,
pageSizes: [2, 5, 10]
}
};
});
指令
angular.module('main')
.directive('openappUiGrid', function() {
return {
restrict: 'AE',
scope: {
data: '=openappUiGrid',
columns: '=columnDef',
pagination: '=?'
}, // end scope:
compile: function() {
return {
pre: function(scope, iElem, iAttrs) {
scope.options = {
data: scope.data,
columnDefs: scope.columns,
paginationPageSize: ('pagination' in scope) ? scope.pagination.pageSize : 10,
paginationPageSizes: ('pagination' in scope) ? scope.paginationPageSizes : [10, 15, 20],
enablePaginationControls: false,
enableGridMenu: true
} // end scope.options
} // end pre:
}; // end compile: return
}, // End compile:
templateUrl: static_url + 'js/angular/templates/atlas-user-monitor-ui-grid.html',
}// end directive return
}) // end directive
模板
<div>
<form>
<i ng-click="api.pagination.seek(1)">first_page</i>
<i ng-click="api.pagination.previousPage()">previous_page</i>
<label>
<span>Page {{ api.pagination.getPage() }} </span>
<span>of {{ api.pagination.getTotalPages() }} </span>
</label>
<i ng-click="api.pagination.nextPage()">next_page</i>
<i ng-click="api.pagination.seek(api.pagination.getTotalPages())">first_pages</i>
</form>
</div>
<div class="grid-holder">
<div ui-grid="options" ui-grid-pagination></div>
</div>
设置为100％时，网格菜单的高度与标题行相同，而不是整个网格相同