網頁前端表格套件，雖然在HTML裡已經有Table標籤可以使用，但如果能在表格中加入功能對於使用者的操作會更加分，Grid.js幫你製作一個Table，包含了頁籤換頁、資料排序、資料搜尋、資料讀取中…等方便的方法可以使用，讓我們更容易的查詢與顯示資料，一起來看看怎麼使用吧。
Grid.js 官網(有範例可以參考)
Grid.js GitHub(程式原始碼)
網頁前端表格套件-Grid.js
步驟說明
- 引入套件CSS、Javascript
– CSS 放置於 <head></head> 內
– JavaScript 放置於 </body> 之前
- 加入HTML、JavaScript
– 創建一個 div id 叫做 customTable
– 使用 Grid.js 提供的方法 Grid
– 將功能渲染到HTML cutomTable上
- 附上程式碼
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel=stylesheet type="text/css" href="https://unpkg.com/gridjs/dist/theme/mermaid.min.css">
</head>
<body>
<div id="customTable"></div>
<script src="https://unpkg.com/gridjs/dist/gridjs.umd.js"></script>
<script>
new gridjs.Grid({
columns: [ "Name", "Math", "English", "Science", "Total" ],
data: [
["Andy", 90, 85, 65, 240 ],
["Joe", 80, 95, 75, 250 ],
["Ako", 100, 60, 55, 215 ],
]
}).render(document.getElementById("customTable"));
</script>
</body>
</html>程式碼說明
- new gridjs.Grid: 為 Grid.js 提供的實例有 .Grid 的方法可以使用
- columns: 表單的欄位名稱
- data: 表單的資料列有幾筆
較常使用的方法
| pagination | limit: 5(表示每頁5筆資料) | 頁簽顯示 |
| search | true/false | 是否可以查詢 |
| sort | true/false | 是否可以排序 |
| resizable | true/false | 是否可調整欄位寬 |
附上程式碼
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel=stylesheet type="text/css" href="https://unpkg.com/gridjs/dist/theme/mermaid.min.css">
</head>
<body>
<div id="customTable2"></div>
<script src="https://unpkg.com/gridjs/dist/gridjs.umd.js"></script>
<script>
new gridjs.Grid({ // 頁簽顯示
pagination: {
limit: 5
},
search: true, // 是否可以查詢
sort: true, // 是否可以排序
resizable: true, // 是否可調整欄位寬
columns: [ "Name", "Math", "English", "Science", "Total" ],
data: [
["Andy", 90, 85, 65, 240 ],
["Joe", 80, 95, 75, 250 ],
["Ako", 100, 60, 55, 215 ],
["Jill", 95, 70, 85, 260 ],
["9M", 60, 60, 100, 220 ],
["Dustin", 88, 40, 62, 190 ],
["Mia", 94, 86, 90, 270 ],
["Jimmy", 80, 55, 95, 230 ],
["Jeff", 30, 70, 100, 200 ],
["Asa", 60, 60, 60, 180 ],
]}).render(document.getElementById("customTable2"));
</script>
</body>
</html>Loading效果使用
Loading程式碼說明
- new Promise Es6 (說明參考)
– 確保取得非同步處理的結果
– resolve 成功執行的結果 - setTimeout
– 設定時間延遲秒數
– 在這裡”假裝”為取得資料的時間 - 附上程式碼
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel=stylesheet type="text/css" href="https://unpkg.com/gridjs/dist/theme/mermaid.min.css">
</head>
<body>
<div id="customTable3"></div>
<script src="https://unpkg.com/gridjs/dist/gridjs.umd.js"></script>
<script>
new gridjs.Grid({
pagination: {
limit: 5
},
search: true,
sort: true,
columns: [ "Name", "Math", "English", "Science", "Total" ],
data: () => {
return new Promise(resolve => {
setTimeout(() =>
resolve([
["Andy", 90, 85, 65, 240 ],
["Joe", 80, 95, 75, 250 ],
["Ako", 100, 60, 55, 215 ],
["Jill", 95, 70, 85, 260 ],
["9M", 60, 60, 100, 220 ],
["Dustin", 88, 40, 62, 190 ],
["Mia", 94, 86, 90, 270 ],
["Jimmy", 80, 55, 95, 230 ],
["Jeff", 30, 70, 100, 200 ],
["Asa", 60, 60, 60, 180 ],
]
), 2000);
});
}
}).render(document.getElementById("customTable3"));
</script>
</body>
</html>總結
網路上有許多Table套件可以使用，Grid.js 是我認為最好入門並且有好的外觀，提供的方法也較簡單使用，重點是頁籤的切換直接幫我們處理好，只需要給每頁筆數，官網還有提供其他功能可以運用，大家可以留言給我，或是任何操作有疑問都可以讓我知道，我會盡量在一週內回覆你留言與透過email回覆給你，祝各位開發順利，希望這篇文章能夠幫助到你。