TL;DR : Voyons comment utiliser le générateur de requêtes JavaScript Syncfusion pour joindre deux tables. Ce blog vous guide dans la création d'un JoinComponent personnalisé et la configuration des clauses WHERE, SELECT et JOIN à l'aide de zones de liste et de listes déroulantes. Les étapes garantissent une génération de requêtes efficace, facilitant la connexion et la gestion de sources de données complexes. Consultez la démo Stackblitz pour des exemples de code complets.

Syncfusion JavaScript Query Builder est un élément d'interface utilisateur interactif conçu pour créer des requêtes. Ses riches fonctionnalités incluent la liaison de données complexes, la création de modèles, l'importation et l'exportation de requêtes aux formats JSON et SQL. De plus, il peut convertir les requêtes en prédicats à utiliser avec un gestionnaire de données.

Ce blog explique comment joindre deux tables à l'aide du composant JavaScript Query Builder. Ici, nous intégrerons le composant Query Builder avec la prise en charge des liaisons de données complexes pour connecter deux tables distinctes. Nous allons créer la requête pour la clause SQL WHERE, intégrer une zone de liste pour créer la clause SELECT et une liste déroulante pour rationaliser la construction des requêtes de jointure.

Remarque : Avant de continuer, reportez-vous à la documentation de démarrage avec JavaScript Query Builder.

Créer un composant personnalisé à l'aide du générateur de requêtes JavaScript

Créons un composant personnalisé appelé JoinComponent pour faciliter la création de requêtes de jointure et offrir de la flexibilité grâce à un ensemble de paramètres. Avec ce composant, les utilisateurs peuvent spécifier l'ID de l'élément, les sources de données des tables, les noms des tables et les opérandes gauche et droit, tous essentiels à la construction de requêtes de jointure.

Dans ce JoinComponent, nous intégrerons le générateur de requêtes JavaScript dans un composant Dialog. Nous intégrerons également les composants ListBox et Dropdown List pour améliorer l'expérience de l'utilisateur et rationaliser le processus de configuration et d'exécution des opérations de jointure. Le résultat est un composant polyvalent et convivial qui simplifie la création de requêtes de jointure.

Vous pouvez vous référer à l'exemple de code pour créer le JoinComponent personnalisé dans ce référentiel Stackblitz.

Joindre deux tables à l'aide du générateur de requêtes JavaScript

Une fois le composant personnalisé créé, suivez ces étapes pour joindre deux tables.

Étape 1 : Créer une clause WHERE

La clause SQL WHERE filtre les enregistrements d'une base de données en fonction des conditions spécifiées.

Dans ce contexte, notre composant JavaScript Query Builder joue un rôle crucial dans l'obtention de la valeur de la clause WHERE. Il prend en charge la liaison de données complexes, permettant la génération de règles et de requêtes SQL en combinant les informations de deux tables. Cette fonctionnalité est obtenue en utilisant une directive de colonne pour spécifier des tables complexes et en incluant une propriété séparateur dans le composant.

En configurant ces propriétés, le générateur de requêtes sera rendu avec deux tables, produisant une requête de jointure résultante ressemblant à l'extrait de code donné ci-dessous.

Employees.FirstName LIKE (“%Nancy%”)

Étape 2 : Créer une clause SELECT

La clause SELECT en SQL désigne les colonnes ou expressions que l'on souhaite récupérer à partir d'une ou plusieurs tables de base de données. Pour faciliter cela, nous allons afficher un composant listbox pour sélectionner les colonnes requises dans les tableaux de gauche et de droite.

Étape 3 : Créer une clause JOIN

Joindre des tables implique de combiner des lignes de deux ou plusieurs tables en fonction de la ou des colonnes associées. Il récupère les données réparties sur plusieurs tables et crée un ensemble de résultats qui combine les informations pertinentes de ces tables.

Voici les aspects clés de la jointure de tables :

• Colonnes associées : les jointures de tables reposent sur des colonnes qui établissent des relations entre les tables. Généralement, ces colonnes représentent des clés primaires et étrangères. Une clé primaire identifie chaque ligne d'une table et une clé étrangère crée un lien entre deux tables en faisant référence à la clé primaire d'une autre table.
• Types de jointure : il existe différents types de jointures, notamment les jointures internes, gauches, droites et externes complètes.
• Conditions de jointure : les conditions de jointure spécifient les critères de combinaison de lignes de différentes tables. Elles impliquent généralement de comparer les colonnes associées à l'aide d'opérateurs tels que =, , , >, etc. Les conditions de jointure peuvent également impliquent plusieurs colonnes ou expressions complexes.

Pour effectuer une opération de jointure, nous avons besoin de colonnes relationnelles, d'un type de jointure et d'une condition de jointure. Pour faciliter cela, nous allons afficher un composant de liste déroulante pour sélectionner les opérandes Gauche et Droit. La liste déroulante Type de jointure fournit des options pour différents types de jointures. , tels que INNER JOIN, LEFT JOIN, RIGHT JOIN et FULL OUTER JOIN. Enfin, la liste déroulante Opérateur permet de préciser les conditions de connexion des deux opérandes.

Reportez-vous à l'image suivante.

Étape 4 : Intégration du composant personnalisé dans l'application

Pour incorporer le JoinComponent personnalisé dans votre application, importez-le et placez-le dans un élément div pendant le rendu. Vous pouvez fournir des propriétés essentielles pour adapter le composant à vos besoins, rationalisant ainsi son intégration dans l'interface utilisateur de votre application.

En cliquant sur le bouton Filtre, le composant Query Builder s'affichera, permettant aux utilisateurs de construire une requête. Par la suite, cliquer sur le bouton Copier copiera la requête générée dans le presse-papiers.

Reportez-vous à l'exemple de code suivant pour afficher le composant personnalisé sur la page HTML.

Référez-vous au code Typescript suivant pour afficher le composant personnalisé.

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
);

Reportez-vous aux images suivantes illustrant les interfaces utilisateur du générateur de requêtes et du composant de jointure.

L'exemple de requête de jointure est le suivant, et vous pouvez directement valider cette requête à l'aide de ce lien.

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

Référence

Pour plus de détails, reportez-vous à l'exemple de code complet pour joindre deux tables à l'aide du générateur de requêtes JavaScript sur Stackblitz.

Conclusion

Merci d'avoir lu ! Dans ce blog, nous avons exploré comment joindre deux tables à l'aide de Syncfusion JavaScript Query Builder. Suivez ces étapes pour obtenir des résultats similaires et n'hésitez pas à partager vos réflexions ou vos questions dans les commentaires ci-dessous.

Si vous êtes un client existant, vous pouvez télécharger la dernière version d'Essential Studio à partir de la page Licence et téléchargements. Pour ceux qui découvrent Syncfusion, essayez notre essai gratuit de 30 jours pour explorer toutes nos fonctionnalités.

Vous pouvez nous contacter via notre forum d'assistance, notre portail d'assistance ou notre portail de commentaires. Nous sommes là pour vous aider à réussir !

Blogs connexes

• Top 5 des techniques pour protéger les applications Web contre l'exécution non autorisée de JavaScript
• Rendu facilement des données JSON plates dans le gestionnaire de fichiers JavaScript
• Synchronisez sans effort les contrôles JavaScript à l'aide de DataManager
• Optimisation de la productivité : intégrez Salesforce à JavaScript Scheduler