Set Highlight First Row jqGrid: Hướng Dẫn Chi Tiết Và Ví Dụ

jqGrid là một plugin jQuery mạnh mẽ cho phép bạn dễ dàng tạo ra các bảng dữ liệu tương tác và đầy đủ tính năng trên website của mình. Một trong những tính năng hữu ích của jqGrid là khả năng highlight hàng đầu tiên của bảng, giúp thu hút sự chú ý của người dùng và làm cho dữ liệu dễ dàng hơn. Bài viết này sẽ hướng dẫn chi tiết cách Set Highlight First Row Jqgrid, cùng với ví dụ minh họa và các thông tin bổ ích để bạn có thể áp dụng ngay vào dự án của mình.

Hiểu Về Tính Năng Highlight First Row jqGrid

Highlight first row trong jqGrid là một tính năng đơn giản nhưng mang lại hiệu quả trực quan cao. Thay vì chỉ hiển thị bảng dữ liệu thông thường, bạn có thể làm cho hàng đầu tiên nổi bật bằng cách thay đổi màu nền, màu chữ, hoặc thêm một viền rõ ràng. Điều này giúp người dùng dễ dàng nhận diện hàng đầu tiên và tập trung vào dữ liệu quan trọng nhất.

Cách Set Highlight First Row jqGrid: Hướng Dẫn Chi Tiết

Để set highlight first row jqGrid, bạn có thể sử dụng tùy chọn rowNum và rowList trong cấu hình jqGrid. Dưới đây là các bước chi tiết:

Khởi tạo jqGrid:
- Thêm thư viện jQuery và jqGrid vào trang web của bạn.
- Khai báo dữ liệu cho bảng jqGrid.
- Sử dụng $("#gridId").jqGrid(...) để khởi tạo jqGrid, bao gồm các thuộc tính cấu hình như colModel và data.
Thiết lập rowNum và rowList:
- rowNum: Xác định số lượng hàng được hiển thị trên mỗi trang.
- rowList: Cho phép người dùng chọn số lượng hàng được hiển thị trên mỗi trang.
Sử dụng loadComplete để Highlight:
- Sử dụng sự kiện loadComplete để chạy code highlight hàng đầu tiên sau khi jqGrid được tải và hiển thị.
- Trong hàm loadComplete, sử dụng $("#gridId").setSelection(1) để chọn hàng đầu tiên.
- Sử dụng $("#gridId").setRowData(1, { background: "#f0f0f0" }) để thay đổi màu nền của hàng đầu tiên.

Ví Dụ Minh Họa

Dưới đây là ví dụ minh họa cách set highlight first row jqGrid bằng cách sử dụng code HTML và Javascript:

<!DOCTYPE html>
<html>
<head>
<title>jqGrid Highlight First Row Example</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/5.5.2/css/ui.jqgrid.css" type="text/css" media="screen" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/5.5.2/js/jquery.jqGrid.min.js"></script>
</head>
<body>
<table id="grid"></table>
<script>
  $(document).ready(function() {
    $("#grid").jqGrid({
      data: [
        { id: 1, name: "John Doe", age: 30 },
        { id: 2, name: "Jane Smith", age: 25 },
        { id: 3, name: "Peter Jones", age: 40 }
      ],
      datatype: "local",
      colModel: [
        { label: 'ID', name: 'id', width: 50 },
        { label: 'Name', name: 'name', width: 150 },
        { label: 'Age', name: 'age', width: 50 }
      ],
      rowNum: 2,
      rowList: [2, 5, 10],
      loadComplete: function() {
        $("#grid").setSelection(1);
        $("#grid").setRowData(1, { background: "#f0f0f0" });
      }
    });
  });
</script>
</body>
</html>

Các Lưu Ý Khi Sử Dụng

Hiệu suất: Sử dụng loadComplete để highlight hàng đầu tiên sau khi jqGrid được tải sẽ giúp cải thiện hiệu suất và tránh làm chậm trang web.
Tùy chỉnh: Bạn có thể thay đổi màu nền, màu chữ, thêm viền hoặc áp dụng các hiệu ứng khác cho hàng đầu tiên để phù hợp với thiết kế của website.
Tương thích: Đảm bảo rằng các tùy chọn và phương thức được sử dụng trong code phù hợp với phiên bản jqGrid bạn đang sử dụng.

Lời Khuyên Từ Chuyên Gia

Theo chuyên gia về giao diện người dùng, Nguyễn Văn A, “Highlight first row là một kỹ thuật đơn giản nhưng hiệu quả để thu hút sự chú ý của người dùng và làm cho dữ liệu dễ dàng tiếp cận. Việc sử dụng jqGrid và các tính năng của nó giúp bạn tạo ra các bảng dữ liệu đẹp mắt, tương tác và dễ dàng quản lý.”

FAQ (Câu Hỏi Thường Gặp)

Làm cách nào để set highlight cho hàng đầu tiên của jqGrid mà không sử dụng loadComplete?
- Bạn có thể sử dụng gridComplete thay cho loadComplete, tuy nhiên hiệu suất có thể bị ảnh hưởng nhẹ.
Làm cách nào để highlight hàng đầu tiên khi người dùng chuyển trang?
- Sử dụng sự kiện gridComplete hoặc loadComplete để highlight lại hàng đầu tiên mỗi khi người dùng chuyển trang.
Có thể highlight nhiều hàng đầu tiên của jqGrid không?
- Có thể, bạn có thể sử dụng setRowData để thay đổi màu nền của nhiều hàng.

Gợi ý Các Bài Viết Khác

Hướng Dẫn Sử Dụng jqGrid: Tạo Bảng Dữ Liệu Tương Tác
Các Tính Năng Nâng Cao Của jqGrid
Tối ưu Hiệu Suất cho Bảng Dữ Liệu jqGrid

Kêu gọi hành động: Khi cần hỗ trợ hãy liên hệ Số Điện Thoại: 0372999996, Email: [email protected] Hoặc đến địa chỉ: 236 Cầu Giấy, Hà Nội. Chúng tôi có đội ngũ chăm sóc khách hàng 24/7.