2015-02-10 82 views
0

ng网格具有网格选项“showGroupPanel”,它允许您在网格中使用柱状标题并按该列对内容进行排序。记住ng网格分组打开||折叠状态

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

在我的应用程序,我想开||关闭属性各组被存储在本地存储,当重新加载页面使用。对于这些团体是否有财产或者是否有人能够以其他方式解决这个问题?

回答

2

有这些属性。我发现他们在这里:

$ scope.gridOptions $ gridScope.renderedRows [] =倒塌真或假 和 $ scope.gridOptions $ gridScope.configGroups包含分组列信息

+0

非常感谢你!走了一些摆弄,但最终解决了。 通过添加自定义aggregateTemplate捕获组切换事件。然后将每个组崩溃状态保存在webStorage中,并通过组进行循环,并设置加载ng-grid时的状态。 – Solders 2015-02-13 14:24:58

0

首先我。我不想把以前的反应归功于伊莫斯,这让我走上了正轨。总之:

您可以通过访问每个组内的格栅:

$scope.gridOptions.ngGrid.rowFactory.aggCache 

每个组都有一个真崩溃值|假

当用户打开或折叠一组我能通过添加自定义aggregateTemplate我gridOptions赶上事件:

$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中,并且可以捕获切换事件并更新该值。

下一步是简单地将初始崩溃状态中的localStorage你的价值比较,在NG-电网已加载,并且在必要时通过切换行:

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

我知道有很多的方法来优化这个,我只是在寻找一种快速实现它的方法,一个poc。

改进的想法是受欢迎的。

0

我已经这样做了请看看这是否方便。

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

如果你现在刷新网格在这种情况下,电网状态将保持不变(折叠电网将被折叠和展开电网将继续展开。)

谢谢。我希望这有助于国际象棋!