在看官網教程時，入門的例子就是dataTable這個空間。So，遵循官網，一起來看一下入門的DataTable組件；
WEB使用時固然是先引入相應的庫文件；
代碼如下
<html> <head> <title>Quick start with DataTable</title> <script src="../codebase/webix.js" type="text/javascript" charset="utf-8"></script> <link rel="stylesheet" href="../codebase/webix.css" type="text/css" charset="utf-8"> </head> <body> <script> //here you will place your JavaScript code </script> </body> </html>
來一個小栗子吧
包含表頭的3X3的表格
<!DOCTYPE html> <html> <head> <title>Quick start with DataTable</title> <link rel="stylesheet" href="../../../codebase/webix.css" type="text/css" charset="utf-8"> <script src="../../../codebase/webix.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div class='header_comment'>Minimal code to init DataTable</div> <div id="testA"></div> <script> var dtable = webix.ui({ container:"testA",//定義內部表格ID（html） view:"datatable",//聲明為datatable組件 columns:[ { id:"title", header:"Film title", width:200},//表頭 { id:"year", header:"Release year" , width:80}, { id:"votes", header:"Votes", width:100} ], autowidth:true,//自動寬度 autoheight:true,//自動高度 data:[//表格數據 { id:1, title:"The Shawshank Redemption", year:1994, votes:678790}, { id:2, title:"The Godfather", year:1972, votes:511495} ] }); </script> </body> </html>
上效果圖~
代碼簡潔到爆 只需要制定js代碼 框架庫自動生成相應組件~~~
好了 這一課就先到這了