四个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\