Question

我有如下数据

let data = [{id: 1,name: 'x', children: [{name:'y', id:2}, {name:'c', id: 3}]}]

我想用客户端行模型显示树数据

如何设置getdata路径并显示名称为x的父行以及名称为y和c的子行？

Answer 1

嵌套的孩子很难在TreeData模式下使用。您需要以datapath格式重组数据，以使网格渲染变得更加容易。我编写了一个简单的flatten函数来按层次结构组织数据，以便网格可以轻松使用它。另外，在official documentation上，它的文档记录很差，因此我们有必要根据网格重新构造数据。

var rawData = [{id:9,name:'xx'},{id:10,name:'yy',children: [{
    name: 'yyy',
    id: 21,}]},{
  id: 1,
  name: 'x',
  children: [{
    name: 'y',
    id: 2,
    children: [{
      name: 'a',
      id: 4
    }, {
      name: 'b',
      id: 5
    }]
  }, {
    name: 'c',
    id: 3,
    children: [{
      name: 'd',
      id: 6
    }, {
      name: 'e',
      id: 7
    }]
  }]
}];
//function to flatten and make heirarchy

function flatten(arr, parentref) {
  return arr ? arr.reduce((result, item) => [

    ...result,
    {
      name: item.name,
      id: item.id,
      hierarchy: parentref ? [...parentref, item.name] : [item.name]
    },
    ...flatten(item.children, parentref ? [...parentref, item.name] : [item.name])
  ], []) : [];
}
var rowData = flatten(rawData);
var gridOptions = {
  columnDefs: [{
    field: 'id'
  }],
  defaultColDef: {
    flex: 1,
  },
  autoGroupColumnDef: {
    headerName: 'name',
    minWidth: 300,
    cellRendererParams: {
      suppressCount: true,
    },
  },
  rowData: rowData,
  treeData: true, // enable Tree Data mode
  animateRows: true,
  groupDefaultExpanded: -1, // expand all groups by default
  getDataPath: function(data) {
    return data.hierarchy;
  },
};

function onFilterTextBoxChanged() {
  gridOptions.api.setQuickFilter(
    document.getElementById('filter-text-box').value
  );
}

// wait for the document to be loaded, otherwise
// ag-Grid will not find the div in the document.
document.addEventListener('DOMContentLoaded', function() {
  // lookup the container we want the Grid to use
  var eGridDiv = document.querySelector('#myGrid');

  // create the grid passing in the div to use together with the columns & data we want to use
  new agGrid.Grid(eGridDiv, gridOptions);
});

.example-wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
}

#myGrid {
  flex: 1 1 0px;
  width: 100%;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <script>
    var __basePath = './';
  </script>
  <style media="only screen">
    html,
    body {
      height: 100%;
      width: 100%;
      margin: 0;
      box-sizing: border-box;
      -webkit-overflow-scrolling: touch;
    }
    
    html {
      position: absolute;
      top: 0;
      left: 0;
      padding: 0;
      overflow: auto;
    }
    
    body {
      padding: 1rem;
      overflow: auto;
    }
  </style>
  <script src="https://unpkg.com/@ag-grid-enterprise/all-modules@24.1.0/dist/ag-grid-enterprise.min.js"></script>
  <link rel="stylesheet" href="styles.css">
</head>

<body>
  <div class="example-wrapper">
    <div style="margin-bottom: 5px;">
      <input type="text" id="filter-text-box" placeholder="Filter..." oninput="onFilterTextBoxChanged()" />
    </div>
    <div id="myGrid" class="ag-theme-alpine"></div>
  </div>

</body>

</html>

设置树数据农业网格的数据路径

1 个答案: