TL;DR: Syncfusion JavaScript クエリ ビルダーを使用して 2 つのテーブルを結合する方法を見てみましょう。このブログでは、カスタム JoinComponent を作成し、リスト ボックスとドロップダウンを使用して WHERE、SELECT、JOIN 句を構成する方法を説明します。この手順により効率的なクエリ生成が保証され、複雑なデータ ソースの接続と管理が容易になります。完全なコード例については、Stackblitz デモを確認してください。

Syncfusion JavaScript Query Builder は、クエリを作成するために設計された対話型 UI 要素です。その豊富な機能には、複雑なデータ バインディング、テンプレート化、JSON および SQL 形式でのクエリのインポートおよびエクスポートが含まれます。さらに、クエリをデータ マネージャーで使用する述語に変換できます。

このブログでは、JavaScript クエリ ビルダー コンポーネントを使用して 2 つのテーブルを結合する方法について説明します。ここでは、クエリ ビルダー コンポーネントを複雑なデータ バインディング サポートと統合して、2 つの異なるテーブルを接続します。 SQL WHERE 句のクエリを作成し、SELECT 句を作成するためのリスト ボックスと、結合クエリの構築を合理化するためのドロップダウン リストを埋め込みます。

注: 先に進む前に、JavaScript クエリ ビルダーの入門ドキュメントを参照してください。

JavaScript クエリ ビルダーを使用してカスタム コンポーネントを作成する

JoinComponent というカスタム コンポーネントを作成して、結合クエリの作成を容易にし、一連のパラメータを通じて柔軟性を提供しましょう。このコンポーネントを使用すると、ユーザーは要素 ID、テーブルのデータ ソース、テーブル名、左右のオペランドを指定できます。これらはすべて結合クエリの構築に不可欠です。

この

JoinComponent 内で、JavaScript クエリ ビルダーを Dialog コンポーネント内に統合します。また、ListBox コンポーネントと Dropdown List コンポーネントを組み込んで、ユーザー エクスペリエンスを向上させ、結合操作の構成と実行のプロセスを合理化します。その結果、結合クエリの作成を簡素化する、多用途で使いやすいコンポーネントが生まれました。

この Stackblitz リポジトリでカスタム

JoinComponent を作成するコード例を参照できます。

JavaScript クエリビルダーを使用した 2 つのテーブルの結合

カスタム コンポーネントを作成したら、次の手順に従って 2 つのテーブルを結合します。

ステップ 1: WHERE 句を作成する

SQL の

WHERE 句は、指定された条件に従ってデータベース内のレコードをフィルタリングします。

このコンテキストでは、JavaScript クエリ ビルダー コンポーネントが

WHERE 句の値を取得する際に重要な役割を果たします。複雑なデータ バインディングをサポートしており、2 つのテーブルの情報を組み合わせてルールや SQL クエリを生成できます。この機能は、column ディレクティブを使用して複雑なテーブルを指定し、コンポーネント内に separator プロパティを含めることによって実現されます。 これらのプロパティを構成すると、クエリ ビルダーは 2 つのテーブルでレンダリングされ、以下のコード スニペットのような結果の結合クエリが生成されます。

従業員.名 いいね (「%Nancy%」)

Employees.FirstName LIKE (“%Nancy%”)

SQL の

SELECT

句は、1 つ以上のデータベース テーブルから取得する列または式を指定します。これを容易にするために、リストボックス コンポーネントをレンダリングして、左右のテーブルから必要な列を選択します。 ステップ 3: JOIN 句を作成する

テーブルの結合には、関連する列に基づいて 2 つ以上のテーブルの行を結合することが含まれます。複数のテーブルに分散されたデータを取得し、それらのテーブルからの関連情報を組み合わせた結果セットを作成します。

テーブル結合の重要な側面は次のとおりです:

関連列
• : テーブル結合は、テーブル間の関係を確立する列に依存します。通常、これらの列は主キーと外部キーを表します。主キーはテーブル内の各行を識別し、外部キーは別のテーブルの主キーを参照することによって 2 つのテーブル間にリンクを作成します。
結合タイプ
• : 内部結合、左結合、右結合、完全外部結合など、さまざまな結合タイプがあります。
結合条件
• : 結合条件は、異なるテーブルの行を結合するための基準を指定します。通常、=、、、> などの演算子を使用して関連する列を比較する必要があります。結合条件も使用できます。複数の列または複雑な式が含まれます。
結合操作を実行するには、リレーショナル列、結合タイプ、および結合条件が必要です。これを容易にするために、

Left

および Right オペランドを選択するドロップダウン リスト コンポーネントをレンダリングします。Join Type ドロップダウン リストには、さまざまな種類の結合のオプションが用意されています。 、INNER JOIN、LEFT JOIN、RIGHT JOIN、FULL OUTER JOIN など。最後に、演算子 ドロップダウン リストでは、2 つのオペランドを接続するための条件を指定できます。 次の画像を参照してください。

結合コンポーネント ユーザー インターフェイス

カスタム

JoinComponent

をアプリに組み込むには、それをインポートし、レンダリング中に

div 要素内に配置します。必須のプロパティを提供してコンポーネントをニーズに合わせて調整し、アプリのユーザー インターフェイスへの統合を効率化できます。 フィルター

ボタンをクリックすると、クエリ ビルダー コンポーネントが表示され、ユーザーがクエリを作成できるようになります。その後、

コピーボタンをクリックすると、生成されたクエリがクリップボードにコピーされます。 HTML ページにカスタム コンポーネントをレンダリングするには、次のコード例を参照してください。

カスタム コンポーネントをレンダリングするには、次の Typescript コードを参照してください。

import { JoinComponent } from './JoinComponent'; 注文データ = [ { "注文ID": 10248, "顧客ID": 9, "従業員ID": 5,"注文日": "1996/7/4","配送者ID": 3}, { "注文ID": 10249、"顧客ID": 81、"従業員ID": 6、"注文日": "7/5/1996"、"配送者ID": 1} ]; 従業員データ = [ { "従業員ID": 1, "姓": "ダヴォリオ", "名": "ナンシー", "生年月日": "1968年12月8日"}, { "従業員 ID": 2、"姓": "フラー"、"名": "アンドリュー"、"生年月日": "1952 年 2 月 19 日 "}, { "従業員ID": 3, "姓": "レバリング", "名": "ジャネット", "生年月日": "1963年8月30日"}, { "従業員ID": 4, "姓": "ピーコック", "名": "マーガレット", "生年月日": "1958年9月19日"}, { "従業員 ID": 5、"姓": "ブキャナン"、"名": "スティーブン"、"生年月日": "1955 年 3 月 4 日"}, { "社員ID": 6, "姓": "須山", "名": "マイケル", "生年月日": "1963/7/2"} ]; let comp: JoinComponent = new JoinComponent( 'join', // コンポーネント ID orderData, // 左側のテーブル employeesData, // 右のテーブル 'Orders', // テーブル名を左にします 'Employees', // 正しいテーブル名 'EmployeeID', // 左側のオペランド 'EmployeeID' // 右オペランド );

クエリ ビルダーと結合コンポーネントのユーザー インターフェイスを表示する次の画像を参照してください。

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

JavaScript クエリ ビルダー ユーザー インターフェイス

JavaScript クエリ ビルダーを使用した 2 つのテーブルの結合

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

参照

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

詳細については、Stackblitz の JavaScript クエリ ビルダーを使用して 2 つのテーブルを結合するコード例全体を参照してください。

結論

読んでいただきありがとうございます！このブログでは、Syncfusion JavaScript Query Builder を使用して 2 つのテーブルを結合する方法を検討してきました。以下の手順に従って同様の結果を達成してください。ご意見やご質問をお気軽に以下のコメント欄で共有してください。

既存の顧客の場合は、ライセンスとダウンロード ページから Essential Studio の最新バージョンをダウンロードできます。 Syncfusion を初めて使用する場合は、30 日間の無料トライアルを試して、すべての機能を試してください。

サポート フォーラム、サポート ポータル、またはフィードバック ポータルからお問い合わせいただけます。私たちはあなたの成功をお手伝いします!

関連ブログ

Web アプリを不正な JavaScript 実行から保護するための 5 つのテクニック

JavaScript ファイル マネージャーでフラットな JSON データを簡単にレンダリング
DataManager を使用して JavaScript コントロールを簡単に同期する
生産性の最適化: Salesforce と JavaScript スケジューラの統合