Ag-Grid - 将来の使用のために列を保存する

私はag1をang1に使用しています（愛情があります）。ユーザーに列の並べ替えや並べ替えの変更などができるようにしたいリフレッシュ後に滞在してください。列が円形（自分自身へのポインタを含む）であることを除いて、それを解析することはできません。Ag-Grid - 将来の使用のために列を保存する

コード：

var columnDefsKey = "columnDefs["+$rootScope.page+"]"; 
var savedColumns = localStorage.getItem(columnDefsKey); 
function saveColumnsState() { 
    var currentCol = vm.gridOptions.columnApi.getAllColumns(); 
    if (!angular.equals(currentCol, savedColumns)) 
     try { 
      localStorage.setItem(columnDefsKey, JSON.stringify(currentCol)); 
     } catch (ex) { 
      log(ex); 
      log(currentCol); 
     } 
}

そして：はTypeError：

onColumnEverythingChanged: saveColumnsState, 
onColumnVisible: saveColumnsState, 
onColumnPinned: saveColumnsState, 
onColumnResized: saveColumnsState, 
onColumnRowGroupChanged: saveColumnsState, 
onColumnValueChanged: saveColumnsState, 
onColumnMoved: saveColumnsState, 
onColumnGroupOpened: saveColumnsState,

それは毎回 "試す" に失敗したJSON（...）に円形構造の変換【コラム、コラム、コラム、列、列、列、列]

どうすればいいですか？（後で使用するために列を保存する）

私がそれを行うことができれば、私はコーディングせずにいくつかのビューを作成することができます。

出典

2016-04-08 Amit

以下を確認して、これを達成するための方法は、私自身の列モデルを構築することでした私は再び保存して解析することができ、必要なプロパティだけを保存することができます。

このメソッドは、私が関数を評価しているので、XSSは脆弱ですが、それは有効な解決策です。

columnsApi: { 
    key: null, 
    grid: null, 
    newColumnModel: { 
     headerName: "", 
     width: 200, 
     valueGetter: "", 
     filter: 'text', 
     aggFunc: 'none', 
     filterParams: {apply: true} 
    }, 
    setKey: function (key) { 
     this.key = key; 
    }, 
    setGrid: function (grid) { 
     this.grid = grid; 
    }, 
    format: function (columns) { 
     var format = []; 
     angular.forEach(columns, function (col) { 
      var colDef = { 
       width: col.actualWidth, 
       pinned: col.pinned, 
       hide: !col.visible 
      }; 
      format.push(angular.extend(col.colDef, colDef)); 
     }); 
     return format; 
    }, 
    getIDs: function (columns) { 
     var ids = []; 
     angular.forEach(columns, function (col) { 
      ids.push(col.colId); 
     }); 
     return ids; 
    }, 
    stringify: function (columns) { 
     return JSON.stringify(columns, function (key, value) { 
      if (typeof value === "function") 
       return "/Function(" + value.toString() + ")/"; 
      return value; 
     }); 
    }, 
    parse: function (string) { 
     return JSON.parse(string, function (key, value) { 
      if (typeof value === "string" && 
       value.startsWith("/Function(") && 
       value.endsWith(")/")) { 
       value = value.substring(10, value.length - 2); 
       return eval("(" + value + ")"); 
      } 
      return value; 
     }); 
    }, 
    add: function (column) { 
     if (this.grid === null) { 
      console.error("Assertion error: grid must not be null"); 
      return; 
     } 

     if(column.aggFunc == 'none') 
      column.aggFunc = undefined; 
     var groups = this.get().groups; 
     var newColumns = this.format(getGridColumns(this.grid)); 
     newColumns.push(column); 
     this.grid.api.setColumnDefs(newColumns); 
     this.setGroups(groups); 
    }, 
    save: function() { 
     var self = this; 
     if (this.key === null) { 
      console.error("Assertion error: key must not be null"); 
      return; 
     } 
     if (this.grid === null) { 
      console.error("Assertion error: grid must not be null"); 
      return; 
     } 

     var savedOptions = { 
      columns: self.format(getGridColumns(self.grid)), 
      groups: self.getIDs(self.grid.columnApi.getRowGroupColumns()), 
      sorting: self.grid.api.getSortModel(), 
      filter: self.grid.api.getFilterModel() 
     }; 

     localStorage.setItem(this.key, this.stringify(savedOptions)); 
    }, 
    // Get function uses "eval" - XSS vulnerable. 
    get: function() { 
     if (this.key === null) { 
      console.error("Assertion error: key must not be null"); 
      return; 
     } 
     var options = localStorage.getItem(this.key); 
     if (options) 
      options = this.parse(options); 

     return options; 
    }, 
    remove: function (field) { 
     if (this.grid === null) { 
      console.error("Assertion error: grid must not be null"); 
      return; 
     } 
     var newColumns = this.format(getGridColumns(this.grid)); 
     angular.forEach(newColumns, function (col, key) { 
      if (col.field == field) 
       newColumns.splice(key, 1); 
     }); 
     this.grid.api.setColumnDefs(newColumns); 
    }, 
    setGroups: function (groups) { 
     var self = this; 
     angular.forEach(groups, function (id) { 
      angular.forEach(getGridColumns(self.grid), function (col) { 
       if (col.colId == id) 
        self.grid.columnApi.addRowGroupColumn(col); 
      }); 
     }); 
    } 
}

このソリューションは、私は信じていたAgグリッド5のために書かれたので、私はそれがまだ保持しているかどうかわからないですました。

出典

2017-01-31 17:29:05 Amit