Các thành phần cho các tùy chọn
Các thành phần để chọn các tùy chọn khác nhau trong ứng dụng web
Thay vì sử dụng ID trong URL, bạn có thể muốn tạo bộ lọc bằng cách sử dụng thành phần Select đặc biệt với khả năng chọn quốc gia từ danh sách. Trước đây, chúng tôi đã sử dụng thành phần Relselect và logic hoạt động của nó rất giống nhau, nhưng nhờ Select , chúng tôi không chỉ có thể đưa ra lựa chọn từ tất cả các quốc gia có sẵn mà còn thêm các tùy chọn của riêng mình.
Select thành phần
Hãy xem cài đặt Select , lựa chọn sẽ xác định thành phố nào từ quốc gia nào sẽ có trong bảng và nói chung, khả năng hiển thị tất cả các thành phố có sẵn đã được thêm vào.
Khi tạo một thành phần Select , nó phải được lấp đầy bằng các tùy chọn mà từ đó lựa chọn sẽ được thực hiện. Để làm điều này, như trong Relselect , bạn cần lấy danh sách chung các quốc gia. Nhưng sau đó ta không gửi trực tiếp danh sách này cho Select mà chuyển thành các phương án có sẵn, mỗi phương án được biểu diễn dưới dạng mô hình Select Option . Do đó, chúng ta khai báo mảng Select Options là một biến và điền vào đó dữ liệu cần thiết trong một vòng lặp.
Trong ví dụ này, các trường Select Options thiết yếu đối với chúng tôi sẽ là Label (văn bản của tùy chọn được đề xuất) và Value (số nhận dạng của nó). Đặt các giá trị này thành tên quốc gia và ID của quốc gia đó.
Khi vòng lặp hoàn tất, chúng ta nên tạo và thêm một tùy chọn nữa sẽ hiển thị tất cả các thành phố có sẵn mà không cần lọc theo quốc gia. Hãy đặt Label = World và Value = 0 .
Khi bạn chọn bất kỳ tùy chọn nào, trình kích hoạt Select onChange sẽ kích hoạt. Hãy sử dụng nó để tìm ra tùy chọn đã chọn và ghi nó vào biến toàn cầu mới Country selected . Trong trường hợp này, cần phải thực hiện kiểm tra bổ sung và nếu tùy chọn cuối cùng (tất cả các thành phố có sẵn) đã được chọn, thì giá trị của biến này sẽ được đặt thành trống ( null ).
Hành động cuối cùng của quy trình công việc này là bắt đầu nhấp vào nút Refresh , thao tác này sẽ làm mới dữ liệu trong bảng. Quy trình kinh doanh của nó cũng cần được thay đổi một chút để tính đến sự xuất hiện của một biến số mới.
Bây giờ chúng ta có thể chọn thành phố nào từ quốc gia nào sẽ được hiển thị trong bảng.
thành phần Dropdown
Và cuối cùng, hãy xem xét một thành phần khác cho phép bạn chọn các tùy chọn khác nhau - Dropdown . Điểm khác biệt chính của nó là việc chọn một tùy chọn cụ thể sẽ ngay lập tức kích hoạt một số hành động thay vì chỉ ghi nhớ tùy chọn đã chọn. Nó có thể được gọi là một nút với chức năng mở rộng.
Ví dụ: hãy sử dụng Dropdown để thay thế cho nút xóa quốc gia trong bảng. Bây giờ nó sẽ không xóa mục nhập trong cơ sở dữ liệu ngay lập tức mà sẽ gọi ra các tùy chọn bổ sung để bạn có thể xác nhận việc xóa hoặc hủy bỏ nó.
Hãy bắt đầu với cấu hình chung của thành phần. Hãy chọn sự xuất hiện của nó và các tùy chọn có sẵn.
Tiếp theo, chúng ta sẽ tự tạo quy trình kinh doanh. Và hành động đầu tiên trong đó sẽ là xác định bản ghi mà Dropdown đã được nhấp vào. Đối với các nút thông thường, giá trị này được chuyển dưới dạng Record ID , nhưng trong trường hợp này, thậm chí không phải chính Dropdown sẽ được nhấn mà là thành phần con của nó với tùy chọn mong muốn. Do đó, việc lấy ID mục nhập phức tạp hơn một chút.
Đối với các thành phần bảng lặp lại, Component ID bao gồm hai phần, được phân tách bằng dấu “-”. Phần đầu tiên là ID thành phần tiêu chuẩn. Nhưng phần thứ hai chỉ là ID bản ghi, phần bổ sung này làm cho mã định danh của các thành phần lặp lại trở thành duy nhất.
Biết được điều này, chúng ta chỉ cần lấy ID này. Vì vậy, chúng ta sẽ chia chuỗi thành nhiều phần ( Split string ) và tìm ra giá trị của phần thứ hai ( index = 1 )
Bước tiếp theo, chúng ta cần tìm hiểu tùy chọn nào đã được chọn.
Nếu đây thực sự là một tùy chọn để xác nhận việc xóa, thì hãy chạy lệnh thích hợp. Nếu không, bạn không thể làm gì vì một số hành động không bắt buộc.
Giờ đây, việc xóa các bản ghi khỏi cơ sở dữ liệu được bảo vệ khỏi các lần nhấp ngẫu nhiên.
