zoukankan      html  css  js  c++  java
  • 【第三课】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",    200},//表头
                    { id:"year",    header:"Release year" , 80},
                    { id:"votes",   header:"Votes",         100}
                ],
                autotrue,//自动宽度
                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代码  框架库自动生成相应组件~~~

    好了 这一课就先到这了

  • 相关阅读:
    iOS的几种动画使用
    iOS工程师必备技能
    网络数据的下载(NSUrlconnection异步下载和NSstring同步下载)和UI界面数据的刷新(都是抛弃第三方库的一些本质)
    GCD定时器
    iOS开发的小技巧
    站在巨人的肩膀上
    跳转系统设置相关界面的方法
    微信分享
    网站 、内容
    加水印
  • 原文地址:https://www.cnblogs.com/jso0/p/4691825.html
Copyright © 2011-2022 走看看