Tìm hiểu về Jqgrid

Là một jQuery Grid Plugin được sử dụng nhiều để hiển thị và quản lý dữ liệu dưới dạng bảng

Nếu bạn chưa từng nghịch qua về nó có thể đọc trước về nó via link sau tham khảo, khá đầy đủ và chi tiết, với một vài example dễ hiểu sử dụng HTML hoặc PHP: http://www.trirand.com/jqgridwiki/doku.php?id=wiki:first_grid

Giờ tôi sẽ giới thiệu qua về jqGrid 😄

Via trang chủ: http://www.trirand.com/jqgridwiki/doku.php?id=start

Và đây là những gì họ nói

“jqGrid is an Ajax-enabled JavaScript control that provides solutions for representing and manipulating tabular data on the web. Since the grid is a client-side solution loading data dynamically through Ajax callbacks, it can be integrated with any server-side technology, including PHP, ASP, Java Servlets, JSP, ColdFusion, and Perl.”

Ngoài ra

Về các chức năng cơ bản mà jqGrid đáp ứng rất tốt

  • Paging.
  • Resizable Columns.
  • SubGrids.
  • Sort với nhiều kiểu dữ liệu.
  • Tự động load dữ liệu mỗi khi chúng ta scroll
  • Hỗ trợ dữ liệu dảng mảng, json, hỗ trợ XML như là nguồn dữ liệu để sử dụng..

Về ưu điểm

  • Nhiều ví dụ cụ thể
  • Code mẫu đầy đủ php, css, js
  • Gridview
  • Load ajax khi sang trang, không load hết tất cả records 1 lần
  • Có nút search, nút reload Grid, sắp xếp theo tên giống như trên Excel
  • Hỗ trợ dữ liệu dảng mảng, json, hỗ trợ XML như là nguồn dữ liệu để sử dụng..
  • Support đa ngôn ngữ (Khoảng hơn 20 ngôn ngữ).
  • Hỗ trợ rất nhiều trình duyệt thấp kể cả các phiên bản rất thấp của các trình duyệt : IE 6.0+, FireFox 2.0+, Safari 3.0+, Opera 9.2+ and Google Chrome.

Khuyết điểm

  • Trông GridView khá là cũ, giao diện không hiện đại.

Không phải vậy nhé, ở phiên bản mới nhất 5.0 jqGrid đã support với Bootstrap UI, có responsive và hỗ trợ giao diện cho mobile


Để cấu hình cho jqGrid bạn có thể chỉnh sửa trong jQuery.jgrid.defaults. Ở những view riêng biệt bạn muốn thay đổi để phù hợp bạn ó thể config với jQuery.extend().

$.extend(jQuery.jgrid.defaults, {
    jsonReader : {
        id: "0",
        repeatitems: false
    },
    mtype: 'POST',
    sortname: '',
    toppager:false,
    rowNum: 50,
    viewrecords: true,
    loadtext: "Loading...",
    height: "550px",
    rowList: [50,100,500,1000],
    gridComplete: function(grid){
        // do something, such as resizing grid...
    }
});

Giải thích về các thuộc tính

jqgrid-property.PNG

Với mỗi kiểu dữ liệu (xml, json, local) sẽ có một đối tượng reader tương ứng để giúp jqGrid hiểu được cấu trúc của dữ liệu. Ví dụ với kiểu dữ liệu JSON, jqGrid định nghĩa sẵn một jsonReader, đó là mục đích khai báo ở datatype.

jqGrid cung cấp cả Navigating

Để kích hoạt các built-in button (add, edit, del, view, search) trên thanh navigator của jqGrid, cần gọi phương thức navGrid() cùng với các tùy chọn sau khi đã tạo grid:

Chỉnh sửa config:

// config the built-in buttons for the pager
$grid.jqGrid(
    "navGrid",
    '#pager1',
    {
        search: false, view:true, edit: true, add: true, del: true,
    },
    // edit options
    options,
    // add options
    options,
    // del_options, search_options, view_options
);

Advanced Search

Mặc định jqGrid cung cấp sẵn chức năng Single Search khi được kích hoạt button Search cho navigator. Ta có thể thêm tùy chọn {multipleSearch:true} cho tham số search_options (xem phần trên) để jqGrid chuyển sang chức năng Advanced Search. Chức năng này cho phép tìm kiếm với nhiều điều kiện phức tạp hơn.

Để search dựa vào toolbar, ta gọi phương thức filterToolbar():

    $grid.jqGrid('filterToolbar',options);

Ngoài ra

jqGrid cung cấp ba cách thức để chỉnh sửa dữ liệu là Cell, Inline và Form. Cách sửa bằng Form đã được tích hợp vào trong button Edit của navigator.

Các tính năng khác như Grouping, Formatter ...


Tài liệu tham khảo