ag-grid 列搜索不适用于对象作为单元格值答案

【问题标题】：ag-grid column search not working with object as cell valueag-grid 列搜索不适用于对象作为单元格值
【发布时间】：2017-10-09 03:18:51
【问题描述】：

我正在使用 cell_renderer 来定义我的单元格，如下所示：

        var cell_renderer = function(params) {
            var element = "";
            var values = params.value;
                angular.forEach(values, function(each_param){
                    element += '<a href="#/workunit/' + each_param.id + '" target="_blank">' + each_param.id +
                            '<span class="text-danger text-bold">'+
                            '<span class="" title="' + inactive_message +
                            '">' + inactive_flag + ' </span>' +
                            '<span class="" title="' + misconfigured_message +
                            '"> ' +misconfigured_flag + '</span>'+
                            '</span></a><br>';
                })
            return element;
        };

我的栏目定义是这样的：

                var testObject = {};
                testObject.headerName = "my header";
                testObject.field = each_branch;
                testObject.width = 200;
                testObject.cellClassRules = cell_class_rules;
                testObject.cellRenderer = cell_renderer;
                columnDefs.push(testObject);

这里 testObject.field = each_branch ，是一个json对象。

因此，内置搜索功能在 ag-grid 中不起作用。任何人都可以在这里帮助我。

【问题讨论】：

你有解决办法吗？

标签： angularjs ag-grid

【解决方案1】：

解决方案是在过滤器参数中提供valueGetter。

比如说你有{ name: 'Some Name', id: 1 }。在这种情况下，您想按名称过滤。所以：

{
  filter: 'agTextColumnFilter',
  filterParams: {
    valueGetter: params => {
      return params.data.name
    }
  }
}

【讨论】：

【解决方案2】：

默认情况下，来自 Ag-grid 的 textFormatter 返回一个字符串表示，如果您包含 textFormatter 并在 textCustomComparator 中返回相同的对象，您将拥有来自 valueGetter 的对象：

   filter: "agTextColumnFilter",
filterParams: {
    textCustomComparator: function  (filter, value, filterText) {
        //value is the object from valueGetter
    },
    textFormatter: function(r) { 
        //this is the solution
        return r; 
    }, 
    valueGetter: function getter(params) {
        return {
            ...
        };
    }
}

【讨论】：

【解决方案3】：

尝试在您的列上设置文本过滤器属性：

testObject.filter:'text',
testObject.filterParams:{
...
}

然后在filterParams对象中实现textCustomComparator函数：

https://www.ag-grid.com/javascript-grid-filter-text/#gsc.tab=0

【讨论】：

感谢回复，我试过用这个，但我发现单元格的值是[object object]。我怎样才能在这里获得原始价值？ textCustomComparator: function(filter, value, filterText) { console.log(filter); console.log(JSON.stringify(value)); console.log(filterText); }

【解决方案4】：

当使用作为对象的列时，您至少有 2 个选项：

在列上指定一个 valueGetter 函数。如果这样做，表格将不再包含对象，而是 valueGetter 返回的值。

valueGetter: this.getDateValueGetter("dateCol")

私有 getDateValueGetter(col: string): Function { 返回函数（p：ValueGetterParams）{ 如果（！p.data）{ 返回空值； } 返回 this.ui.convertStringToDate(p.data[col], "YYYY-MM-DD"); } }
如果您希望表包含对象，请在列上同时指定 keyCreator 函数和 valueFormatter 函数。如果您这样做，列、过滤器和分组将按预期工作。

{ keyCreator: (param) => {return param.value}, valueFormatter: (param) => {return param.value} }

【讨论】：