【第三课】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代码 框架库自动生成相应组件~~~
好了 这一课就先到这了
【第三课】WEBIX 入门自学-Hello World的更多相关文章
- 【第二课】WEBIX 入门自学-获取WEBIX及相关资料
下载WEBIX组件库 http://webix.com/download/ WEBIX在线文档 http://docs.webix.com/ 离线的手册 下载
- 【第一课】WEBIX 入门自学-介绍WEBIX
Webix是跨浏览器.跨平台的JavaScript框架,使用JavaScript.CSS,HTML5技术构建交互式web应用程序.库中提供几十个完全可定制的组件,提供了JQuery集成和可以处理任何服 ...
- Elasticsearch7.X 入门学习第三课笔记----search api学习(URI Search)
原文:Elasticsearch7.X 入门学习第三课笔记----search api学习(URI Search) 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出 ...
- CodeIgniter框架入门教程——第三课 URL及ajax
本文转载自:http://www.softeng.cn/?p=74 这节课讲一下CI框架的路由规则,以及如何在CI框架下实现ajax功能. 首先,先介绍CI框架的路由规则,因为CI框架是在PHP的基础 ...
- 【JavaScript从入门到精通】第三课 初探JavaScript魅力-03
第三课 初探JavaScript魅力-03 函数传参 上节课的时候我们已经讲了什么是函数,实际上,函数在功能上就类似于css的class一样,将一段代码包裹起来使用.为了让函数的功能更加的丰富和实用, ...
- 【JavaScript从入门到精通】第三课
第三课 初探JavaScript魅力-03 函数传参 上节课的时候我们已经讲了什么是函数,实际上,函数在功能上就类似于css的class一样,将一段代码包裹起来使用.为了让函数的功能更加的丰富和实用, ...
- 适合入门自学服装裁剪滴书(更新ing)
[♣]适合入门自学服装裁剪滴书(更新ing) [♣]适合入门自学服装裁剪滴书(更新ing) 适合入门自学服装裁剪滴书(更新ing) 来自: 裁缝阿普(不为良匠,便为良医.) 2014-04-06 23 ...
- 【Linux探索之旅】第二部分第三课:文件和目录,组织不会亏待你
内容简介 1.第二部分第三课:文件和目录,组织不会亏待你 2.第二部分第四课预告:文件操纵,鼓掌之中 文件和目录,组织不会亏待你 上一次课我们讲了命令行,这将成为伴随我们接下来整个Linux课程的一个 ...
- 【Web探索之旅】第二部分第三课:框架和内容管理系统
内容简介 1.第二部分第三课:框架和内容管理系统 2.第二部分第四课预告:数据库 第二部分第三课:框架和内容管理系统 上一课我们介绍了服务器端的编程语言,有PHP,Java,Python,Ruby ...
随机推荐
- PYTHON 写函数,检查传入字典的每一个value的长度,如果大于2,那么仅保留前两个长度的内容,并将新内容返回给调用者
def a4(arg): ret = {} for key,value in arg.items(): if len(value) > 2: ret[key] = value[0:2] else ...
- BZOJ 4184: shallot
Description 在某时刻加入或删除一个点,问每个时刻的集合中能异或出来的最大值是多少. Sol 线段树+按时间分治+线性基. 按时间分治可以用 \(logn\) 的时间来换取不进行删除的操作. ...
- C#数字日期装换为中文日期
using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace Cons ...
- JDBC的批处理操作三种方式 pstmt.addBatch()
package lavasoft.jdbctest; import lavasoft.common.DBToolkit; import java.sql.Connection; import java ...
- CapsLock与ctrl的键位修改
windows下修改方式: linux下修改方式: 在用户目录下新建文档命名为keychange.sh 编辑以下内容: remove Lock = Caps_Lock remove Control = ...
- Springboot快速入门创建
maven构建项目 1.访问http://start.spring.io/,进入快速创建工程的主页 可参考下图所示: 2.选择构建工具Maven Project.Spring Boot版本1.3.6以 ...
- jQuery最佳实践
1:事件的委托处理(Event Delegation) javascript的事件模型,采用"冒泡"模式,也就是说,子元素的事件会逐级向上"冒泡",成为父元素的 ...
- 魔镜VIP批量条形码视频教程
需要购买者请登我的淘宝店,https://cdrapp.taobao.com/ 优惠价哦!
- vim /vi中对字符串的查找并替换
vi/vim 中可以使用 :s 命令来替换字符串.该命令有很多种不同细节使用方法,可以实现复杂的功能,记录几种在此,方便以后查询. :s/vivian/sky/ 替换当前行第一个 vivian ...
- CString转换为string
string CStringToString(CString strMFC) { CStringA strA; strA = strMFC.GetBuffer(); strMFC.ReleaseBuf ...