【问题标题】:How to highlight the selected row of ag-grid?如何突出显示选定的 ag-grid 行?
【发布时间】:2018-11-20 10:24:53
【问题描述】:

我正在研究 ag-grid 文档中关于多行选择的示例。以下是来自 plunkr 的代码:

var columnDefs = [
{field: "athlete", width: 150},
{field: "age", width: 90},
{field: "country", width: 120},
{field: "year", width: 90},
{field: "date", width: 110},
{field: "sport", width: 110},
{field: "gold", width: 100},
{field: "silver", width: 100},
{field: "bronze", width: 100},
{field: "total", width: 100}
];

var gridOptions = {
columnDefs: columnDefs,
rowSelection: 'multiple',
};

// 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- 
docs/master/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);
    }
};
});

但是如何突出显示多个选定的行以轻松理解选择了哪些行。

【问题讨论】:

  • 突出显示选定的网格行 - 这不是 ag-grid 的默认行为吗?你还想要什么?你能分享一下plunk链接吗?
  • 嗨,Paritosh 正如你所说,这是 ag-grid 的默认行为。我正在尝试使用版本 4。它没有突出显示所选行。我尝试使用最新版本 17,我可以看到突出显示的行.

标签: javascript css angularjs ag-grid


【解决方案1】:

将此添加到 gridOptions:

rowMultiSelectWithClick: true

【讨论】:

    猜你喜欢
    • 2018-12-24
    • 2018-02-14
    • 1970-01-01
    • 2013-10-06
    • 2020-01-23
    • 1970-01-01
    • 2022-12-15
    • 2016-08-02
    • 2019-08-27
    相关资源
    最近更新 更多