w2ui 資料表

適合讀取大量資料的資料表

📋 目錄

1. w2ui 資料表介紹
2. 調整樣式

w2ui 資料表 Grid 介紹

基於 Jquery 的 UI 庫，包含常用 UI 組件，如：佈局、表格、樹形、Tabs、工具條、彈出菜單、表單等等。採用 Html5 + CSS3 編寫，可以支持常用的瀏覽器，如：Chrome、FireFox7+、Safari 5+和IE 9+等。

特點：體積小(只有 97kb)、使用 JSON 格式。

Demo

W2UI 可以與 ES6、Vue、React 搭配使用。

有關 Data Table，存在許多不錯用、樣式也新穎的資料表套件。W2UI grid 的特點在善於快速展示大筆資料。有關處理速度可以參考這篇：

JavaScript Grid with One Million Records | JavaScript UI - w2ui

Grid

資料表 grid data 有兩種來源，一種是本地端，一種從 Sever 回傳。相關設定可以參考官方網站：

Grid: Overview | JavaScript UI — w2ui

一個本地端的簡易範例：

把 grid 包在 showGrid() function ，可用
.destroy() 銷毀
.refresh() 更新
.add() 添加資料

調整樣式

在 .w2grid{} 中

selectType: 'cell' (選擇單格資料表格)

可以用 class 蓋過去原本的(加上!important)

預設 selectType: 'row' (選擇資料表一個列)

style: ‘’ 可以設定整個表單的樣式

調整 Header

藉由 .w2ui-col-header 調整

.w2ui-col-header {

background-color: #F3F6FA !important;

color: #212529 !important;

}

本篇內容為專案實作中的筆記。

⚡ Display all the data!