angularjs 如何在ag-grid表中实现进度条

hjzp0vay  于 2022-12-17  发布在  Angular
关注(0)|答案(3)|浏览(292)

我必须在ag-grid表列实现进度条,我在ag-grid文档部分搜索,但没有什么。任何其他网站相同。谢谢你在先进。

jutyujz0

jutyujz01#

可以使用列的cellRenderer配置来指定应该在单元格中呈现哪个函数或组件。
这里有一个例子链接,并没有真正讨论如何呈现进度条,但是它展示了一些在单元格中呈现自定义元素的例子。你可以根据自己的需要修改这些例子的HTML来返回和呈现一个HTML div。
https://www.ag-grid.com/javascript-grid-cell-rendering-components/

nnvyjq4y

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

yqkkidmi3#

一种可能的方法是:为网格创建自己的加载覆盖。
https://www.ag-grid.com/javascript-grid-overlays/

https://www.ag-grid.com/javascript-grid-overlay-component/
在覆盖图中,您可以使用所选的任何进度条(例如Bootstrap)。

相关问题