标签: ag-grid

最近我们想改变我们当前的网格工具.目前我们正在使用kendo-ui进行网格和所有.搜索后我们得到了3个结果.但是,我们仍然不确定哪个更好,为什么在未来的运行.

使用剑道时,我们错过了对它的控制权.如果任何人能帮助我们选择带有角度的正确网格,那将是一件好事.

我已经搜索了一段时间,但没有看到任何真实的例子.

我正在使用ag-grid-react,我想要一个包含布尔值的列来表示带有复选框的布尔值,并在更改时更新rowData中的对象.

我知道有checkboxSelection,我试着像我下面的那样使用它,但实现了它是一个复选框,它没有链接到数据,只是用于选择一个单元格.

var columnDefs = [
        { headerName: 'Refunded', field: 'refunded', checkboxSelection: true,}
  ]

那么有没有办法用ag-grid和ag-grid-react做我正在寻找的东西？

使用ag-grid,有没有办法将长标题分成2行...

columnDefs headerName中的一个中断'Long<br />Header' 让我在那里分开(使用开发工具我可以看到文本有br),但是其中一个周围元素的高度为25px; <div class="ag-header" style="height: 25px;">我认为导致标题的第二行不显示.

我想知道使用组头作为临时文本来分割文本,但是长期(当我需要分组时)这不是一个选项...

如何获取并重新设置ag-grid表的状态？我的意思是,显示哪些列,按什么顺序显示,排序和过滤等等.

更新:getColumnState和setColumnState似乎接近我想要的,但我无法弄清楚我应该保存和恢复状态的回调.我尝试在onGridReady中恢复它,但是当加载实际行时,我失去了状态.

我有columnDefs动态变化的问题.这是我的gridOptions:

$scope.gridOptions = {
        columnDefs: [],
        enableFilter: true,
        rowData: null,
        rowSelection: 'multiple',
        rowDeselection: true
    };

当我从服务器检索数据时:

$scope.customColumns = [];

$http.post('/Home/GetProducts', { tableName: 'TABLE_PRODUCT' }).success(function (data) {
    angular.forEach(data.Columns, function (c) {
        $scope.customColumns.push(
            {
                headerName: c.Name,
                field: c.Value,
                width: c.Width
            }
        );
    });

    $scope.gridOptions.columnDefs = $scope.customColumns;

    $scope.gridOptions.rowData = data.Products;
    $scope.gridOptions.api.onNewRows();
}).error(function () {

});

注意:这里c是来自服务器的列对象.

当动态生成列并将其分配给$ scope.gridOptions.columnDefs时,会出现空白网格,但$scope.customColumns数组中填充了右侧生成的列对象.请帮帮我是这个错误还是我做错了什么？

我有一个大而合理数据量的网格(大约12,000个单元格...... 340列和34行).我知道这似乎是一个侧面的表,但它恰好发生在我们的应用程序中,它更可能有大量的列和更少的行.

当数据大约是2300个单元格(68列和34行)时,它足够快,我可以称之为"立即".我什么都不担心.

将其增加5倍会导致初始渲染时间呈指数增长.具体而言,在recursivelyCreateColumns方法中永久地创建列.

转到10x会导致需要几分钟才能完成.走到20,它没有崩溃,但是5分钟后它还在继续,我怀疑它需要一个小时或更长时间.

我的问题是,即使我为AG-Grid创建网格列/行/数据的代码在20ms范围内运行,我还能做些什么来让AG-Grid更容易创建列？也许它只在必要时创建列？

我的网格设置如下:

var gridOptions = {
    enableCellExpressions: true,
    columnDefs: data.header,
    rowData: data.body.data,
    floatingTopRowData: data.body.floatingTopData,
    rowHeight: 25,
    headerHeight: 25,
    enableColResize: true,
    enableSorting: true,
    enableFilter: true,
    getNodeChildDetails: function(rowItem) {
        if(rowItem.items) {
            return {
                expanded: scope.gridOptions.rowData[0].something === rowItem.something,
                group: true,
                field: "something",
                key: rowItem.something,
                children: rowItem.items
            };
        }
        return null;
    }
};

我想根据status字段有条件地显示工具提示，将鼠标悬停在整行上（而不仅仅是在单元格上）。在 API 文档中，我发现了这个：https : //www.ag-grid.com/javascript-grid-column-properties/

tooltip 一个回调，它接受 (value, valueFormatted, data, node , colDef, rowIndex, and api) 它必须返回用作工具提示的字符串。tooltipField 优先。

这可以用于在整行上显示工具提示吗？如果是，任何人都可以提供任何工作示例吗？如果没有，我还有其他方法可以实现吗？

谢谢

有没有办法为粘性列中的每一行添加菜单(在Ag网格中)？

在官方文件中没有提到这种功能,所以我不确定它是否可能.我尝试了几种方法,但菜单总是被困在粘性列包装器中.

我能够(至少)部分工作的唯一方法是设置:

.ag-body-container .ag-row {
        z-index: 0;
    }

    .ag-ltr .ag-hacked-scroll .ag-pinned-right-cols-viewport {
        overflow: visible !important;
    }

但这完全破坏了垂直滚动.

var columnDefs = [
    {headerName: "ID", width: 50,
        valueGetter: 'node.id',
        cellRenderer: 'loadingRenderer'
    },
    {headerName: "Athlete", field: "athlete", width: 150},
    {headerName: "Age", field: "age", width: 90},
    {headerName: "Country", field: "country", width: 120},
    {headerName: "Year", field: "year", width: 90},
    {headerName: "Date", field: "date", width: 110},
    {headerName: "Sport", field: "sport", width: 210},
    {headerName: "Gold", field: "gold", width: 300},
    {headerName: "Silver", field: "silver", width: 400},
    {headerName: …

我正在使用Angular Grid(版本1.16.1),我需要在表格中显示一个长文本,我希望行高可以根据内容进行调整,必要时可以打破行.

我试过了:

• sizeColumnsToFit方法,期望ag-grid可以通过其内容调整列的大小;

• gridOptions的setRowStyle方法:我添加了CSS类来根据内容调整roe高度(例如:'word-wrap':'break-word');

• minWidth和width:我已计算出平均列大小,但ag-grid不尊重它;

• gridOptions上的cellStyle:和"setRowStyle"一样,但CSS类没有给我任何成功;

有人有另一个建议吗？

我找不到一个很好的方法来调整网格大小以完美地适应所有行.

文档仅指向按%或px调整大小.

由于我希望它基于行的大小,我想出了以下功能.好像我正在重新发明轮子,所以也许有更好的方法？

getHeight(type:EntityType) {
    var c = this.Apis[type] && this.Apis[type].api && this.Apis[type].api.rowModel // get api for current grid
        ? this.Apis[type].api.rowModel.rowsToDisplay.length
        : -1;
    return c > 0
        ? (40+(c*21))+'px' // not perfect but close formula for grid height
        : '86%';
}

必须有一个不那么凌乱的方式..