[Webix] 第三章：Widgets - 1.DataTable

DataTable提供專業的外觀和便捷的模型，用於在可滾動和可排序的資料表中顯示數據。

它是一個功能強大但易於使用的組件，它支持不同的數據源（XML，JSON，CSV，JSArray，HTML Tables）。

數據表具有多種可能性（過濾，排序，分頁，調整大小，樣式，複製等），並且在處理成千上萬條記錄方面仍然非常好且快速。

畫面呈現：

程式碼：

webix.ui({

type:"wide",

rows:[

{

view:"datatable",

columns:[

{ id:"rank", header:"", css:"rank", width:50},

{ id:"title", header:"Film title", fillspace:true},

{ id:"year", header:"Released", width:80},

{ id:"votes", header:"Votes", width:100}

],

autoheight:true,

scroll:false,

data: [

{ id:1, title:"The Shawshank Redemption", year:1994, votes:678790, rating:9.2, rank:1},

{ id:2, title:"The Godfather", year:1972, votes:511495, rating:9.2, rank:2}

]

}

]

});

示範

重要屬性

columns：Array，欄位設定用。

data：資料來源，來源格式可使用XML、JSON、CSV、JSArray、HTML Tables...etc。

重要方法

parse：帶入資料。

clearAll：清除資料。

備註：
匯出有小驚喜，免費版元件就有提供多種匯出格式(PDF、Excel、PNG和CSV)。

相關文章:

[Webix] 第一章：Introdution

[Webix] 第二章：Layout

[Webix] 第三章：Widgets