404

D7net
:/ var / www / html / crsys /
Filename : testeGrid.html
back
<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8" />
  <title>AG Grid com Scroll Vertical</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>
    body {
      font-family: Arial, sans-serif;
      margin: 20px;
    }
    #myGrid {
      height: 325px; /* altura fixa alterada para 350px */
      width: 100%;
      margin-top: 4px;
      overflow-y: auto; /* garante barra de rolagem vertical no container */
    }
    label {
      margin-right: 10px;
    }
    input, textarea {
      margin-right: 20px;
      padding: 5px;
      font-family: Arial, sans-serif;
      font-size: 0.8rem;
    }
    textarea {
      vertical-align: middle;
    }
    button {
      padding: 6px 12px;
    }

    .header-center {
      text-align: center !important;
    }

    .text-center {
      text-align: center;
    }
  </style>
</head>
<body>

  <h2>Adicionar e Editar dados via Duplo Clique no AG Grid</h2>

  <div>
    <label for="idInput">ID:</label>
    <input type="number" id="idInput" placeholder="Digite o ID" />

    <label for="nomeInput">Nome:</label>
    <input type="text" id="nomeInput" placeholder="Digite o nome" />

    <label for="idadeInput">Idade:</label>
    <input type="number" id="idadeInput" placeholder="Digite a idade" />

    <label for="descricaoInput">Descrição:</label>
    <textarea id="descricaoInput" rows="5" cols="40" placeholder="Digite a descrição"></textarea>

    <button id="addBtn">Adicionar</button>
  </div>

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

  <script>
    const tooltipMsg = "Duplo Clique edita Linha";

    const columnDefs = [
      {
        headerName: "ID",
        field: "id",
        sortable: true,
        filter: true,
        minWidth: 50,
        maxWidth: 80,
        tooltipField: 'tooltip',
        cellClass: 'text-center',
        headerClass: 'header-center'
      },
      {
        headerName: "Nome",
        field: "nome",
        sortable: true,
        filter: true,
        minWidth: 300,
        tooltipField: 'tooltip',
        headerClass: 'header-center'
      },
      {
        headerName: "Idade",
        field: "idade",
        sortable: true,
        filter: true,
        minWidth: 50,
        maxWidth: 120,
        tooltipField: 'tooltip',
        cellClass: 'text-center',
        headerClass: 'header-center'
      },
      {
        headerName: "Descrição",
        field: "descricao",
        sortable: true,
        filter: true,
        minWidth: 350,
        tooltipField: 'tooltip',
        headerClass: 'header-center',
        cellRenderer: params => {
          const value = params.value || '';
          return `<textarea rows="5" cols="40" style="resize: none; overflow: auto; font-size: 0.8rem;" readonly>${value}</textarea>`;
        }
      }
    ];

    const gridOptions = {
      columnDefs: columnDefs,
      rowData: [], // começa vazio
      defaultColDef: {
        resizable: true,
        tooltipComponent: 'agTooltipComponent',
        cellStyle: { fontSize: '0.8rem' }
      },
      pagination: false,  // desativa paginação pra manter scroll interno
      getRowHeight: () => 92, // altura para textarea
      onRowDoubleClicked: event => {
        const data = event.data;
        if (!data) return;

        document.getElementById('idInput').value = data.id;
        document.getElementById('nomeInput').value = data.nome;
        document.getElementById('idadeInput').value = data.idade;
        document.getElementById('descricaoInput').value = data.descricao || '';

        gridOptions.api.applyTransaction({ remove: [data] });
      },
      onGridReady: params => {
        gridOptions.api = params.api;
        gridOptions.columnApi = params.columnApi;

        // Adiciona dados de exemplo para testar barra de rolagem
        const exemploDados = [];
        for(let i=1; i<=20; i++) {
          exemploDados.push({
            id: i,
            nome: "Nome " + i,
            idade: 20 + i,
            descricao: "Descrição longa para teste do textarea e scroll interno do grid. Linha " + i,
            tooltip: tooltipMsg
          });
        }
        gridOptions.api.setRowData(exemploDados);
      }
    };

    const eGridDiv = document.querySelector('#myGrid');
    new agGrid.Grid(eGridDiv, gridOptions);

    function adicionarLinha() {
      const id = document.getElementById('idInput').value.trim();
      const nome = document.getElementById('nomeInput').value.trim();
      const idade = document.getElementById('idadeInput').value.trim();
      const descricao = document.getElementById('descricaoInput').value.trim();

      if (!id || !nome || !idade) {
        alert('Por favor, preencha todos os campos antes de adicionar.');
        return;
      }

      const novaLinha = {
        id: Number(id),
        nome: nome,
        idade: Number(idade),
        descricao: descricao,
        tooltip: tooltipMsg
      };

      if (!gridOptions.api) {
        alert('Grid não está pronta. Tente novamente.');
        return;
      }

      gridOptions.api.applyTransaction({ add: [novaLinha] });

      document.getElementById('idInput').value = '';
      document.getElementById('nomeInput').value = '';
      document.getElementById('idadeInput').value = '';
      document.getElementById('descricaoInput').value = '';
    }

    document.getElementById('addBtn').addEventListener('click', adicionarLinha);
  </script>

</body>
</html>