Documentação Droptables

 

Introdução

Droptables é uma extensão do Joomla usada para gerenciar tabelas HTML no Joomla com uma interface semelhante a uma planilha.

Droptables-table-extension

Principais características:

  • Gerenciar tabelas como em uma planilha
  • 6 temas incluídos
  • Totalmente gerenciado de qualquer editor
  • Sincronização do Excel e do Google Sheets
  • Economia automática AJAX
  • Dados classificáveis ​​no frontend
  • Editor de estilo de célula, linha e coluna
  • Copiar célula com o recurso arrastar e soltar
  • Copie a tabela completa em um clique
  • Formato de células HTML
  • Editor de código CSS avançado

 

I. DROPTABLES INSTALAR

1.1 Instale

Nosso componente é compatível com o Joomla 3.x. Todos os recursos e integrações de terceiros estão incluídos em todas as associações.
Para instalar nosso componente, você precisa baixar o arquivo .zip de extensão e usar o instalador padrão do Joomla.

joomla-install

 

Em seguida, clique no botão Browse> Upload and Install, componentes, módulos e plugins serão instalados ativados por padrão.

 

1.2 Atualização e atualizador automático

Para atualizar a extensão, você pode instalar uma nova versão sobre a antiga baixando o arquivo ZIP do JoomUnited ou use o atualizador automático (recomendado).

Droptable-update

O atualizador automático, que envia a notificação de atualização, está embutido na extensão do Joomla que você instalou. Assim, você será notificado como qualquer outra extensão no painel ou usando o menu: Extensão> Gerenciar> menu Atualizar.

Entre na sua conta para atualizar

Você precisa fazer o login na sua conta JoomUnited para atualizar todas as suas extensões do JoomUnited Joomla. Para acessar a configuração principal do componente, clique no botão Guia de atualização ao vivo. Na parte inferior, você encontrará um botão de login.

atualização ao vivo

 

Digite suas credenciais JoomUnited, o mesmo que você usa para fazer o login aqui @ www.joomunited.com

login-joomunited

 

O botão ficará laranja, parabéns! Agora você pode atualizar todas as extensões do JoomUnited neste site! Se sua assinatura expirar, você receberá um link de renovação e um texto explicando isso.

conta vinculada

Nota: um único login permitirá que você atualize todas as extensões do JoomUnited (referentes à sua associação). O login não expira a menos que você o desconecte.

II. GERIR TABELAS

2.1 Gerenciar tabelas de artigos ou componentes

Quando o Droptables é instalado, você tem uma entrada de componente, menu Componentes> Droptables e um botão de editor que é exibido abaixo do seu editor. Clique nele para abrir a visualização principal do Droptables.

Editor droptables

 

A interface do gerenciador de tabelas é aberta em uma mesa de luz do editor:

droptables-lightbox-aberto

 

Quando você quiser inserir uma tabela no seu editor, use o botão superior direito Inserir esta tabela para colocá-lo em seu artigo. Em seguida, a tabela será materializada com uma área cinza e um ícone do tipo Excel.

tabela no editor

 

Se você clicar na área e depois no botão Droptables novamente, a tabela anteriormente adicionada será carregada.

 

2.2 Gerenciar tabelas e categorias

Tabelas são classificadas em categorias. Você pode ter quantas tabelas quiser dentro das categorias. Para criar uma categoria de tabela, clique em Nova categoria de mesa no centro superior. Para criar uma nova tabela, basta clicar no Criar a tabela.

categorias de tabelas

 

Nota: uma categoria e uma tabela padrão já são criadas durante a instalação do componente. Você pode mover tabelas e categorias usando drag'n drop.

mesa-mova

 

A categoria pode ser gerenciada colocando o mouse nela, você poderá editar o nome, copiar ou excluir a tabela.

Nome da mesa

 

2.3 Edição de mesa

Para adicionar dados em tabelas, você precisa agir como se estivesse em um spreadsheat. Clicar duas vezes em uma célula lhe trará a possibilidade de atualizar o conteúdo, um único clique para selecionar uma / algumas células (e aplicar estilo, por exemplo).

edit-cell

Para adicionar linhas ou colunas, clique no + na borda da tabela:

adicionar linha de tabela

 

Ou use o botão direito.

clique com o botão direito

 

Para copiar as células, você pode usar CTRL + C / CTRL + V ou você também pode colocar o mouse no canto inferior direito da célula e trazê-lo na direção desejada.

cópia-célula

 

Nota: todas as modificações são instantaneamente salvas automaticamente com uma mensagem no canto superior direito. Você tem a opção de desativar esse recurso do Droptables> Opções

salvar mesa

 

 

No menu do botão direito, você pode desfazer as modificações mais recentes, todas as mais recentes desde que você recarregou a página. O Droptables mantém um backup da modificação que você fez e é capaz de restaurá-lo.

desfazer-ação

As células também podem ser mescladas. Selecione 2 células ou mais e clique com o botão direito. Um menu permitirá que você faça a fusão.

 

2.4 Edição de conteúdo avançada

Recentemente, adicionamos um novo recurso na interface de edição. Agora você pode adicionar conteúdo HTML com um editor WYSIWYG dentro de cada célula. Selecione uma célula à direita, vá para a aba Formato> HTML

célula html

 

Agora, quando você editar a célula, você terá um editor de HTML. Ele também inclui todo o botão de conteúdo do editor, aqui eu usei o botão de imagem, por exemplo. Os botões do editor disponíveis são configuráveis ​​como uma opção.

botão do editor

 

 

2.5 Importação / exportação de planilhas e Excel

 

Você pode importar e exportar planilhas no Droptables usando nossa ferramenta dedicada. Tem que ser ativado a partir da configuração: Componentes> Droptables> Opções

excel-import

 

As tabelas podem ser importadas do Excel ou do Open Office. O formato será detectado automaticamente e importado. Observe que somente a primeira página do Excel será importada. A exportação pode ser feita no formato Excel 2003 ou 2007.

Excel - folha de importação e exportação

 

Você também pode importar ou exportar apenas dados da tabela ou dados da tabela + estilos. Os dados de importação são muito úteis para preservar seu layout na importação.

 

III ESTILANDO AS MESAS

3.1 Formato

A guia de formato está disponível à direita da tela por padrão. Ele contém diferentes parâmetros de estilo.

 

formato de tabela

  • Tipo de célula: padrão ou HTML (com editor). O tipo padrão permite fazer cálculos com o HTML inserindo conteúdo HTML como imagens.
  • O fundo da célula é sobre definir a cor de fundo, claro
  • Opções de borda e fonte pode ser aplicado em células únicas ou múltiplas
  • A largura e a largura da linha e da coluna pode ser definido em pixels. Selecione a coluna ou linha em qualquer lugar da tabela e valide o tamanho.

tamanho da coluna da linha

Uma dica de ferramenta sobre o foco do mouse da célula também está disponível (precisa ser ativada nas opções de componentes). Ao clicar no botão da dica de ferramenta, você pode editar o conteúdo visível no passar do mouse da célula no frontend.

dica de tabela-célula-tooltip

 

3.2 Opções de tema e classificação

 

Na guia da tabela, ainda à direita, você tem um seletor de temas em miniatura. Basta clicar em um tema para aplicá-lo. Recomendamos enfaticamente que você aplique temas em tabelas novas. Assim, é mais fácil alterar os dados.

escolha temática

Se você já tiver dados em sua tabela e aplicar um tema, todos os dados serão removidos. Se você aplicar um tema em uma nova tabela, os dados e o estilo de exemplo serão adicionados e poderão ser editados.

 

Ainda na guia da coluna direita da tabela, o parâmetro de 2 quadros está aqui para definir a cor das linhas alternativas (linha1, linha2, linha1, linha2 ...)

dois quadros

 

O parâmetro classificável permite que você faça a ordenação de dados AJAX no frontend. Observe que, se você ativar a ferramenta de filtro, uma ferramenta de classificação de dados será ativada por padrão.

tabela classificável e filtro

 

  • Use tabela classificável: Sim não
  • Alinhar mesa: Centro / Direita / Esquerda / Nenhum
  • Tipo Responsivo: Rolagem / ocultando Cols
  • Ativar filtros: Sim não
  • Ativar paginação: Sim não
  • Número de linhas por página: 10, 20, ...
  • Classifique um cloumn por padrão: selecione cloumn A, B ou C, ...
  • Ordenar ordenar uma coluna por padrão: ASC / DESC

Filtro de dados e classificação no frontend

filtro de dados

O alinhamento da tabela é sobre alinhar a div que contém a tabela inteira, centralizar toda a tabela por exemplo. As opções de congelamento de linha e coluna congelarão a seleção e habilitarão uma rolagem no restante.

congelamento de linha

 

Tornar minhas tabelas responsivas ou usar o pergaminho em pequenos dispositivos?

O Droptables manipula o design responsivo com uma ferramenta prioritária, como uma opção. Por padrão, o recurso responsivo está desabilitado, haverá um estouro (embora esteja funcionando muito bem em dispositivos móveis).

modo responsivo

 

O modo responsivo é avançado, você pode definir uma prioridade para ocultar colunas em tamanhos de dispositivos móveis. Quando as colunas estão ocultas, um menu móvel com caixa de seleção será exibido para forçar a exibição / ocultação de colunas.
O tamanho da coluna é fixo durante a edição da tabela. Se o tamanho de todas as colunas for muito grande para o contêiner, você terá um estouro e poderá rolar facilmente em dispositivos móveis.

Mesa com um pergaminho (melhor para uma pequena quantidade de colunas)

Rolo de mesa responsivo

 

Tabela com coluna escondida (melhor para uma grande quantidade de colunas)

colete-mesa-responsivo-hide

 

Um hightlight de célula também está disponível como uma opção. Você pode ativar esse recurso no configuração. É desativado por padrão. Você pode ajustar a cor e a opacidade do realce.

realce de mesa

 

3.3 Administração de ACL e Frontend

É possível gerenciar suas tabelas a partir do frontend do Joomla. Do gerenciador de menu do Joomla, adicionar um novo menu item e selecione como tipo Gerencie tabelas e selecione o frontend Droptables como modelo.


menu-droptables

 

 

Aqui está o que você pode ver no Droptables Manager do frontend.

Droptables-frontend

 

Nota: Para exibir a interface do gerenciador de tabelas em tela cheia no frontend, você deve escolher Estilo de modelo> frontend Droptables.

 

Você pode usar a ACL do Grupo de Usuários do Joomla para controlar as ações de edição da tabela. Primeiro, para configurar quem tem permissão para visualizar as tabelas, é necessário ativar o recurso Ativar Acesso à Tabela (ACL) na configuração do Droptables.

edição de mesa de frontend

 

Além disso, você pode controlar a visibilidade do frontend da tabela para cada tabela a partir das configurações da tabela (Guia Mais). Pegar um grupo de usuários do Joomla para permitir que um grupo visualize a tabela no frontend.

usuário-grupo-acl

 

3.4 CSS personalizado

Vamos um passo além. Se você é um webdesigner com habilidades de edição CSS, poderá adicionar css de o botão direito Mais.

Você pode adicionar preenchimento e raio de borda na célula.

padding-css

 

Células, linhas e colunas têm coordenadas para identificar cada uma delas e aplicar CSS personalizado nela. R é linha, C é coluna. Aqui está a linha 1 (r1), coluna 4 (c4) = dtr1 dtc4

coordenadas-css

 

O código CSS é colorido usando o espelho de código. O código css pode ser menos código, funciona também!

css-custom-table

 

 

IV. GRÁFICO DAS TABELAS

4.1 Criar uma tabela com dados

Você pode gerar gráficos a partir dos dados da tabela, dentro do seu conteúdo. Primeiro crie uma tabela com dados para gerar um gráfico.

A tabela não precisa ser exibida com o gráfico em seu conteúdo e você pode gerar vários gráficos a partir de uma única tabela.

 

Em seguida, faça sua seleção para gerar um gráfico. Aqui, toda a tabela é selecionada.

tabela de gráficos

 

Em seguida, clique em adicionar um novo gráfico. Um gráfico será gerado, respeitando o intervalo de dados selecionado. À direita, você pode selecionar o tipo de gráfico.

gerar gráfico

 

O gráfico será atualizado dinamicamente em relação à alteração de dados na tabela, você não precisa regenerá-lo.

 

4.2 Parâmetros gráficos

Uma vez que seu gráfico é adicionado, você tem algumas opções na coluna da direita.

configurações de gráfico

 

o Alternar linha / coluna só está disponível se você selecionou apenas números no conjunto de dados. Você poderá trocar dados de colunas para linhas.

o Use a primeira linha / coluna como rótulos parâmetro permite que você adicione rótulo ao seu gráfico.

títulos de gráficos

 

Então você tem opções para definir largura / altura, alinhar, cor do seu gráfico.

 

V. DROPTABLES PARÂMETROS E TRUQUES

5.1 Parâmetros

Para acessar os parâmetros globais Droptables, vá em Componente> Droptables> Opções

Parâmetros droptables

 

Nas opções, você pode definir:
 

  • As categorias de tabela acordeão auto-close
  • Ativar a importação / exportação do Excel
  • Escolha o formato de exportação

droptable-settings2

 

  • Ativar a dica de ferramenta nas células
  • Ativar o salvamento automático em AJAX, caso contrário você terá um Salvar botão de modificações
  • Ativar acesso à tabela: Ative a limitação de acesso à tabela (ACL). Permite limitar a permissão de edição de tabela com base nos grupos de usuários do Joomla
  • Destaque celular: Ativar uma cor no mouse da célula para ver, à primeira vista, um conteúdo de célula (Somente Linha / Somente Coluna / Ambos)
  • Realce cor: A célula destacando cor hover
  • Destaque a cor da fonte: A célula destacando a cor do cursor da fonte
  • Realce da opacidade: A célula destacando o nível de opacidade
  • Ativar painel direito oculto: Sim não
  • Periodicidade de sincronização da tabela: Atraso de sincronização automática da tabela para arquivos do Excel ou Planilhas Google
  • Ativar tabela do banco de dados: Sim não

 

5.2 permissão ACL

Uma integração do Joomla ACL está disponível. Agora você pode restringir o acesso à ação ou tabela para editores de tabela. Essas restrições se aplicam a todas as tabelas.

mesas de acesso

 

Por exemplo, se você quiser que um usuário administrador acesse e edite somente suas próprias tabelas, defina “editar” para negado e editar próprio para “Permitido”. Você também pode restringir:

  • A configuração global
  • O acesso à interface
  • A criação de tabelas
  • A exclusão de tabelas
  • Edição / edição própria
O usuário superadministrador sempre terá todas as permissões de edição para todas as tabelas e categorias.

 

5.3 Carregar tabelas em um módulo personalizado de HTML

O Droptables é construído para ser usado em todos os campos do editor WYSIWYG, você só precisa ter o plugin de conteúdo para ser chamado. Na maioria das vezes, é ativado por padrão.

Se não for o caso, como no módulo personalizado HTML do Joomla, você precisa ativá-lo como acima.

tabela-no-módulo

 

Na aba de opções, você precisa definir a opção Prepare o conteúdo para: Sim

 

5.4 Cálculo

Você tem uma implementação de cálculo básica em Droptables. Elementos disponíveis são:

  • SUM, COUNT, CONCAT
  • MÍNIMO MÁXIMO MÉDIA
  • DATA, DIA, DIAS, DIAS 360
  • OR, XOR E

Para fazer uma soma, digite assim em uma célula (o UPPERCASE é obrigatório): = SUM (A1; B2) ou = SUM (A1: B2)

E você pode configurar o símbolo para o cálculo das células em número, dinheiro ou data.

calcular configurações

 

  • Formatos de data: Definir formato de data para cálculos de data
  • Posição do símbolo: Para fazer o cálculo da célula em dinheiro, defina a posição padrão do símbolo monetário
  • Símbolo da moeda: Para fazer o cálculo da célula em dinheiro, defina o símbolo monetário padrão
  • Símbolo decimal: Para fazer o cálculo da célula, defina o símbolo decimal padrão
  • Contagem decimal: Número de dígitos após o símbolo decimal
  • Mil símbolo: Para fazer o cálculo da célula, defina o símbolo mil padrão

VI. EXCEL E GOOGLE SHEETS SYNC

6.1 Sincronização de arquivos do Excel

É possível executar uma sincronização entre uma tabela que você criou e um arquivo do Excel localizado em seu servidor (em qualquer lugar). A partir da aba direita chamada "Tabela", na parte inferior você tem um bloco para vincular um arquivo do Excel à tabela.

sync-excel-choice

Ao clicar no Botão Procurar, você poderá selecionar um Excel em qualquer lugar no seu servidor, aqui é um arquivo carregado através do gerenciador de mídia (pasta / images).

arquivo-browse-excel

 

Quando o arquivo do Excel estiver vinculado à tabela, você poderá Buscar botão de dados para importar dados do arquivo do Excel.

fetch-excel-data

 

Nota: Somente os dados serão obtidos do Excel, não dos estilos, portanto, o estilo global de sua tabela permanecerá inalterado na importação.

 

Aviso: dependendo da memória disponível em seu servidor, você não poderá importar arquivos muito grandes do Excel (mais de 1000 linhas, por exemplo).

 

6.2 Sincronização com o Planilhas Google

O Droptables oferece uma possibilidade de sincronização do Google Sheets. Suas planilhas do Google precisam ser " publicado na web"para ser sincronizado. Primeiro, abra sua planilha do Google Drive e publique-a como página da Web usando o menu" Arquivo ".

publicar na web

 

Em seguida, você terá acesso ao link do arquivo do Planilhas Google, copie este link.

publicado-link

 

E cole-o em Droptables separador “Tabela”. Você está feito! Agora você pode buscar dados de suas Planilhas Google.

google-sheet-data

 

6.3 Sincronização automática do Excel e Google Sheets

Acima do link do arquivo, você também pode ativar uma sincronização automática de dados. O Droptables buscará os dados automaticamente em um intervalo regular.

período de sincronia

Uma vez ativado, uma notificação é exibida após o título da tabela.

auto-sync-notification

 

O atraso de sincronização pode ser definido na configuração Droptables.

 

VII. TABELAS DO BANCO DE DADOS

 

Droptables permite criar tabelas a partir de suas tabelas de banco de dados. A partir das configurações do componente, você deve Ativar tabela do banco de dados.

database-config

 

De volta ao painel, em primeiro lugar, você escolhe Tabela do banco de dados categoria e, em seguida, clique em Criar a tabela , então todas as tabelas no seu banco de dados serão listadas abaixo. Em seguida, você poderá selecionar tabelas e colunas de seu banco de dados. Ao apertar o controle, você pode selecionar várias tabelas, colunas.

seleção de banco de dados


Na seleção de colunas, você pode definir um título personalizado e uma ordem padrão para seus dados na tabela, quando exibidos no lado público.

coluna-titulação e ordenação


Então você tem algumas opções e filtros para aplicar em suas tabelas:

  • Um nível padrão de paginação (a ser usado com uma grande quantidade de dados)
  • Número de linhas para a paginação
  • Aplique algum filtro aos seus dados, ou seja. uma coluna pode ser igual, diferente ... de um valor definido
  • A possibilidade de agrupar alguns valores nas colunas

opção de tabela de banco de dados


Finalmente, você pode visualizar e gerar sua tabela como qualquer outra tabela. Quando sua tabela for gerada, você ainda terá acesso à origem do banco de dados da tabela e poderá, por exemplo, adicionar uma coluna à sua tabela.

gerado pela tabela do banco de dados

Nota: A única diferença é que os temas não podem ser aplicados em tabelas, mas você pode personalizar toda a exibição como em qualquer outra tabela.