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，尝试使用自己的数据使树演示工作

回答

相关问题