Angular ng-grid 固定标题在第一页加载时不是静态的答案

【问题标题】：Angular ng-grid pinned header not static on first page loadAngular ng-grid 固定标题在第一页加载时不是静态的
【发布时间】：2015-02-27 03:43:44
【问题描述】：

当我最初使用我的 ng-grid 加载页面然后调整网格列的大小以便我需要水平滚动以查看所有这些时，第一列不会保持静态。刷新页面后，网格会从 localstorage 加载列设置，然后第一个 col 保持静态。我正在使用自定义 headerCellTemplate，并且已经设置了 enablePinning：true 和第一列 pinned：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>'
};

...下面有更多列，不相关

设置gridColumns的函数：

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);
}

【问题讨论】：

标签： javascript angularjs ng-grid

【解决方案1】：

解决了这个问题 - 看起来我的固定列需要以像素定义宽度，而不是百分比：

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>'
};

【讨论】：