我必须在ag-grid表列实现进度条,我在ag-grid文档部分搜索,但没有什么。任何其他网站相同。谢谢你在先进。
jutyujz01#
可以使用列的cellRenderer配置来指定应该在单元格中呈现哪个函数或组件。这里有一个例子链接,并没有真正讨论如何呈现进度条,但是它展示了一些在单元格中呈现自定义元素的例子。你可以根据自己的需要修改这些例子的HTML来返回和呈现一个HTML div。https://www.ag-grid.com/javascript-grid-cell-rendering-components/
nnvyjq4y2#
这样做可能会帮助你(它是JavaScript版本)。要获得更多信息,请点击下面的链接。可能会帮助你https://docs.google.com/document/d/10K54wwj12IH9P1CI1Uv2k3MD__P8-LQDYqL8ofe9Exk/edit?usp=sharing进程栏来自**https://getbootstrap.com/docs/4.0/components/progress/**
const columnDefs = [ { headerName: "Process Bar", minWidth: 150, field: "process_bar", sortable: true, valueFormatter: function (params) { if (params.value !== undefined) { if(params.value==""){ return '<div class="progress"> <div class="progress-bar" role="progressbar"style="width: 25%;" aria-valuenow="'+params.value+'" aria-valuemin="0" aria-valuemax="100">25% </div> </div>'; }else{ return params.value; } } } } ]; const gridOptions = { defaultColDef: { flex: 1, resizable: true, }, getRowStyle: params => { if (params.data != undefined){ if (params.data.rowColor=="blue") { return { background: '#f9f9f9' }; }else{ return { background: 'white' }; } } }, components: { loadingRenderer: function (params) { if (params.value !== undefined) { return params.value; } else { return '<img src="loading.gif">'; } }, }, singleClickEdit: true, rowBuffer: 0, rowSelection: 'multiple', caseSensitive: false, rowModelType: 'infinite', columnDefs: columnDefs, pagination: false, paginationPageSize:100, cacheOverflowSize: 2, maxConcurrentDatasourceRequests: 1, infiniteInitialRowCount: 1000, maxBlocksInCache: 10, overlayNoRowsTemplate:'<span style="padding: 10px; border: 2px solid #444; background: lightgoldenrodyellow;">No Data Found!</span>', };
yqkkidmi3#
一种可能的方法是:为网格创建自己的加载覆盖。https://www.ag-grid.com/javascript-grid-overlays/或https://www.ag-grid.com/javascript-grid-overlay-component/在覆盖图中,您可以使用所选的任何进度条(例如Bootstrap)。
3条答案
按热度按时间jutyujz01#
可以使用列的cellRenderer配置来指定应该在单元格中呈现哪个函数或组件。
这里有一个例子链接,并没有真正讨论如何呈现进度条,但是它展示了一些在单元格中呈现自定义元素的例子。你可以根据自己的需要修改这些例子的HTML来返回和呈现一个HTML div。
https://www.ag-grid.com/javascript-grid-cell-rendering-components/
nnvyjq4y2#
这样做可能会帮助你(它是JavaScript版本)。要获得更多信息,请点击下面的链接。可能会帮助你
https://docs.google.com/document/d/10K54wwj12IH9P1CI1Uv2k3MD__P8-LQDYqL8ofe9Exk/edit?usp=sharing
进程栏来自**https://getbootstrap.com/docs/4.0/components/progress/**
yqkkidmi3#
一种可能的方法是:为网格创建自己的加载覆盖。
https://www.ag-grid.com/javascript-grid-overlays/
或
https://www.ag-grid.com/javascript-grid-overlay-component/
在覆盖图中,您可以使用所选的任何进度条(例如Bootstrap)。