404

D7net
:/ var / www / html / crsys /
Filename : GridComMysql.html
back
<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8" />
  <title>AG Grid + PHP/MySQL</title>

  <link rel="stylesheet" href="https://unpkg.com/ag-grid-community/styles/ag-grid.css" />
  <link rel="stylesheet" href="https://unpkg.com/ag-grid-community/styles/ag-theme-alpine.css" />

  <script src="https://unpkg.com/ag-grid-community@28.2.1/dist/ag-grid-community.min.noStyle.js"></script>

  <style>
    html, body {
      height: 100%;
      margin: 0;
      font-family: Arial, sans-serif;
    }
    #myGrid {
      height: 400px;         /* altura fixa */
      width: auto;           /* largura ajustada dinamicamente */
      min-width: 300px;      /* largura mínima opcional */
      margin: 20px 0;
    }
    /* Alinha o painel de paginação à direita */
    .ag-paging-panel {
      justify-content: flex-end !important;
    }
  </style>
</head>
<body>

  <h2>AG Grid - Dados do MySQL via PHP</h2>

  <div id="myGrid" class="ag-theme-alpine"></div>

  <script>
    const columnDefs = [
      { headerName: "ID", field: "id", sortable: true, filter: true, minWidth: 50, maxWidth: 100 },
      { headerName: "Nome", field: "nome", sortable: true, filter: true, minWidth: 150, flex: 1 },
      { headerName: "Idade", field: "idade", sortable: true, filter: true, minWidth: 50, maxWidth: 100 }
    ];

   const gridOptions = {
  columnDefs: columnDefs,
  pagination: true,
  paginationPageSize: 5,
  defaultColDef: {
    resizable: true,
  },

  // Evento que dispara quando uma linha é clicada
  onRowClicked: event => {
    console.log('Linha clicada:', event.data);
    alert(`Você clicou na linha com ID: ${event.data.id}, Nome: ${event.data.nome}, Idade: ${event.data.idade}`);
  }
};
    const eGridDiv = document.querySelector('#myGrid');
    new agGrid.Grid(eGridDiv, gridOptions);

    fetch('dados.php')
      .then(response => response.json())
      .then(data => {
        if (data.erro) {
          console.error('Erro no servidor:', data.erro);
          alert('Erro ao carregar dados: ' + data.erro);
          return;
        }

        // Multiplicador de pixels por caractere, ajuste conforme fonte usada
        const pixelsPorCaractere = 13;

        // Calcula largura total com base no maxLenTotal vindo do PHP
        const larguraCalculada = data.maxLenTotal * pixelsPorCaractere;
//console.log('larguraCalculada: ',larguraCalculada);
        // Aplica largura calculada ao container do grid
        eGridDiv.style.width = larguraCalculada  + 'px';

        // Define os dados no grid
        gridOptions.api.setRowData(data.dados);

        // Ajusta a largura das colunas automaticamente
        gridOptions.columnApi.autoSizeAllColumns();
      })
      .catch(error => {
        console.error('Erro ao buscar dados:', error);
        alert('Erro ao buscar dados do servidor.');
      });

	  
  </script>

</body>
</html>