Hiển thị dữ liệu website theo bảng giống Excel

Nếu bạn yêu thích Excel và muốn hiển thị dữ liệu trên website giống excel thì jQuery Grid Plugin sẽ hỗ trợ bạn thực hiện điều này rất dễ dàng. Ngoài ra plugin này cũng hỗ trợ các chức năng như : sort dữ liệu, thay đổi kích thước bảng bằng kéo thả, chỉnh sửa dữ liệu trực tiếp trên bảng tính, xuất file excel…

 

Demo Download Read more

 

Cách sử dụng plugin này như sau:

  1. Chèn liên kết đến đến thư viện jQuery:  jquery-ui.css, jquery.min.js, jquery-ui.min.js trong thẻ <head> của html

<link rel=”stylesheet” href=”https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/base/jquery-ui.css” />

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js”></script>
<script src=”http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js”></script>

2. Chèn liên kết đến file css, js của plugin: pqgrid.min.css, pqgrid.min.js, pqgrid.css

<link rel=”stylesheet” href=”pqgrid.min.css”>
<script src=”pqgrid.min.js”></script>
<link rel=”stylesheet” href=”themes/office/pqgrid.css” />

3. Tạo dữ liệu chạy thử ( khi áp dụng cho dự án website, dữ liệu này sẽ được lấy ra trong SQL):

<script>
$(function () {
var data = [[1, ‘Exxon Mobil’, ‘339,938.0’, ‘36,130.0’],
[2, ‘Wal-Mart Stores’, ‘315,654.0’, ‘11,231.0’],
[3, ‘Royal Dutch Shell’, ‘306,731.0’, ‘25,311.0’],
[4, ‘BP’, ‘267,600.0’, ‘22,341.0’],
[5, ‘General Motors’, ‘192,604.0’, ‘-10,567.0’],

var obj = { width: 700, height: 400, title: “ParamQuery Grid Example”,resizable:true,draggable:true };
obj.colModel = [{ title: “Rank”, width: 100, dataType: “integer” },
{ title: “Company”, width: 200, dataType: “string” },
{ title: “Revenues ($ millions)”, width: 150, dataType: “float”, align: “right” },
{ title: “Profits ($ millions)”, width: 150, dataType: “float”, align: “right”}];
obj.dataModel = { data: data };
$(“#grid_array”).pqGrid(obj);

});

</script>

4. Gọi dữ liệu này hiển thị trong thẻ <body>

<body>
<div id=”grid_array” style=”margin:100px;”></div>
</body>

Ngoài ra còn có những tùy chọn nâng cao nằm trong file pqgrid.dev.js, bạn hãy tự khám phá.

Tham khảo thêm cách cấu hình các chức năng nâng khác tại : https://paramquery.com/grid

 

THAM KHẢO THÊM