Bagaimana untuk Menyertai Dua Jadual Menggunakan Pembina Pertanyaan JavaScript?

TL;DR: Mari lihat cara menggunakan Syncfusion JavaScript Query Builder untuk menyertai dua jadual. Blog ini membimbing anda membuat JoinComponent tersuai dan mengkonfigurasi klausa WHERE, SELECT dan JOIN menggunakan kotak senarai dan lungsur turun. Langkah-langkah memastikan penjanaan pertanyaan yang cekap, menjadikannya mudah untuk menyambung dan mengurus sumber data yang kompleks. Lihat demo Stackblitz untuk contoh kod lengkap.

Pembina Pertanyaan JavaScript Syncfusion ialah elemen UI interaktif yang direka untuk membuat pertanyaan. Ciri yang kaya termasuk pengikatan data yang kompleks, templat, mengimport dan mengeksport pertanyaan dalam format JSON dan SQL. Selain itu, ia boleh menukar pertanyaan kepada predikat untuk digunakan dengan pengurus data.

Blog ini menerangkan cara untuk menyertai dua jadual menggunakan komponen JavaScript Query Builder. Di sini, kami akan menyepadukan komponen Pembina Pertanyaan dengan sokongan pengikatan data yang kompleks untuk menyambungkan dua jadual yang berbeza. Kami akan membuat pertanyaan untuk klausa SQL WHERE, membenamkan kotak senarai untuk membuat klausa SELECT dan senarai lungsur turun untuk menyelaraskan pembinaan pertanyaan gabungan.

Nota: Sebelum meneruskan, rujuk pada permulaan dengan dokumentasi JavaScript Query Builder.

Buat komponen tersuai menggunakan Pembina Pertanyaan JavaScript

Mari kita cipta komponen tersuai yang dikenali sebagai JoinComponent untuk memudahkan penciptaan pertanyaan sertai dan menawarkan fleksibiliti melalui set parameter. Dengan komponen ini, pengguna boleh menentukan ID elemen, sumber data untuk jadual, nama jadual dan operan kiri dan kanan, semuanya penting untuk membina pertanyaan gabungan.

Dalam JoinComponent ini, kami akan menyepadukan Pembina Pertanyaan JavaScript dalam komponen Dialog. Kami juga akan menggabungkan komponen ListBox dan Senarai Jatuh Turun untuk meningkatkan pengalaman pengguna dan menyelaraskan proses mengkonfigurasi dan melaksanakan operasi gabungan. Hasilnya ialah komponen serba boleh dan mesra pengguna yang memudahkan penciptaan pertanyaan penyertaan.

Anda boleh merujuk kepada contoh kod untuk mencipta JoinComponent tersuai dalam repositori Stackblitz ini.

Menyertai dua jadual menggunakan JavaScript Query Builder

Setelah komponen tersuai dibuat, ikut langkah ini untuk menyertai dua jadual.

Langkah 1: Buat klausa WHERE

Klausa SQL WHERE menapis rekod dalam pangkalan data mengikut syarat yang ditetapkan.

Dalam konteks ini, komponen Pembina Pertanyaan JavaScript kami memainkan peranan penting dalam mendapatkan nilai untuk klausa WHERE. Ia menyokong pengikatan data yang kompleks, membolehkan penjanaan peraturan dan pertanyaan SQL dengan menggabungkan maklumat daripada dua jadual. Kefungsian ini dicapai dengan menggunakan arahan lajur untuk menentukan jadual kompleks dan termasuk sifat pemisah dalam komponen.

Dengan mengkonfigurasi sifat ini, Pembina Pertanyaan akan dipaparkan dengan dua jadual, menghasilkan pertanyaan gabungan terhasil yang menyerupai coretan kod yang diberikan di bawah.

Employees.FirstName LIKE (“%Nancy%”)

Langkah 2: Buat klausa SELECT

Klausa SELECT dalam SQL menetapkan lajur atau ungkapan yang ingin kami dapatkan daripada satu atau lebih jadual pangkalan data. Untuk memudahkan ini, kami akan memaparkan komponen kotak senarai untuk memilih lajur yang diperlukan daripada jadual kiri dan kanan.

Langkah 3: Buat klausa JOIN

Penyertaan jadual melibatkan penggabungan baris daripada dua atau lebih jadual berdasarkan lajur atau lajur yang berkaitan. Ia mendapatkan semula data yang diedarkan merentas berbilang jadual dan mencipta set hasil yang menggabungkan maklumat yang berkaitan daripada jadual tersebut.

Berikut ialah aspek utama untuk menyertai jadual:

• Related columns: Table joins rely on columns that establish relationships between tables. Typically, these columns represent primary and foreign keys. A primary key identifies each row in a table, and a foreign key creates a link between two tables by referring to the primary key of another table.
• Join types: There are different types of joins, including inner, left, right, and full outer joins.
• Join conditions: Join conditions specify the criteria for combining rows from different tables. They typically involve comparing the related columns using operators such as =, <>, <, >, etc. Join conditions can also involve multiple columns or complex expressions.

To perform a join operation, we need relational columns, a join type, and a join condition. To facilitate this, we’ll render a dropdown list component to select the Left and Right Operands. The Join Type dropdown list provides options for different types of joins, such as INNER JOIN, LEFT JOIN, RIGHT JOIN, and FULL OUTER JOIN. Lastly, the Operator dropdown list allows you to specify the conditions for connecting the two operands.

Refer to the following image.

Join component user interface

Step 4: Integrating the custom component into the app

To incorporate the custom JoinComponent into your app, import it and place it within a div element during rendering. You can provide essential properties to tailor the component to your needs, streamlining its integration into your app’s user interface.

Upon clicking the Filter button, the Query Builder component will be displayed, allowing users to construct a query. Subsequently, clicking the Copy button will copy the generated query to the clipboard.

Refer to the following code example to render the custom component on the HTML page.

 <div id="join"></div>

Refer to the following Typescript code to render the custom component.

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

Refer to the following images displaying the Query Builder and the join component user interfaces.

JavaScript Query Builder user interface

Joining two tables using the JavaScript Query Builder

The sample join query is as follows, and you can directly validate this query using this link.

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

Reference

For more details, refer to the entire code example for joining two tables using the JavaScript Query Builder on Stackblitz.

Conclusion

Thanks for reading! In this blog, we’ve explored how to join two tables using Syncfusion JavaScript Query Builder. Follow these steps to achieve similar results, and feel free to share your thoughts or questions in the comments below.

If you’re an existing customer, you can download the latest version of Essential Studio from the License and Downloads page. For those new to Syncfusion, try our 30-day free trial to explore all our features.

You can contact us through our support forum, support portal, or feedback portal. We are here to help you succeed!

Related blogs

• Top 5 Techniques to Protect Web Apps from Unauthorized JavaScript Execution
• Easily Render Flat JSON Data in JavaScript File Manager
• Effortlessly Synchronize JavaScript Controls Using DataManager
• Optimizing Productivity: Integrate Salesforce with JavaScript Scheduler

Atas ialah kandungan terperinci Bagaimana untuk Menyertai Dua Jadual Menggunakan Pembina Pertanyaan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!