Question

ng-grid具有gridoption＆＃34; showGroupPanel＆＃34;它允许您在网格中输入一个列标题，并按该列对内容进行排序。

var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function($scope) {
    $scope.myData = [{name: "Moroni", age: 50},
                     {name: "Tiancum", age: 43}
    $scope.gridOptions = { 
        data: 'myData',
        showGroupPanel: true
    };
});

见这里的例子： http://plnkr.co/edit/Bo11ckeWFiMyJ4tyLVWC?p=preview

在我的应用程序中，我希望每个组的open || closed属性存储在本地存储中，并在重新加载页面时使用。是否有团体的财产或任何人能够以其他方式解决这个问题？

Answer 1

这些属性。我在这里找到了他们：

$ scope.gridOptions。$ gridScope.renderedRows []。collapsed = true或false 和 $ scope.gridOptions。$ gridScope.configGroups包含分组列信息

Answer 2

首先，我不赞成Imyers之前的回应，这让我走上正轨。总之：

您可以通过以下方式访问网格中的每个组：

$scope.gridOptions.ngGrid.rowFactory.aggCache

每个组的折叠值为true | false

当用户打开或折叠组时，我可以通过在gridOptions上添加自定义aggregateTemplate来捕获事件：

$scope.gridOptions = { 
    data: "myData",
    showGroupPanel: true,
    aggregateTemplate: 
    "<div ng-click='row.toggleExpand(); saveGroupState()' ng-style='rowStyle(row)' class='ngAggregate ng-scope' style='top: 0px; height: 48px; left: 0px;'>"+
        "<span class='ngAggregateText ng-binding'>"+
            "{{row.label CUSTOM_FILTERS}} ({{row.totalChildren()}} {{AggItemsLabel}})"+
        "</span>"+
        "<div ng-class="{true: 'ngAggArrowCollapsed', false: 'ngAggArrowExpanded'}[row.collapsed]"></div>"+
    "</div>"
}

saveGroupState（）函数然后根据行标签

在localStorage中保存每个行的崩溃状态。

$scope.saveGroupState = function () {
   var groups = $scope.gridOptions.$gridScope.renderedRows;
   for (var i = 0; i < groups.length; i++) {
        localStorage.setItem("taskListGroup_" + groups[i].label, groups[i].collapsed);
   }
}

现在，您可以在localStorage中保存组的状态，以及捕获切换事件并更新该值的函数。

下一步是在ng-grid加载时简单地将初始崩溃状态与localstorage中的值进行比较，并在必要时使用以下方法切换行：

$scope.gridOptions.ngGrid.rowFactory.aggCache[rowIndex].toggleExpand();

我意识到有很多方法可以优化它，我只是想找到一种方法来快速使它工作，一个poc。

欢迎改进的想法。

Answer 3

我这样做了。请看看这对你来说方便。

请转到ng-grid.js并将 groupsCollapsedByDefault 设为false。

现在，如果在这种情况下刷新网格，网格状态将保持不变（折叠网格将折叠，扩展网格将保持展开。）

谢谢。我希望这会有所帮助，国际象棋!!

记住ng-grid分组打开||折叠状态

3 个答案: