【第三課】WEBIX 入門自學-Hello World


在看官網教程時,入門的例子就是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代碼  框架庫自動生成相應組件~~~

好了 這一課就先到這了

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM