Thời gian dùng thử đã hết!
Phần mềm đã vượt quá 15 ngày dùng thử miễn phí. Vui lòng nhập mã bản quyền (License Key) để tiếp tục sử dụng iTeach.
Bài 18. Form Nâng cao: Dropdown Động & Cập nhật
1. Kiến thức bài học
1. Dropdown Động (Dynamic Select): Thay vì code cứng các thẻ <option> trong HTML, ta sẽ dùng sự kiện khi trang vừa tải xong (hoặc bấm nút) để gọi Apps Script lấy danh sách từ Sheet (ví dụ: Danh sách thiết bị dạy học), sau đó dùng JavaScript để đổ vào thẻ <select>.
2. Cập nhật dữ liệu (Update Record): Thay vì dùng appendRow() để thêm dòng mới ở cuối bảng, ta sẽ duyệt mảng dữ liệu (vòng lặp for), tìm đúng dòng chứa "Mã cần sửa", sau đó dùng lệnh getRange(row, col).setValue(giaTriMoi) để ghi đè dữ liệu mới.
2. Bài tập mẫu
Ví dụ 1: Tải danh sách thiết bị vào Dropdown
Đề bài: Quản lý danh mục thiết bị rất hay thay đổi. Hãy viết code để Form đăng ký mượn tự động lấy danh sách máy chiếu/laptop từ cột A của Sheet "ThietBi".
Code Apps Script (Code.gs):
functionlayDanhSachThietBi() {letsheet=SpreadsheetApp.getActiveSpreadsheet().getSheetByName("ThietBi");// Lấy cột A, từ dòng 2 đến dòng cuối cùng có dữ liệuletdata= sheet.getRange(2, 1, sheet.getLastRow() - 1, 1).getValues();returndata;// Trả về mảng 2 chiều chứa tên các thiết bị}
Code HTML (Index.html):
<select id="chonThietBi"><option value="">Đang tải danh sách...</option></select><script>// Tự động chạy khi trang web tải xongwindow.onload=function() {google.script.run.withSuccessHandler(doDuLieuVaoSelect) .layDanhSachThietBi(); };functiondoDuLieuVaoSelect(mangThietBi) {letselect = document.getElementById("chonThietBi"); select.innerHTML ="<option value=''>-- Vui lòng chọn thiết bị --</option>";// Duyệt mảng để đắp thẻ optionmangThietBi.forEach(thietBi => { select.innerHTML +=`<option value="; }); }${thietBi[0]}">${thietBi[0]}</option>`</script>
Ví dụ 2: Form Cập nhật tình trạng thiết bị (Update)
Đề bài: Khi một máy in hoặc laptop sửa xong, nhân viên IT cần cập nhật trạng thái từ "Đang hỏng" sang "Hoạt động". Thay vì thêm dòng mới, ta sẽ ghi đè lên dòng cũ dựa vào Mã thiết bị.
Code Apps Script (Code.gs) xử lý Update:
functioncapNhatTrangThai(formObj) {letsheet=SpreadsheetApp.getActiveSpreadsheet().getSheetByName("QuanLyThietBi");letdata= sheet.getDataRange().getValues();letmaCanTim= formObj.maTB;// Vòng lặp tìm dòng chứa mã thiết bị (Giả sử Mã ở cột A - index 0)for(leti = 1; i < data.length; i++) {if(data[i][0] == maCanTim) {// Cộng 1 vì mảng JS bắt đầu từ 0, nhưng Sheet bắt đầu từ dòng 1letrowIndex = i + 1;// Cập nhật cột Trạng thái (Giả sử nằm ở cột C - cột số 3)sheet.getRange(rowIndex, 3).setValue(formObj.trangThaiMoi);return"Cập nhật thành công thiết bị: "+ maCanTim; } }return"Không tìm thấy thiết bị này!"; }
Mô phỏng Giao diện: Form Cập nhật trạng thái
3. Bài tập tự luyện
Bài tập: Xây dựng Form Chấm công/Duyệt ngày nghỉ
Đề bài: Với vai trò kế toán nhà trường, hãy tạo một Web App duyệt đơn xin nghỉ phép.
- Sử dụng Code.gs trả về mảng danh sách các đơn xin nghỉ phép đang có trạng thái "Chờ duyệt" và đổ vào thẻ
<select>trên HTML. - Khi chọn một đơn và bấm nút "Phê duyệt", Web App gửi ID đơn đó về Code.gs để tìm đúng dòng và đổi chữ "Chờ duyệt" thành "Đã duyệt".