KRUD & LIST JS SDK

1. Khởi Tạo Thư Viện

Nhúng 2 thẻ script sau vào trang Web để kết nối trực tiếp với CDN hệ thống:

<!-- Import KRUD Core & List Helper -->
<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 Form HTML

Thư viện tự động đọc dữ liệu dựa trên class .data-element và các thuộc tính cấu hình mở rộng:

• name / id / data-field: Định danh tên cột tương ứng trong CSDL MySQL.
• data-type: Định kiểu dữ liệu để làm sạch tự động (number, int, decimal, date).
• data-operator: Toán tử lọc tìm kiếm (=, LIKE, >, >=, <, <=). Mặc định text là LIKE.

Form HTML Chuẩn Mẫu:

<form id="customerForm">
    <input type="text" class="data-element" name="full_name" placeholder="Họ và tên">
    
    <!-- Nhập 120000 -> Tự định dạng 120.000 -->
    <input type="text" class="data-element" name="salary" data-type="number" placeholder="Lương">
    
    <!-- Nhập 13092026 -> Tự định dạng 13/09/2026 -->
    <input type="text" class="data-element" name="birthday" data-type="date" placeholder="Ngày sinh">

    <button type="button" onclick="handleSave()">Lưu dữ liệu</button>
    <button type="button" onclick="handleSearch()">Tìm kiếm</button>
</form>

3. Thao Tác Dữ Liệu (KRUD)

Thêm Mới (INSERT) & Cập Nhật (UPDATE)

// Thêm mới bản ghi từ Form
function handleSave() {
    sendFormDataKRUD("insert", "customers", null, "#customerForm")
        .then(res => {
            if (res.success) alert("Tạo thành công ID: " + res.data.id);
        });
}

// Cập nhật bản ghi theo ID
function handleUpdate(recordId) {
    sendFormDataKRUD("update", "customers", recordId, "#customerForm")
        .then(res => {
            if (res.success) alert("Cập nhật thành công!");
        });
}

Xóa Dữ Liệu (DELETE)

function handleDelete(recordId) {
    if (!confirm("Xác nhận xóa bản ghi này?")) return;

    krud("delete", "customers", {}, recordId).then(res => {
        if (res.success) alert("Đã xóa thành công!");
    });
}

4. Phân Trang & Lọc Dữ Liệu (LIST)

Sử dụng buildWhereFromForm để tự tạo truy vấn điều kiện từ Form tìm kiếm:

function handleSearch(page = 1) {
    // 1. Tự quét Form & tạo mảng điều kiện WHERE
    const filterWhere = buildWhereFromForm("#customerForm");

    // 2. Thực thi API Lấy danh sách
    getKrudList({
        table: "customers",
        page: page,
        limit: 10,
        sort: { id: "DESC" },
        where: filterWhere
    }).then(res => {
        if (res.success) {
            console.log("Tổng bản ghi:", res.total);
            console.log("Dữ liệu danh sách:", res.data);
        }
    });
}