【问题标题】:Get Cell value after cell rendering applied to it ag-grid将单元格渲染应用于其 ag-grid 后获取单元格值
【发布时间】:2018-08-05 20:43:00
【问题描述】:

我正在使用 ag-grid 来显示一些信息。

            var grid_column_definitions = [
                {
                    field: "id",
                    headerName: "ID",
                    cellRenderer: function (params) {
                        if (!params.data) return '';
                        return '<a ng-href="#/id/{{data.id}}">{{data.id}}</a>';
                    }
                }
]

我知道我可以使用 ag_grid api 获取单元格的值: (cell.node.data)

但这会返回原始节点。有没有办法在应用单元格渲染器后获取格式化的行(html)。

【问题讨论】:

    标签: javascript angularjs ag-grid


    【解决方案1】:

    好的,所以我找不到从模板中获取内容的任何解决方案。但是我能够使用其他不同的 ag-grid API 来实现这一点。 我主要需要这个来创建列的 csv 超链接。例如。如果单元格 a 是 www.example.com/cell_value 的超链接,我希望它存在于 csv 和超链接中。

    所以这是我的解决方案:

    scope.exportData = function(){ // function to export data, in case anyone need this.
      var params = {};
      var params.fileName = "test";
      params.processCellCallback = function(cell){
        return create_csv_link_based_on_column(cell);
      }
      scope.data.api.exportDataAsCsv(params);
    }
    

    ================

    var create_csv_link_based_on_column(cell){
                    var cellRenderer = cell.api.getColumnDef(cell.column.colId).cellRenderer; // get the cell renderer function
                    if(cellRenderer){ // if the cell has cellRenderer functiond defined.
                        var cellTemplate = cellRenderer(cell.node); // eg. <a ng-href="#/sample/{{data.id}}">{{data.id}}</a>
                        if(cellTemplate){
                            if(cellTemplate.indexOf("href=") !== -1){ // if the template has hyperlink.
                                try{
                                    var link = cellTemplate.split(/"/)[1]; // get the hyperlink. eg. #/sample/{{data.id}}
                                    var angularVariable = link.substring(link.lastIndexOf("{")+1,link.indexOf("}")); // eg. data.id
                                    var properties = angularVariable.split('.'); // eg. ["data", "id"];
                                    var propertyValue = properties.reduce((obj, prop) => obj && obj[prop], cell.node); // eg. cell.node.data.id = 16
                                    var finalLink = link.replace("{{"+angularVariable+"}}", propertyValue); // replace angular variable with the data
                                    finalLink = base_url + finalLink;
                                    var csv_link = finalLink ? '=HYPERLINK("'+finalLink+'", "'+cell.value+'")' : cell.value;
                                    return csv_link;
                                }catch(err){ // unexpected case
                                    return cell.value;
                                }
                            }
                        }
                    }
                    return cell.value;
    }
    

    【讨论】:

    • 你检查 getValue(colKey, node) ag-grid API 了吗? - 获取特定 rowNode(行)的列的值。如果您想要单元格的原始值,例如实现您自己的 CSV 导出,这将非常有用。
    • getValue 只获取计算值。它不返回呈现的单元格内容。
    猜你喜欢
    • 1970-01-01
    • 2018-02-13
    • 2017-06-11
    • 2020-02-21
    • 2021-08-11
    • 2019-01-13
    • 1970-01-01
    • 2021-03-13
    • 2017-10-25
    相关资源
    最近更新 更多