Copiar o conteúdo de uma célula da Grid para a área de transferência

Tutoriais
,
1

Não são raras as situações em que precisamos copiar o conteúdo de uma célula da Grid para colar em um e-mail, chat ou até mesmo para incluir em campos de um Formulário.

Para atender a essa necessidade, apresento neste tópico uma solução para implementar um botão de copiar em qualquer coluna da Grid, usando Javascript.

image

Biblioteca

Para simplificar o trabalho e aumentar a compatibilidade Cross-Browser, vamos utilizar a biblioteca clipboard.js, que funciona muito bem e já está referenciada no projeto LATROMI (clipboard.js v1.6.1).

Javascript

A implementação dessa solução consiste em criar dinamicamente um botão de “copiar” para cada elemento que conter o atributo data-clipboardCopy="true", e em seguida configurar este botão como “gatilho” para copiar o texto para a área de transferência.

Adicione os códigos Javascript abaixo no Javascript Público do sistema.

Primeiro a função que configura os elementos que terão o recurso de “copiar”.

// Essa função faz a configuração inicial, que consiste em 
// criar um botão de cópia para cada elemento que posua o atributo "data-clipboardCopy=true".
function clipboardCopyInit() {
    // Seleciona todos os elementos com o atributo
    var copyContentContainers = document.querySelectorAll('*[data-clipboardCopy="true"]');
    // Percorre os elementos encontrados
    for(var i = 0; i < copyContentContainers.length; i++) {
        var copyContentContainer = copyContentContainers[i];
        var copyButton = document.createElement('button');    
        copyButton.type = 'button';
        // Texto do botão
        copyButton.innerHTML = 'Copiar';
        // Tooltip
        copyButton.title = 'Clique para copiar para a área de transferência.' 
        copyButton.className = 'btn-clipboard-copy';
        copyButton.setAttribute('data-text', copyContentContainer.textContent);
        copyContentContainer.appendChild(copyButton);
        
        // Remove o atributo para evitar que seja processado novamente
        copyContentContainer.removeAttribute('data-clipboardCopy');
    }
    // Usa a biblioteca clipboard.js
    var clipboard = new Clipboard('.btn-clipboard-copy', { 
        text: function(btn) { 
            return btn.getAttribute('data-text'); 
        } 
    });
    // OPCIONAL: Adiciona uma mensagem no logo do navegado quando ocorrer a cópia.
    clipboard.on('success', function (e) {
      console.log('"' + e.text + '" copiado para a area de transferência!');
    });
}

Por último, adicione a chamada da função de configuração no momento em que queremos que ela seja aplicada. É importante que os dados da Grid já estejam carregados no navegador. Por isso, vamos fazer a chamada no evento window.load:


// Quando a página terminar de ser carregada, faz a configuração dos botões de cópia.
window.addEventListener('load', function(e) {
    clipboardCopyInit();
});

Agora basta recarregar as configurações do site para que o Javascript Público seja atualizado.

Consulta

Chegamos na parte onde vamos configurar as colunas da Grid que terão o recurso de “copiar”.

Para isso, basta informar o seguinte código HTML na propriedade Template das colunas que deseja adicionar o botão de “copiar”:

<div data-clipboardCopy="true">#= value #</div>

Este Template simplemente envolve o texto da célula em um elemento div que contém o atributo necessário para que seja adicionado o botão de copiar (data-clipboardCopy).

CSS

Por último, vamos adicionar um pouco de estilo ao botão “Copiar”. Para isso, informe o seguinte código no CSS Público do sistema:

.btn-clipboard-copy {
    float: right;
    border-radius:2px;
    font-size: 14px;
    opacity:0.6;
}
2 curtidas