Question

我喜欢ag-Grid，因为它的bug少，速度快，适用于许多框架。

所以我尝试了树数据，不需要告诉父母和孩子之间的联系，只需在结构中放下数据，指定一些选项，宾果！但是，当我插入我的API时，它会告诉我

＆＃34; TypeError：rowData未定义＆＃34;

来自ag-grid.js内部，即使Watch清楚地显示它有阵列。这里有一些回答的问题，关于内部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>

需要一些专家！

Answer 1

您需要更改getNodeChildDetails以使其具有：

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

正如您所知，您告诉网格任何Client的项目都是父节点，但您在数据中的真正含义是客户端和孩子是父母的任何项目。

请记住，网格可以有多个级别，因此孩子也可以是父级。

ag-Grid，尝试使用自己的数据进行Tree Demo工作

1 个答案: