第一页加载时,有角度的ng网格固定标题不是静态的
Angular ng-grid pinned header not static on first page load
当我最初用ng网格加载页面,然后调整网格列的大小,以便我需要水平滚动才能看到所有列时,第一列不会保持静止。刷新页面后,网格从本地存储加载列设置,然后第一列保持静态。我使用的是一个自定义的headerCellTemplate,并且我已经设置了enablePinning:true和第一列pinding:true。我正试图弄清楚如何让第一列在初始页面加载时保持静态。
代码:
var headerTemplate = '<div class="ngHeaderSortColumn test" ng-style="{''cursor'': col.cursor}" ng-class="{ ''ngSorted'': !noSortVisible }">'
+ '<div ng-click="col.sort($event)" ng-class="''colt'' + col.index" class="ngHeaderText" popover-append-to-body="true" popover-trigger="mouseenter"'
+ 'popover="{{getTooltip(col.displayName)}}">'
+ '{{col.displayName}}</div> <div class="ngSortButtonDown" ng-show="col.showSortButtonDown()"></div>'
+ '<div class="ngSortButtonUp" ng-show="col.showSortButtonUp()"></div>'
+ '<div class="ngSortPriority">{{col.sortPriority}}</div>'
+ '<div ng-class="{ ngPinnedIcon: col.pinned, ngUnPinnedIcon: !col.pinned }" ng-click="togglePin(col)" ng-show="col.pinnable"></div></div>'
+ '<div ng-show="col.resizable" class="ngHeaderGrip" ng-click="col.gripClick($event)" ng-mousedown="col.gripOnMouseDown($event)"></div>';
var adverseEvent = {
field: 'event_label',
width: '28%',
pinned: true,
visible: true,
displayName: 'Adverse Event',
headerCellTemplate: headerTemplate,
cellTemplate: '<div class="ngCellText pull-left">{{row.getProperty(col.field) }}</div>'
};
以下更多列,与无关
设置网格列的函数:
function getCustomGridColumns(stateName) {
var storageId = stateName + exports.GRID_STORAGE_ID;
var gridColumns = localStorageService.get(storageId);
if (!gridColumns) {
gridColumns = getDrugCostColumnDefinition();
localStorageService.set(storageId, angular.toJson(gridColumns));
}
return gridColumns;
}
获取网格列
function getDefaultGridOptions() {
return {
data: 'gridNumbers',
enableSorting: true,
enableColumnResize: true,
showGroupPanel: true,
enableCellGrouping: true,
showColumnMenu: true,
enablePinning: true,
showFilter: true,
jqueryUITheme: true,
columnDefs: 'headers',
sortInfo:{fields:['metric_sum_event_cost'], directions:['desc']},
plugins: [new ngGridFlexibleHeightPlugin({"maxHeight": 500}), new ngGridCsvExportPlugin()],
showFooter: true,
footerTemplate: 'app/common/partials/footer-template.html',
footerRowHeight: 43
}
};
// watch when any column settings changed from grid settings and saved into localstorage
$scope.$watch('drugCostGridOptions.$gridScope.columns', functionChangeGrid, true);
// callback for watchers
function functionChangeGrid(newVal, oldVal) {
var config = [];
angular.forEach(newVal, function (col) {
config.push(_.pick(col, 'field', 'displayName', 'width', 'visible', 'headerCellTemplate', 'cellFilter', 'cellTemplate', 'pinned'));
});
drugCostsService.setCustomGridColumns(currentState, config);
}
解决了这个问题-看起来我的固定列需要以像素为单位定义宽度,而不是百分比:
var adverseEvent = {
field: 'event_label',
width: '300',
pinned: true,
visible: true,
displayName: 'Adverse Event',
headerCellTemplate: headerTemplate,
cellTemplate: '<div class="ngCellText pull-left">{{row.getProperty(col.field) }}</div>'
};
相关文章:
- CSS-如何定位内容数据标题
- 在PHP中使用javascript更改页面标题'if'
- Brightcove获取/显示HTML中的当前视频标题和描述
- 如何处理10页以上的静态页眉/页脚
- React组件-设置页面标题
- jQuery动态更改标题
- HighCharts长标题文本在某些元素上重叠
- 将行添加到具有固定标题的HTML表中
- Grunt-connect在根目录之外提供静态文件
- CKEditor v4:自制插件中对话框的动态标题
- 来自文档或下一个静态父级的事件委派
- JavaScript命名约定;静态“;类或模块
- 无法理解JavaScript中的静态方法
- 如何在自动完成时设置属性标题
- 单元格的工具提示或标题不显示超过2000个字符
- 使用主干网和rails的静态页面路由
- 如何从相应的控制器动态更新标题和描述
- 第一页加载时,有角度的ng网格固定标题不是静态的
- 在滚动期间,标题/工具栏在页面顶部保持静态
- 浏览器在页面上按ctrl+f查找显示静态标题后面的结果