Question

我试图将仅包含数字的所有列的格式设置为右对齐。单元格文本很简单，但是如何格式化标题文本？我的表将包含字符串列和数字列，并且我试图将所有列内容和这些数字列的标题设置为右对齐。

我尝试设置全局样式，但这会影响整个网格（全部向左对齐或全部向右对齐）。我也尝试创建一个自定义标头组件，但是在这方面都没有太大的成功。我还尝试设置'flex-direction：row'，但是我无法在DOM上提升足够的高度来访问正确的元素。

下面是一个示例 ：https://plnkr.co/edit/QAqGaRXXpt1KUYdrnWU7?p=preview

还有plnkr中的代码，因此我可以发布问题：

main.js

var columnDefs = [
  {
    headerName: "Athlete", 
    field: "athlete", 
    width: 180, 
  },
  {
    headerName: "Age (Should be aligned right)",
    field: "age",
    width: 250,
    cellStyle: {'text-align': 'right'}
  }
];

var gridOptions = {
    columnDefs: columnDefs,
    rowData: null,
    suppressMenuHide: true,
    defaultColDef: {
      width: 100,
      filter: true
    }
};

// setup the grid after the page has finished loading
document.addEventListener('DOMContentLoaded', function () {
    var gridDiv = document.querySelector('#myGrid');
    new agGrid.Grid(gridDiv, gridOptions);

    // do http request to get our sample data - not using any framework to keep the example self contained.
    // you will probably use a framework like JQuery, Angular or something else to do your HTTP calls.
    var httpRequest = new XMLHttpRequest();
    httpRequest.open('GET', 'https://raw.githubusercontent.com/ag-grid/ag-grid/master/packages/ag-grid-docs/src/olympicWinnersSmall.json');
    httpRequest.send();
    httpRequest.onreadystatechange = function () {
        if (httpRequest.readyState === 4 && httpRequest.status === 200) {
            var httpResult = JSON.parse(httpRequest.responseText);
            gridOptions.api.setRowData(httpResult);
        }
    };
});

style.css

.customHeaderMenuButton {
    float: left;
    margin: 0 0 0 3px;
    background-color: green;
}

.customHeaderLabel {
    float: right;
    margin: 0 0 0 3px;
    background-color: yellow;
}

.active {
    color: cornflowerblue;
}

.rightAligned {
  flex-direction: row;
  background-color: red;
}

“年龄”标题文本应右对齐，并可能在左侧显示过滤器菜单，以便与其余的列文本看起来更加整洁。

如何有条件地格式化ag-grid的标头单元格？

0 个答案: