ag-Grid，嘗試使用自己的數據使樹演示工作

我喜歡ag-Grid，因爲它不太麻煩，速度快並且可以與許多框架一起使用。ag-Grid，嘗試使用自己的數據使樹演示工作

所以我嘗試了Tree Data，不需要告訴父母和孩子之間的聯繫，只需在結構中放置數據，指定一些選項，Bingo！但是，當我插上我的API，它告訴我

"TypeError: rowData is undefined"

從AG-grid.js內即使觀看清楚地表明它具有陣列。這裏有一些關於使用內部API定製的問題。我的不是。

然後，我使用官方演示作爲基礎，設置一個Fiddler來獲取JSON中的原始數據替換演示數據，以便對其進行硬編碼以確定它是否與自己的API或其他問題有關。這裏是Plunker。請注意，它完全基於Tree Data的官方javaScript演示，樹數據示例，第一個。

如果你不希望看到Plunker，這裏是我的.js：

var columnDefs = [ 
    {headerName: "Client", field: "Client", cellRenderer: 'group'}, 
    {headerName: "Program", field: "Program"} 
    /*{headerName: "Group", field: "xgroup", cellRenderer: 'group'}, // cellRenderer: 'group'}, -- this "group" is one of the default value option for built-in cellRenderer function, not field. 
    //{headerName: "Athlete", field: "athlete"}, 
    //{headerName: "Year", field: "year"}, 
    {headerName: "Country", field: "country"} 
    */ 
]; 

var myData = [ 
    { 
     'Client': 'Goodle', 
     'Program': 'no grid', 
     'kids': [] 
    }, 
    { 
     'Client': 'Facebrook', 
     'Program': 'grids', 
     'kids': [ 
     { 
      'Client': 'Facebrook', 
      'Program': 'ag-Grid' 
     }, 
     { 
      'Client': 'Facebrook', 
      'Program': 'ui-grid' 
     } 
     ] 
    } 
    /*{xgroup: 'Group A', 
     participants: [ 
     /*{athlete: 'Michael Phelps', year: '2008', country: 'United States'}, 
     {athlete: 'Michael Phelps', year: '2008', country: 'United States'}, 
     {athlete: 'Michael Phelps', year: '2008', country: 'United States'}*/ 
    /*]}, 
    {xgroup: 'Group B', athlete: 'Sausage', year: 'Spaceman', country: 'Winklepicker', 
     participants: [ 
     {athlete: 'Natalie Coughlin', year: '2008', country: 'United States'}, 
     {athlete: 'Missy Franklin ', year: '2012', country: 'United States'}, 
     {athlete: 'Ole Einar Qjorndalen', year: '2002', country: 'Norway'}, 
     {athlete: 'Marit Bjorgen', year: '2010', country: 'Norway'}, 
     {athlete: 'Ian Thorpe', year: '2000', country: 'Australia'} 
    ]}, 
    {xgroup: 'Group C', 
     participants: [ 
     {athlete: 'Janica Kostelic', year: '2002', country: 'Crotia'}, 
     {athlete: 'An Hyeon-Su', year: '2006', country: 'South Korea'} 
    ]}*/ 
]; 

var gridOptions = { 
    columnDefs: columnDefs, 
    rowData: myData, 
    rowSelection: "single", 
    enableSorting: "true", unSortIcon: "true", 
    enableColResize: "true", 
    enableRangeSelection: "true", 
    suppressCellSelection: "false", 
    showToolPanel: "true", 
    supressCopyRowsToClipboard: true, 
    supressCellSelection: false, 
    getNodeChildDetails: getNodeChildDetails, 
    onGridReady: function(params) { 
     params.api.sizeColumnsToFit(); 
    } 
}; 

function getNodeChildDetails(rowItem) { 
    if (rowItem.Client) { 
     return { 
      group: true, 

      // open C be default 
      //expanded: rowItem.ClientName === 'Group C', 

      // provide ag-Grid with the children of this group 
      children: rowItem.kids, 

      // this is not used, however it is available to the cellRenderers, 
      // if you provide a custom cellRenderer, you might use it. it's more 
      // relavent if you are doing multi levels of groupings, not just one 
      // as in this example. 
      //field: 'group', 

      // the key is used by the default group cellRenderer 
      key: rowItem.Client 
     }; 
    } else { 
     return null; 
    } 
} 

function onFilterChanged(value) { 
    gridOptions.api.setQuickFilter(value); 
} 


// setup the grid after the page has finished loading 
document.addEventListener('DOMContentLoaded', function() { 
    var gridDiv = document.querySelector('#myGrid'); 
    new agGrid.Grid(gridDiv, gridOptions); 
});

HTML：

<html> 
<head> 
    <!-- you don't need ignore=notused in your code, this is just here to trick the cache --> 
    <script src="https://ag-grid.com/dist/ag-grid/ag-grid.js"></script> 
    <script src="script.js"></script> 
</head> 
<body> 
    <input placeholder="Filter..." type="text" 
      onpaste="onFilterChanged(this.value)" 
      oninput="onFilterChanged(this.value)" 
      onchange="onFilterChanged(this.value)" 
      onkeydown="onFilterChanged(this.value)" 
      onkeyup="onFilterChanged(this.value)"/> 
    <div id="myGrid" class="ag-fresh" style="height: 450px; margin-top: 4px;"></div> 
</body> 
</html>

需要一些專家！

來源

2017-03-05 Jeb50

您需要修改getNodeChildDetails有這樣的：

function getNodeChildDetails(rowItem) { 
    if (rowItem.Client && rowItem.kids && rowItem.kids.length > 0) {

當你擁有了它你告訴電網與Client任何項目是一個父節點，但你真正的意思是在你的數據是任何與客戶和孩子的項目是父母。

請記住，網格可以有多個層次，所以孩子也可以是父母。

來源

2017-03-05 14:28:47

哇，它的作品！但爲什麼演示不需要，因爲我的模擬演示？ – Jeb50

在演示中，子數據不同 - 子行沒有「組」字段，因此getNodeChildDetails不認爲它們是潛在的父行 –

子行沒有任何包含「組」的字段。只有父母有一個名爲**「group」**的數據字段。重命名爲**「xgroup」**，仍然有效。看看這個[plunker]（http://plnkr.co/edit/btiAzlRSWOnTjuNdvWfD?p=preview）。 ag-Grid是否會查找名稱中包含_group_的數據字段並將其視爲父級？ – Jeb50

ag-Grid，嘗試使用自己的數據使樹演示工作

回答

相關問題