ag-Grid, try to make Tree Demo work using own data

问题

I like the ag-Grid because it's less buggy, fast and works with many frameworks.

So I tried the Tree Data, no need to tell the link between parents and children, simply lay down the data in structure, specify some options, Bingo! But, when I plug in my API, it tells me

"TypeError: rowData is undefined"

from inside of ag-grid.js even though Watch clearly shows it has the array. There are some answered Question here regarding customization with internal api. Mine is not.

I then use the official demo as a base, set up a Fiddler to grab the raw data in JSON replace demo data to make it hardcoded for a test to determine if it's problem with own API or something else. Here is the Plunker. Note it's totally based on the official javaScript Demo of Tree Data, Tree Data Example, the first one.

In case you don't want to see Plunker, here is my .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>

Need some experts!

回答1:

You need to alter getNodeChildDetails to have this:

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

As you have it you're telling the grid that any item with Client is a parent node, but what you really mean in your data is any item with Client AND kids is a parent.

Remember that the grid can have multiple levels so a child can be a parent too.

来源：https://stackoverflow.com/questions/42605168/ag-grid-try-to-make-tree-demo-work-using-own-data

标签

ag-grid