TL;DR: Vamos ver como usar o Syncfusion JavaScript Query Builder para unir duas tabelas. Este blog orienta você na criação de um JoinComponent personalizado e na configuração de cláusulas WHERE, SELECT e JOIN usando caixas de listagem e menus suspensos. As etapas garantem a geração eficiente de consultas, facilitando a conexão e o gerenciamento de fontes de dados complexas. Confira a demonstração do Stackblitz para exemplos de código completos.

Syncfusion JavaScript Query Builder é um elemento de UI interativo projetado para criar consultas. Seus recursos avançados incluem vinculação de dados complexos, modelos, importação e exportação de consultas em formatos JSON e SQL. Além disso, ele pode converter consultas em predicados para uso com um gerenciador de dados.

Este blog explica como unir duas tabelas usando o componente JavaScript Query Builder. Aqui, integraremos o componente Query Builder com suporte complexo de vinculação de dados para conectar duas tabelas distintas. Criaremos a consulta para a cláusula SQL WHERE, incorporaremos uma caixa de listagem para criar a cláusula SELECT e uma lista suspensa para agilizar a construção de consultas de junção.

Observação: Antes de continuar, consulte a documentação de introdução ao JavaScript Query Builder.

Crie um componente personalizado usando JavaScript Query Builder

Vamos criar um componente personalizado conhecido como JoinComponent para facilitar a criação de consultas de junção e oferecer flexibilidade por meio de um conjunto de parâmetros. Com este componente, os usuários podem especificar o ID do elemento, fontes de dados para as tabelas, nomes de tabelas e operandos esquerdo e direito, todos essenciais para a construção de consultas de junção.

Dentro deste JoinComponent, integraremos o JavaScript Query Builder dentro de um componente Dialog. Também incorporaremos componentes ListBox e Dropdown List para aprimorar a experiência do usuário e agilizar o processo de configuração e execução de operações de junção. O resultado é um componente versátil e fácil de usar que simplifica a criação de consultas de junção.

Você pode consultar o exemplo de código para criar o JoinComponent personalizado neste repositório Stackblitz.

Unindo duas tabelas usando JavaScript Query Builder

Depois que o componente personalizado for criado, siga estas etapas para unir duas tabelas.

Etapa 1: crie uma cláusula WHERE

A cláusula SQL WHERE filtra registros em um banco de dados de acordo com as condições especificadas.

Nesse contexto, nosso componente JavaScript Query Builder desempenha um papel crucial na obtenção do valor para a cláusula WHERE. Suporta vinculação de dados complexa, permitindo a geração de regras e consultas SQL combinando informações de duas tabelas. Essa funcionalidade é obtida usando uma diretiva de coluna para especificar tabelas complexas e incluindo uma propriedade separador dentro do componente.

Ao configurar essas propriedades, o Query Builder será renderizado com duas tabelas, produzindo uma consulta de junção resultante semelhante ao trecho de código fornecido abaixo.

Employees.FirstName LIKE (“%Nancy%”)

Etapa 2: crie uma cláusula SELECT

A cláusula SELECT em SQL designa as colunas ou expressões que desejamos recuperar de uma ou mais tabelas do banco de dados. Para facilitar isso, renderizaremos um componente de caixa de listagem para selecionar as colunas necessárias da tabela esquerda e direita.

Etapa 3: crie uma cláusula JOIN

A união de tabelas envolve a combinação de linhas de duas ou mais tabelas com base na coluna ou colunas relacionadas. Ele recupera dados distribuídos em várias tabelas e cria um conjunto de resultados que combina informações relevantes dessas tabelas.

Aqui estão os principais aspectos da união de tabelas:

• Colunas relacionadas: as junções de tabelas dependem de colunas que estabelecem relacionamentos entre tabelas. Normalmente, essas colunas representam chaves primárias e estrangeiras. Uma chave primária identifica cada linha de uma tabela e uma chave estrangeira cria um link entre duas tabelas referindo-se à chave primária de outra tabela.
• Tipos de junção: Existem diferentes tipos de junções, incluindo junções internas, esquerda, direita e externas completas.
• Condições de junção: As condições de junção especificam os critérios para combinar linhas de tabelas diferentes. Eles normalmente envolvem a comparação de colunas relacionadas usando operadores como =, , , >, etc. envolvem múltiplas colunas ou expressões complexas.

Para realizar uma operação de junção, precisamos de colunas relacionais, um tipo de junção e uma condição de junção. Para facilitar isso, renderizaremos um componente de lista suspensa para selecionar os operandos Esquerdo e Direito. A lista suspensa Tipo de junção fornece opções para diferentes tipos de junções , como INNER JOIN, LEFT JOIN, RIGHT JOIN e FULL OUTER JOIN. Por último, a lista suspensa Operador permite especificar as condições para conectar os dois operandos.

Consulte a imagem a seguir.

Etapa 4: Integrando o componente personalizado ao aplicativo

Para incorporar o JoinComponent personalizado em seu aplicativo, importe-o e coloque-o em um elemento div durante a renderização. Você pode fornecer propriedades essenciais para adaptar o componente às suas necessidades, simplificando sua integração na interface do usuário do seu aplicativo.

Ao clicar no botão Filtrar, o componente Query Builder será exibido, permitindo ao usuário construir uma consulta. Posteriormente, clicar no botão Copiar copiará a consulta gerada para a área de transferência.

Consulte o exemplo de código a seguir para renderizar o componente personalizado na página HTML.

Consulte o seguinte código Typescript para renderizar o componente personalizado.

import { JoinComponent } from './JoinComponent';

let ordersData = [
  { "OrderID": 10248, "CustomerID": 9, "EmployeeID": 5,"OrderDate": "7/4/1996","ShipperID": 3},
  { "OrderID": 10249, "CustomerID": 81, "EmployeeID": 6,"OrderDate": "7/5/1996","ShipperID": 1}
];

let employeesData = [
  { "EmployeeID": 1, "LastName": "Davolio", "FirstName": "Nancy", "BirthDate": "12/8/1968"},
  { "EmployeeID": 2, "LastName": "Fuller", "FirstName": "Andrew", "BirthDate": "2/19/1952 "},
  { "EmployeeID": 3, "LastName": "Leverling", "FirstName": "Janet", "BirthDate": "8/30/1963"},
  { "EmployeeID": 4, "LastName": "Peacock", "FirstName": "Margaret", "BirthDate": "9/19/1958"},
  { "EmployeeID": 5, "LastName": "Buchanan", "FirstName": "Steven", "BirthDate": "3/4/1955"},
  { "EmployeeID": 6, "LastName": "Suyama", "FirstName": "Michael", "BirthDate": "7/2/1963"}
];

let comp: JoinComponent = new JoinComponent(
          'join', // component ID
          ordersData, // left table
          employeesData, // right table
          'Orders', // left table name
          'Employees', // right table name
          'EmployeeID’, // left operand
          'EmployeeID' // right operand
);

Consulte as imagens a seguir que exibem o Query Builder e as interfaces de usuário do componente de junção.

O exemplo de consulta de junção é o seguinte e você pode validar essa consulta diretamente usando este link.

SELECT Orders.OrderID, Orders.OrderDate, Employees.EmployeeID FROM (Orders INNER JOIN Employees ON (Orders.EmployeeID = Employees.EmployeeID)) WHERE(Employees.FirstName LIKE ('%Nancy%'))

Referência

Para obter mais detalhes, consulte o exemplo de código completo para unir duas tabelas usando o JavaScript Query Builder no Stackblitz.

Conclusão

Obrigado pela leitura! Neste blog, exploramos como unir duas tabelas usando Syncfusion JavaScript Query Builder. Siga estas etapas para obter resultados semelhantes e sinta-se à vontade para compartilhar suas idéias ou perguntas nos comentários abaixo.

Se você já é um cliente, pode baixar a versão mais recente do Essential Studio na página Licença e downloads. Para quem é novo no Syncfusion, experimente nosso teste gratuito de 30 dias para explorar todos os nossos recursos.

Você pode entrar em contato conosco por meio de nosso fórum de suporte, portal de suporte ou portal de feedback. Estamos aqui para ajudá-lo a ter sucesso!

Blogs relacionados

• Cinco principais técnicas para proteger aplicativos da Web contra execução não autorizada de JavaScript
• Renderize facilmente dados JSON simples no gerenciador de arquivos JavaScript
• Sincronize facilmente controles JavaScript usando o DataManager
• Otimizando a produtividade: integre o Salesforce ao JavaScript Scheduler