TsgcHTMLComponent_Spreadsheet: uma grade com fórmulas para aplicações web em Delphi, C++ Builder e .NET. Os usuários digitam valores e fórmulas como no Excel, o servidor as calcula, e cada alteração chega ao seu código antes de ser guardada.
Coloque-o em um formulário, preencha a planilha dele no código e renderize. Cada edição vai para o servidor, que a verifica, recalcula as células que dependem dela e responde com as células que mudaram. Não há mecanismo de fórmulas no navegador, então Delphi e .NET calculam os mesmos valores.
TsgcHTMLComponent_Spreadsheet, com o modelo de planilha TsgcHTMLSpreadsheetSheet na propriedade Sheet
Uma grade virtualizada com barra de ferramentas, barra de fórmulas e barra de status, em JavaScript e CSS puros e sem biblioteca externa
Delphi, C++ Builder, .NET
Defina células no código com SetCellByName. OnCellChange verifica e guarda cada célula que um usuário altera, e com LiveSync o host transmite GetLiveSyncFragmentHTML após uma alteração, de modo que cada página aberta recarrega as células que mudaram.
uses
sgcHTML_Formula, sgcHTML_Component_Spreadsheet, sgcHTMX_Engine_Server;
// No formulário: um TsgcHTMLComponent_Spreadsheet (Spreadsheet1) com
// LiveSync = True, e o TsgcHTMX_Engine_Server (HTMXEngine1) da página
procedure TMainModule.DataModuleCreate(Sender: TObject);
begin
Spreadsheet1.Sheet.SetCellByName('A1', 'Item');
Spreadsheet1.Sheet.SetCellByName('B1', 'Amount');
Spreadsheet1.Sheet.SetCellByName('A2', 'Rent');
Spreadsheet1.Sheet.SetCellByName('B2', '1200');
Spreadsheet1.Sheet.SetCellByName('A3', 'Travel');
Spreadsheet1.Sheet.SetCellByName('B3', '340.50');
Spreadsheet1.Sheet.SetCellByName('A4', 'Total');
Spreadsheet1.Sheet.SetCellByName('B4', '=SUM(B2:B3)');
end;
// Toda célula que um usuário altera: digitação, colagem, preenchimento ou limpeza
procedure TMainModule.Spreadsheet1CellChange(Sender: TObject; aRow, aCol: Integer;
const aOldRaw: string; var aNewRaw: string; var aAccept: Boolean);
begin
if aRow = 0 then
aAccept := False // a linha de título permanece como está
else
StoreCell(sgcHTMLCellName(aRow, aCol), aNewRaw); // seu próprio armazenamento: uma tabela, um arquivo
end;
// A alteração foi aplicada e recalculada: avise cada página aberta
procedure TMainModule.Spreadsheet1Change(Sender: TObject;
aSheet: TsgcHTMLSpreadsheetSheet);
begin
HTMXEngine1.BroadcastFragment(Spreadsheet1.GetLiveSyncFragmentHTML);
end;
// GET /budget.xlsx: a planilha como pasta de trabalho, com fórmulas e estilos
procedure TMainModule.ExportBudget(aStream: TStream);
begin
Spreadsheet1.SaveToXLSX(aStream);
end;@* Views/Sheets/Budget.cshtml: o orçamento compartilhado da equipe *@
@model BudgetModel
<sgc-spreadsheet name="budget" rows="40" cols="14"
frozen-rows="1" frozen-cols="1" css-height="560px"
allow-insert-delete="false" live-sync="true"
on-get-sheet="Model.GetSheet"
on-cell-change="Model.CellChange"
on-change="Model.Changed" />using esegece.sgcWebSockets;
var budget = new TsgcHTMLComponent_Spreadsheet();
budget.LiveSync = true;
budget.Sheet.SetCellByName("A1", "Item");
budget.Sheet.SetCellByName("B1", "Amount");
budget.Sheet.SetCellByName("A2", "Rent");
budget.Sheet.SetCellByName("B2", "1200");
budget.Sheet.SetCellByName("B3", "340.50");
budget.Sheet.SetCellByName("A4", "Total");
budget.Sheet.SetCellByName("B4", "=SUM(B2:B3)");
budget.OnCellChange += CellChange;
budget.OnChange += Changed;
// OnCellChange: verificar e guardar uma célula
public void CellChange(object Sender, int aRow, int aCol, string aOldRaw,
ref string aNewRaw, ref bool aAccept)
{
if (aRow == 0)
aAccept = false;
else
store.Save(aRow, aCol, aNewRaw);
}
// OnChange: aplicada e recalculada, cada página aberta recarrega as células alteradas
public void Changed(object Sender, TsgcHTMLSpreadsheetSheet aSheet)
{
_ = hub.BroadcastAsync(((TsgcHTMLComponent_Spreadsheet)Sender).GetLiveSyncFragmentHTML());
}
// OnGetSheet: uma planilha por usuário
public void GetSheet(object Sender, ref TsgcHTMLSpreadsheetSheet? aSheet)
{
aSheet = sheets.ForUser(User.Identity.Name);
}
// GET /budget.xlsx
using var ms = new MemoryStream();
budget.SaveToXLSX(ms);O teclado, a área de transferência e as fórmulas que eles conhecem do Excel, em uma única planilha que o seu servidor mantém.
Uma célula que começa com = é uma fórmula: os operadores + - * / ^ % &, comparações, parênteses, referências de célula e intervalos como A1:C5, com partes absolutas escritas $A$1, A$1 ou $A1. A precedência e a conversão de texto em número funcionam como no Excel. Os erros aparecem como #DIV/0!, #VALUE!, #REF!, #NAME?, #NUM! e #N/A, e #CIRC! marca uma célula em uma referência circular.
Matemática e estatística: SUM, AVERAGE, MIN, MAX, COUNT, COUNTA, COUNTBLANK, PRODUCT, ROUND, ROUNDUP, ROUNDDOWN, INT, MOD, ABS, SQRT, POWER, PI. Lógica e informação: IF, IFERROR, AND, OR, NOT, TRUE, FALSE, ISBLANK, ISNUMBER, ISTEXT, ISERROR. Texto: CONCAT, CONCATENATE, LEN, LEFT, RIGHT, MID, UPPER, LOWER, TRIM, VALUE.
Condicionais: SUMIF, COUNTIF e AVERAGEIF com critérios como ">10", "<>x" e os curingas * e ?. Pesquisa: VLOOKUP e HLOOKUP, exata ou aproximada, INDEX e MATCH. Data: DATE, YEAR, MONTH, DAY, TODAY, sobre números de série do Excel. Financeiras: PMT, FV, PV, NPV. São 54 funções no total, com a semântica do Excel, e a barra de fórmulas completa os nomes delas.
Negrito, itálico, alinhamento, cor do texto e cor de preenchimento, e um formato de número por célula: Geral, Número, Moeda, Porcentagem, Data ou Texto, com 0 a 10 casas decimais, um separador de milhares, o símbolo da moeda e o formato de data. A exibição usa os separadores decimal e de milhares da localidade sgcHTML em uso quando ela os define.
Setas, Tab e Shift+Tab, Enter e Shift+Enter, Home, End, Ctrl+Home, Ctrl+End, Ctrl+setas, Page Up e Page Down. F2 ou digitar inicia a edição, Esc cancela e Delete limpa. Shift+setas, Shift+clique ou arrastar o mouse selecionam um intervalo, um clique em um cabeçalho seleciona uma linha ou uma coluna, Ctrl+D e Ctrl+R preenchem para baixo e para a direita, e Ctrl+Z e Ctrl+Y desfazem e refazem as edições do próprio usuário.
A barra de fórmulas mostra o conteúdo bruto da célula, e a caixa de nome dela salta para uma célula: digite B12 e pressione Enter. Enquanto uma fórmula é editada, as referências dela são destacadas em cores, e o usuário pode clicar em células ou arrastar intervalos para dentro dela.
Copiar, recortar e colar usam texto separado por tabulações, o formato que o Excel e o Google Sheets colocam na área de transferência, de modo que um bloco de células se move entre eles nos dois sentidos. Uma fórmula copiada dentro da planilha e colada ou preenchida em outro lugar tem as referências relativas deslocadas e as absolutas mantidas.
Insira linhas acima ou abaixo e colunas à esquerda ou à direita, exclua linhas e colunas, pela barra de ferramentas ou pelo menu de contexto de uma célula ou de um cabeçalho. Toda referência em toda fórmula é ajustada como no Excel, e uma referência a uma célula excluída vira #REF!. As colunas são redimensionadas arrastando a borda do cabeçalho, e linhas e colunas podem ser congeladas.
Exportar para Excel baixa um .xlsx com as fórmulas e seus valores, os estilos de célula e os formatos de número, as larguras das colunas e os painéis congelados. Importar lê um .xlsx, com suas fórmulas e estilos, ou um .csv, depois que o usuário confirma que ele substitui a planilha atual.
Com LiveSync, as pessoas que têm a mesma planilha aberta veem as alterações umas das outras: as células que outro usuário alterou são recarregadas e piscam. Cada alteração aceita incrementa a revisão da planilha, e uma página que perdeu uma revisão carrega a planilha inteira de novo.
A barra de status mostra Soma, Média e Contagem da seleção, e um indicador informa se as alterações foram salvas. Somente as linhas e colunas visíveis estão na página, então uma planilha de 10.000 linhas por 104 colunas rola com fluidez. Sem JavaScript, a página ainda contém uma tabela simples das células, legível por crawlers.
A planilha é uma grade WAI-ARIA com contagens e índices de linhas e colunas, e uma região live educada anuncia a referência da célula e o valor dela. Ela segue o tema da página, se espelha com dir="rtl", respeita a redução de movimento e funciona na largura de um telefone: rolagem por toque, tocar para selecionar e toque duplo para editar.
Os membros que você mais usa.
Sheet é um TsgcHTMLSpreadsheetSheet. SetCell(aRow, aCol, aRaw) e SetCellByName('B2', '=A1*2') definem uma célula, e Raw, Value, Text e Style a leem. Um raw que começa com = é uma fórmula e um apóstrofo inicial força texto. Linhas e colunas começam em 0 na API, então A1 é a linha 0, coluna 0. Lock e Unlock protegem as alterações feitas a partir de suas próprias threads.
OnCellChange(Sender, aRow, aCol, aOldRaw, aNewRaw, aAccept) é executado para cada célula que um usuário altera. Altere aNewRaw para corrigir o valor, defina aAccept como False para recusá-lo, ou guarde-o. OnChange(Sender, aSheet) vem em seguida, quando a alteração foi aplicada e recalculada: o lugar para transmitir GetLiveSyncFragmentHTML.
OnGetSheet(Sender, aSheet) retorna a planilha do usuário por trás da requisição. Ele é chamado na renderização e em cada requisição, então um único componente atende todos os usuários, cada um com uma planilha própria.
O navegador envia o que o usuário digitou e o servidor faz o resto: aplica a alteração, recalcula as células que dependem dela por meio de um grafo de dependências e responde somente com as células que mudaram. Recalculate executa um cálculo completo e Evaluate calcula uma fórmula fora de qualquer célula. Delphi e .NET dão os mesmos resultados, o mesmo JSON e os mesmos bytes XLSX.
O servidor nunca confia no navegador. Ele verifica ReadOnly, as chaves AllowFormulas, AllowFormatting, AllowInsertDelete, AllowImport e AllowExport, as coordenadas em relação a MaxRows (10000) e MaxCols (104), MaxCells (100000), MaxCellLength (8192) e MaxImportSize (5 MB), e então chama OnCellChange para cada célula. OnImport pode recusar um arquivo.
RowCount (100) e ColCount (26) definem o tamanho da planilha, FrozenRows e FrozenCols fixam os títulos, DefaultColWidth, RowHeight e CSSHeight definem os tamanhos, e ShowToolbar, ShowFormulaBar e ShowStatusBar ligam ou desligam as barras. ExportFileName dá nome à pasta de trabalho baixada.
SaveToXLSX e LoadFromXLSX escrevem e leem uma pasta de trabalho a partir do código, com fórmulas e estilos incluídos. Na planilha, SaveToJSON e LoadFromJSON a guardam em um único formato JSON que Delphi e .NET escrevem byte a byte igual, SaveToCSV e LoadFromCSV usam a RFC 4180 com os valores brutos, e LoadFromDataSet carrega uma linha de cabeçalho e os registros.
InsertRows, DeleteRows, InsertCols e DeleteCols(aIndex, aCount) ajustam cada referência como no Excel. ShiftFormula(aFormula, aDeltaRow, aDeltaCol) desloca as referências relativas de uma fórmula e mantém as absolutas, a mesma regra que o navegador aplica ao colar e preencher.
A planilha envia as requisições ao endpoint de eventos de componentes do mecanismo HTMX, ou a ActionURL. Sem nenhum dos dois, ela é apenas um visualizador somente leitura da planilha.
Em uma view Razor, o Tag Helper <sgc-spreadsheet> renderiza a planilha, e as requisições dele são respondidas pelo middleware sgcHTML de UseSgcHtml. Os atributos dele são name, read-only, rows, cols, frozen-rows, frozen-cols, css-height, as chaves allow-*, live-sync, action-url e os manipuladores on-get-sheet, on-cell-change e on-change.
Demos\60.HTML\01.RunTime\35.Spreadsheet é o sgc Sheets, um servidor na porta 8137 com três planilhas: um orçamento de equipe que todos editam ao vivo, com totais SUM, porcentagem do total, formato de moeda e um gráfico que se atualiza a cada alteração; uma calculadora de empréstimo com uma planilha por visitante, PMT, uma tabela de amortização preenchida para baixo e um gráfico de saldo; e vendas por região com SUMIF e VLOOKUP, exportação e importação XLSX. As versões em tempo de design, Lazarus e .NET o espelham.
| Experimente onlineVeja na demo Planilha, rodando ao vivo no servidor de demos da eSeGeCe. | Abrir | |
| Ajuda onlineReferência completa da API e guia de uso para este componente. | Abrir | |
| Componente GridA grade de dados para datasets: ordenar, filtrar, agrupar, editar na própria linha e exportar. | Abrir | |
| Todos os Componentes sgcHTMLExplore a matriz completa de recursos com mais de 80 componentes. | Abrir | |
| Baixar Versão de Avaliação GratuitaA avaliação de 30 dias inclui os projetos de demonstração 60.HTML. | Abrir | |
| PreçosLicenças Single, Team e Site com código-fonte completo. | Abrir |