2015-02-10 37 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。

如果你現在刷新網格在這種情況下,電網狀態將保持不變(摺疊電網將被摺疊和展開電網將繼續展開。)

謝謝。我希望這有助於國際象棋!