无法更新igGrid上的筛选

Question

我有两个简单的要求

a) I need to programmatically change the number of columns displaying in igGrid
b) I need to programmatically update the filters in igGrid

我的印象是，要以编程方式更改列数，首先需要‘销毁’网格，然后重新创建它。

要更新过滤器，您只需执行以下操作

grid.igGridFiltering("filter", ([{ fieldName: "Column1", expr: true, cond: "true" }]));

当我调用我的代码时，我总是得到这个错误

cannot call methods on igGridUpdating prior to initialization; attempted to call method 'destroy'

下面是一个代码片段

scope.changeView = function(v) {
    var grid = scope.element; //from directive 
    if (grid.data("igGrid") != null) {
        grid.igGrid('destroy');
    }
    updateGrid(grid, v);
};

function updateGrid(grid, v) {
    scope.gridOptions = coreFunctions.gridOptions(); //from service 
    scope.gridOptions.dataSource = scope.dataSource;
    var cols = JSON.parse(v.Json);
    cols = cols.fields;
    scope.gridOptions.columns = [];
    angular.forEach(cols, function(value, index) {
        scope.gridOptions.columns.push({ 'headerText': value, 'key': value, width: '200px' });
    });
    grid.igGrid(scope.gridOptions); //error occurs here! 
    grid.igGrid('dataBind');
    grid.igGridFiltering("filter", ([{ fieldName: "Column1", expr: true, cond: "true" }]));
}

Answer 1

您是对的，您将需要销毁小部件，然后使用新列重新创建它。根据场景的不同，使用renderMultiColumnHeader method可能不那么痛苦，它接受一个列数组作为参数。因此，此方法将使用您传递的列重新呈现网格。

Answer 2

我知道这个问题很老，但我也有同样的问题，我发现以下是(B)的一个简单的解决方案：

假设您在视图中看到了以下内容

<div id="myGrid"></div>

这是在一个脚本中

$('#myGrid').igGrid({ ... grid options ... });

然后在div#myGrid内部呈现该小部件，包括一个table#myGrid_table后代。这似乎是您需要指定以过滤网格的元素。

也就是说，您希望在由igGrid小部件呈现的table上调用igGridFiltering，该小部件将具有以下id = id + '_table'。假设您以正确的格式提供了筛选器myFilter，这应该是可行的：

$('#myGrid_table').igGridFiltering("filter", myFilter);

至于(a)，是的，您确实需要重新创建网格，更新列，然后重新创建网格。