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

好了 这一课就先到这了

【第三课】WEBIX 入门自学-Hello World的更多相关文章

  1. 【第二课】WEBIX 入门自学-获取WEBIX及相关资料

    下载WEBIX组件库 http://webix.com/download/ WEBIX在线文档 http://docs.webix.com/ 离线的手册 下载

  2. 【第一课】WEBIX 入门自学-介绍WEBIX

    Webix是跨浏览器.跨平台的JavaScript框架,使用JavaScript.CSS,HTML5技术构建交互式web应用程序.库中提供几十个完全可定制的组件,提供了JQuery集成和可以处理任何服 ...

  3. Elasticsearch7.X 入门学习第三课笔记----search api学习（URI Search）

    原文:Elasticsearch7.X 入门学习第三课笔记----search api学习(URI Search) 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出 ...

  4. CodeIgniter框架入门教程——第三课 URL及ajax

    本文转载自:http://www.softeng.cn/?p=74 这节课讲一下CI框架的路由规则,以及如何在CI框架下实现ajax功能. 首先,先介绍CI框架的路由规则,因为CI框架是在PHP的基础 ...

  5. 【JavaScript从入门到精通】第三课 初探JavaScript魅力-03

    第三课 初探JavaScript魅力-03 函数传参 上节课的时候我们已经讲了什么是函数,实际上,函数在功能上就类似于css的class一样,将一段代码包裹起来使用.为了让函数的功能更加的丰富和实用, ...

  6. 【JavaScript从入门到精通】第三课

    第三课 初探JavaScript魅力-03 函数传参 上节课的时候我们已经讲了什么是函数,实际上,函数在功能上就类似于css的class一样,将一段代码包裹起来使用.为了让函数的功能更加的丰富和实用, ...

  7. 适合入门自学服装裁剪滴书(更新ing)

    [♣]适合入门自学服装裁剪滴书(更新ing) [♣]适合入门自学服装裁剪滴书(更新ing) 适合入门自学服装裁剪滴书(更新ing) 来自: 裁缝阿普(不为良匠,便为良医.) 2014-04-06 23 ...

  8. 【Linux探索之旅】第二部分第三课：文件和目录，组织不会亏待你

    内容简介 1.第二部分第三课:文件和目录,组织不会亏待你 2.第二部分第四课预告:文件操纵,鼓掌之中 文件和目录,组织不会亏待你 上一次课我们讲了命令行,这将成为伴随我们接下来整个Linux课程的一个 ...

  9. 【Web探索之旅】第二部分第三课：框架和内容管理系统

    内容简介 1.第二部分第三课:框架和内容管理系统 2.第二部分第四课预告:数据库   第二部分第三课:框架和内容管理系统 上一课我们介绍了服务器端的编程语言,有PHP,Java,Python,Ruby ...

随机推荐

  1. Life Is A Funny Proposition After All

    你们有没有坐下思考,感到疑惑 ,静静思考,我们为什么在这里 ,生活为什么如此这般 这个问题让无数聪明人喝酒买醉,这是最最奇怪的事情,他们都想弄清楚,科学家们可以展示上千种不同的理论,但从未证明这是为什 ...

  2. 使用VS2010编译Qt 5.6.1过程记录

    由于Qt官方发布的Qt 5.6.1二进制安装包没有对应VS2010版本的,而我的电脑上只安装了VS2010,因此只能自己编译. 本文记录本人的编译安装过程,以及其中遇到的一些问题. 本文使用VS201 ...

  3. 已安装php 编译安装 gd库拓展模块

    参考资料:http://wenku.baidu.com/link?url=EgXFShYxeJOZSYNQ_7RCBC-6X8OcRRCqVm4qCv49uBk57d6vLBoUpfYdQ-KqJRs ...

  4. Markdown简单语法

    Content 标题大小 斜体和加粗 分割线 有序列表和无序列表 链接 代码框 标题大小 在字体下方加上-和=分别表示一级标题和二级标题,例如: 一级标题 --- 二级标题 === 或者使用#的个数表 ...

  5. powershell使用

    主要语法点: -match -notmatch -replace -join -split -and -or -xor -not ! +.-.*./.% =.+=.-=.*=./=.%= -eq.-n ...

  6. su与su-

    1.Linux中的用户切换:su和su - 的区别 大部分Linux发行版的默认账户是普通用户,而更改系统文件或者执行某些命令,需要root身份才能进行,这就需要从当前用户切换到root用户,Linu ...

  7. 中间件Study-了解什么是中间件

    一.中间件含义:中间价是位于各种平台(硬件和操作系统)和各种应用之间的通用服务. 帮助应用实现高效的.可靠的消息使应用之间实现便捷的互联互通高效.可靠构建企业应用实现分布式应用的快速搭建和部署注:中间 ...

  8. swift中 if let 与 guard let 对比,guard会降低一个分支

    //用if let与guard let实现同一效果,会发现guard降低一个分支 //可以用if var guard var 表示定义的变量能修改值 func test(){ let name:Str ...

  9. JavaScript中的面向对象

    //简单的面向对象 function 构造函数(){ this.属性; } //写在构造函数里面的属性一般为公共属性,或者通过传值进行改变. 构造函数.原型.方法 = function(){}; // ...

  10. SimpleXML操控XML

    复杂字符串如下: $_xml=<<<_xml <?xml version="1.0" encoding="utf-8"?> < ...