Cách sử dụng ag-grid trong hiển thị dữ liệu

Trong bài viết này chúng ta sẽ làm quen với việc dùng thư viện ag-grid trong js mà cụ thể ở đây là AngularJS.

Trước hết chúng ta cần hiểu ag-grid là gì? Ag-grid là một thư viện js được dùng hỗ trợ việc hiển thị dữ liệu dưới dạng table trong javascript và các framwork của nó. Đống thời nó cũng cung cấp các chức năng tiện lợi trong việc thao tác với table như sắp xếp, lọc. lấy dữ liệu của hàng đã chọn, cập nhật thông tin, xuất CSV...Ở đây chúng ta sử tìm hiểu sử dụng chức năng sort trong AngularJS. Khi sử dụng với AngularJS , chúng ta có thể sử dụng phiên bản đóng gói với ag-Grid hoặc với phiên bản commonJS và chúng ta cần phải thông báo cho ag-grid là chúng ta sủ dụng với angularJS.

Trước hết chúng ta có file dữ liệu data dưới dạng json như sau

// data.json
[{"name":"Test1","age":23,"country":"Vietnam","sport":"Swimming"},
  {"name":"Nam","age":19,"country":"Vietnam","sport":"Swimming"},
  {"name":"Viet","age":27,"country":"Taiwan","sport":"football"},
  {"name":"Ha","age":25,"country":"My","sport":"Swimming"},
  {"name":"Qaung","age":24,"country":"Russia","sport":"tennis"}]

và để hiển thị table trên màn hình, chúng ta cần khải bảo một thể div có thuộc tính ag-grid

<div ag-grid="gridOptions" class="ag-fresh" style="height: 100%;"></div>

và trong file javascript thẻ này sẽ được gắn sự kiện của ag-Grid

document.addEventListener('DOMContentLoaded', function() {
    var gridDiv = document.querySelector('#myGrid');
    new agGrid.Grid(gridDiv, gridOptions);

Để có thê sử dụng sort của ag-grid chúng ta cần phải bật chức năng sort trong ag-gridOptions

var gridOptions = {
    columnDefs: columnDefs,
    rowData: data,
    enableSorting: true
};

Custom sắp xếp: trong file js chúng ta cần khai báo các cột sẽ được hiển thi trong table

var columnDefs = [
    {headerName: "Name", field: "name", width: 150, sort: 'desc'},
    {headerName: "Age", field: "age", width: 90},
    {headerName: "Country", field: "country", width: 120},
    {headerName: "Sport", field: "sport", width: 110},
];

field ở đây chính là các key trong list data json mà chúng ta có, ở trong này chúng ta cũng sẽ custom luôn độ rộng của các field, có cho sửa field hay không... và dữ liệu trong bảng sẽ được sắp xếp mặc định giảm theo trường name.

Theo mặc đình của chức năng sort, việc sắp xếp các trường theo trình tự sau

ascending -> descending -> none. 

theo cách đó, khi chúng ta click vào một cột chưa được sắp xếp, nó se được sắp xếp tăng và khi click lần nữa nó sẽ đươc giảm.

Tất nhiên, thứ tự sắp xếp cho các cột này chúng ta cũng có thể custom theo ý muốn của chúng ta. giả sử thứ tự các trường chúng ta muốn sắp xếp như sau:

• Grid Default: tăng -> giảm -> không sắp xếp
• Cột Name: tăng -> giảm
• Cột Age: giảm-> tăng
• Cột Country: giảm -> không sắp xếp
• Cột Sport: chỉ sắp xếp tăng

Thì các cột sẽ được config như sau:

var columnDefs = [
    {headerName: "Name", field: "name", width: 150, sortingOrder: ['asc','desc']},
    {headerName: "Age", field: "age", width: 90, sortingOrder: ['desc','asc']},
    {headerName: "Country", field: "country", width: 120, sortingOrder: ['desc',null]},
    {headerName: "Sport", field: "sport", width: 110, , sortingOrder: ['asc']},
];

Sắp xêp theo API Việc săp xếp cũng có thê thông qua API bắng các phương pháp sau:

• setSortModel (sortModel): Để thiết lập sắp xếp.
• getSortModel (): lấy trạng thái của các loại sắp xếp hiện đang hoạt động. Cả 2 phương thức đều làm việc trên một list danh sách các đối tượng sắp xếp, mối đối tượng đều chứa trường cần sắp xếp. Thứ tự của các đối tượng là thứ tự các cột được sắp xếp.

Ví dụ, mảng dưới đây model sẽ đầu tiên được sắp xếp cột name tăng dần, và Age giảm dần.

var sort =  [
    {colId: 'name', sort: 'asc'},
    {colId: 'age, sort: 'desc'}
]

giả sửu chúng ta có một button để gọi sự thiết lập này thông qua một funtion

function sortByNameThenAge() {
    var sort = [
       {colId: 'name', sort: 'asc'},
       {colId: 'age, sort: 'desc'}
    ];
    gridOptions.api.setSortModel(sort);
}

Như vậy chúng ta đã tìm hiểu cơ bản về chức năng sort trong ag-Grid. Để tìm hiểu thêm các chức năng khác chúng ta có thể vào trang ag-grid.com/javascript-grid-getting-started để tìm hiểu thêm.