【第三课】WEBIX 入门自学-Hello World

最新推荐文章于 2022-03-20 19:34:42 发布

weixin_30486037

最新推荐文章于 2022-03-20 19:34:42 发布

阅读量157

点赞数

文章标签： javascript ui ViewUI

原文链接：http://www.cnblogs.com/jso0/p/4691825.html

版权

在看官网教程时，入门的例子就是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代码框架库自动生成相应组件~~~

好了这一课就先到这了

转载于:https://www.cnblogs.com/jso0/p/4691825.html

weixin_30486037

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【第三课】WEBIX 入门自学-Hello World

在看官网教程时，入门的例子就是dataTable这个空间。So，遵循官网，一起来看一下入门的DataTable组件；WEB使用时固然是先引入相应的库文件；代码如下<html><head> <title>Quick start with DataTable</title> <script src="....
复制链接

扫一扫