KRUD & LIST JS - HƯỚNG DẪN & FILE MẪU

1. Khởi Tạo & Nhúng CDN

Thêm 2 dòng script sau vào thẻ <head> của ứng dụng:

<script src="https://kio.dvqt.vn/krud.js"></script>
<script src="https://kio.dvqt.vn/list.js"></script>

2. Quy Tắc Khai Báo Element

• .data-element: Class bắt buộc để thư viện quét tự động.
• name / data-field: Tên cột tương ứng trong bảng MySQL.
• data-type: Nhận các giá trị number, int, decimal, date (tự động làm sạch & định dạng khi gõ).
• data-operator: Dùng cho form tìm kiếm (=, LIKE, >=, <=).

3. FILE MẪU 1: THÊM / SỬA / XÓA (demo-krud.html)

Copy toàn bộ đoạn mã bên dưới vào một file demo-krud.html và mở trực tiếp để chạy thử:

<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <title>Demo KRUD - Thêm Sửa Xóa</title>
    <script src="https://kio.dvqt.vn/krud.js"></script>
</head>
<body>
    <h2>Quản Lý Khách Hàng (KRUD)</h2>
    
    <form id="crudForm">
        <input type="hidden" id="record_id" value="">

        <label>Họ và tên:</label><br>
        <input type="text" class="data-element" name="full_name"><br><br>

        <label>Lương (Tự định dạng số):</label><br>
        <input type="text" class="data-element" name="salary" data-type="number"><br><br>

        <label>Ngày sinh (DD/MM/YYYY):</label><br>
        <input type="text" class="data-element" name="birthday" data-type="date"><br><br>

        <label><input type="checkbox" class="data-element" name="is_vip"> Khách VIP</label><br><br>

        <button type="button" onclick="saveData()">Lưu Dữ Liệu</button>
        <button type="button" onclick="resetForm()">Làm Mới</button>
    </form>

    <script>
        function saveData() {
            const id = document.getElementById("record_id").value;
            const action = id ? "update" : "insert";

            sendFormDataKRUD(action, "customers", id || null, "#crudForm")
                .then(res => {
                    if (res.success) {
                        alert(action === "insert" ? "Thêm thành công ID: " + res.data.id : "Cập nhật thành công!");
                        resetForm();
                    } else {
                        alert("Lỗi: " + res.error);
                    }
                });
        }

        function deleteData(id) {
            if (!confirm("Bạn có chắc muốn xóa bản ghi ID " + id + "?")) return;
            krud("delete", "customers", {}, id).then(res => {
                if (res.success) alert("Xóa thành công!");
            });
        }

        function resetForm() {
            document.getElementById("crudForm").reset();
            document.getElementById("record_id").value = "";
        }
    </script>
</body>
</html>

4. FILE MẪU 2: TÌM KIẾM & PHÂN TRANG (demo-list.html)

Copy toàn bộ đoạn mã bên dưới vào một file demo-list.html và mở trên trình duyệt để chạy thử:

<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <title>Demo LIST - Tìm Kiếm & Phân Trang</title>
    <script src="https://kio.dvqt.vn/list.js"></script>
</head>
<body>
    <h2>Danh Sách Khách Hàng (LIST)</h2>

    <form id="searchForm">
        <input type="text" class="data-element" name="full_name" placeholder="Tìm tên (LIKE)">
        <input type="text" class="data-element" name="salary" data-type="number" data-operator=">=" placeholder="Lương từ (>=)">
        <button type="button" onclick="loadData(1)">Tìm Kiếm</button>
    </form>
    <hr>

    <table border="1" cellpadding="6" style="border-collapse: collapse; width: 100%;">
        <thead>
            <tr>
                <th>ID</th>
                <th>Họ tên</th>
                <th>Lương</th>
                <th>Ngày sinh</th>
            </tr>
        </thead>
        <tbody id="gridBody"></tbody>
    </table>

    <p id="pageInfo"></p>

    <script>
        function loadData(page = 1) {
            const whereConditions = buildWhereFromForm("#searchForm");

            getKrudList({
                table: "customers",
                page: page,
                limit: 5,
                sort: { id: "DESC" },
                where: whereConditions
            }).then(res => {
                if (!res.success) { alert(res.error); return; }

                const tbody = document.getElementById("gridBody");
                tbody.innerHTML = "";

                res.data.forEach(item => {
                    tbody.innerHTML += `
                        <tr>
                            <td>${item.id}</td>
                            <td>${item.full_name || ''}</td>
                            <td>${item.salary || 0}</td>
                            <td>${item.birthday || ''}</td>
                        </tr>`;
                });

                document.getElementById("pageInfo").innerText = `Trang ${res.page} | Tổng số: ${res.total} bản ghi`;
            });
        }

        // Tự động tải dữ liệu lần đầu
        loadData(1);
    </script>
</body>
</html>