四个Webix实例:生成多种类型的JavaScript列表

在这篇文章中,我们将介绍如何创建使用各种类型列表显示数据的Web组件。具体而言,我们采用的是Webix UI库。要理解Webix UI的工作机制,我们将会创建一个简单的小组件,以列表形式显示JSON数据,然后为已有数据添加编辑功能,以此来学习如何为组件添加交互能力。我们还会学习如何从已有的Webix部件(Widget)创建满足特定需求的Web组件。最后,我们会介绍一些由Webix提供的更高级类型列表,例如Grouplist和Unitlist。\

添加Webix UI库

\

Webix是一种基于HTML5组件的JavaScript UI软件库,用于创建移动和桌面Web应用。Webix提供了多种多样的组件,从基本的按钮到电子表格,使用这些组件可以开发出类似于Excel的办公Web应用。\

Webix不只是提供了UI组件集合,它还提供了事件处理机制、对离线模式的支持以及一系列的开发工具。例如,你可以使用Skin Builder创建自定义的皮肤,或是使用“在线源代码广场”中的代码做实验。\

要在你的项目中添加所需的JavaScript和CSS文件,有多种实现途径:\

1 下载Webix库软件包,并在codebase文件夹中找到相应的文件。使用如下方式加入Webix支持:

\u0026lt;link rel=\"stylesheet\" href=\"./codebase/webix.css\"\u0026gt;\\u0026lt;script src="./codebase/webix.js"\u0026gt;\u0026lt;/script\u0026gt;
\

2 使用CDN:

\u0026lt;link rel=\"stylesheet\" href=\"http://cdn.webix.com/edge/webix.css\"\u0026gt;\\u0026lt;script src="http://cdn.webix.com/edge/webix.js"\u0026gt;\u0026lt;/script\u0026gt;
\

3 通过NuGet安装文件:

nuget install Webix
\

如果你更习惯Bower,使用:

bower install webix
\

4 使用Microsoft Visual Studio时,可以在Package Manager Console执行下面的命令:

install-package Webix
\

创建一个简单的JavaScript列表

\

开始构建JavaScript列表之前,我们必须要新建一个HTML页面,并在其中添加必需的JavaScript和CSS文件。在本文的例子中,我们使用CDN添加Webix。如果你已经下载了包括所有文件的Webix软件包,也可以直接使用下载文件所在的目录。现在打开项目所在的目录,新建一个名为index.html的HTML文件。该文件可以使用文本编辑器打开,代码如下:

\u0026lt;!doctype html\u0026gt;\\u0026lt;html\u0026gt;\  \u0026lt;head\u0026gt;\    \u0026lt;script src="http://cdn.webix.com/site/webix.js"\u0026gt;\u0026lt;/script\u0026gt;\    \u0026lt;link rel=\"stylesheet\" type=\"text/css\" href=\"http://cdn.webix.com/edge/webix.css\"\u0026gt;\  \u0026lt;/head\u0026gt;\  \u0026lt;body\u0026gt;\    \u0026lt;script\u0026gt;\\    \u0026lt;/script\u0026gt;\  \u0026lt;/body\u0026gt;\\u0026lt;/html\u0026gt;
\

Webix的相关代码必须要置于\u0026lt;script\u0026gt;\u0026lt;/script\u0026gt;标签对之间。在完成编辑后,可以在Web浏览器中打开index.html文件,检查在JavaScript列表中是否包含了所需的数据,并且按照我们的设计意图展示数据。\

要初始化Webix,需要将所有代码置入webix.ui()这一构建器中。如果想要确认你的应用是否在页面完全加载后得到了执行,使用webix.ready(function() { ... }。下面给出了代码的基本结构:

webix.ready(function(){\    webix.ui({\        /* 在此处插入用户代码 */\    });\});
\

我们开始创建列表。Webix支持使用多种数据格式加载数据,包括JSON、XML、CSV和JSArray等。本例中我们使用了JSON格式的数据创建一个关于电影信息的目录列表。下面是我们所使用的例子数据:

var list_data = [\    { id:1, title:\"The Shawshank Redemption\

你可能感兴趣的:(四个Webix实例:生成多种类型的JavaScript列表)