Ag-Grid - Gelecek kullanım için sütunları kaydetme

Question

Ag köşesini angular1 için kullanıyorum (ve bunu sevmek) ve kullanıcılarım sütunları yeniden düzenleyebilmelerini, sıralamaları değiştirebilmelerini ve yenilendikten sonra kal. Sütunlar dairesel olmaları (kendileri için işaretçiler içerir) haricinde çok zor olmamalı ve dolayısıyla bunları ayrıştıramam.

Kodu:

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); 
     } 
} 

Ve:

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

O "dene" Her zaman başarısız: TypeError: JSON (...) [Sütun, Sütun, Sütun dairesel bir yapıya dönüştürme, Sütun, Sütun, Sütun, Sütun, Sütun, Sütun, Sütun]

Bunu nasıl yapabilirim? (daha sonra kullanmak için sütunları kaydedin)

Bunu yapmayı başarabilirsem, kodlama olmadan çeşitli görünümler oluşturabileceğim.

Answer 1

altında bunu başarmak için bir yol kontrol aşağıdaki linkten konunun daha iyi anlayabilirsiniz kendi sütun modeli oluşturmak için oldu , yeniden kaydedip ayrıştırabileceğim ve yalnızca gerekli özellikleri kaydedebileceğim.

Bu yöntem işlevlerini değerlendirdiğimde XSS'e karşı savunmasızdır, ancak bu bir çözümdür.

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); 
      }); 
     }); 
    } 
} 

Bu çözüm Ag-Grid 5 için yazılmıştır, inanıyorum ve bu yüzden hala geçerli olup olmadığından emin değilim.

Answer 2

Eğer

Chrome sendrequest error: TypeError: Converting circular structure to JSON

Ayrıca referans

https://github.com/isaacs/json-stringify-safe