Блог

Главная - Вопросы по программированию - Задать путь к данным для сетки древовидных данных ag

Задать путь к данным для сетки древовидных данных ag

#ag-grid #ag-grid-react

#ag-grid #ag-grid-реагировать

Вопрос:

У меня есть данные, подобные приведенным ниже

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

Я хочу отображать данные дерева с помощью модели строк на стороне клиента

как задать путь получения данных и отобразить родительскую строку с именем x и дочерние строки с именами y и c?

Ответ №1:

вложенные дочерние элементы сложно использовать в режиме TreeData. вам необходимо реструктурировать ваши данные в datapath формате, чтобы упростить отображение grid. Я написал простую функцию выравнивания для организации данных в иерархии, чтобы их можно было легко использовать в grid. Также в официальной документации это очень плохо документировано, поэтому имеет смысл реструктурировать наши данные в соответствии с grid.

 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 amp; 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>