在这篇文章中，我们将介绍如何创建使用各种类型列表显示数据的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支持：
<link href="https://www.linuxidc.com/Linux/2017-05/codebase/webix.css"> <script src="https://www.linuxidc.com/Linux/2017-05/codebase/webix.js"></script>2 使用CDN：
<link href="https://cdn.webix.com/edge/webix.css"> <script src="https://cdn.webix.com/edge/webix.js"></script>3 通过NuGet安装文件：
nuget install Webix如果你更习惯Bower，使用：
bower install webix4 使用Microsoft Visual Studio时，可以在Package Manager Console执行下面的命令：
install-package Webix 创建一个简单的JavaScript列表开始构建JavaScript列表之前，我们必须要新建一个HTML页面，并在其中添加必需的JavaScript和CSS文件。在本文的例子中，我们使用CDN添加Webix。如果你已经下载了包括所有文件的Webix软件包，也可以直接使用下载文件所在的目录。现在打开项目所在的目录，新建一个名为index.html的HTML文件。该文件可以使用文本编辑器打开，代码如下：
<!doctype html> <html> <head> <script src="https://cdn.webix.com/site/webix.js"></script> <link type="text/css" href="https://cdn.webix.com/edge/webix.css"> </head> <body> <script> </script> </body> </html>Webix的相关代码必须要置于<script></script>标签对之间。在完成编辑后，可以在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", year:1994, votes:678790, rating:9.2, rank:1}, { <...> }, { id:6, title:"12 Angry Men", year:1957, votes:164558, rating:8.9, rank:6} ];要使用Webix创建一个部件，必须要用view属性定义部件类型。如果部件还需要一些数据才能工作，那么还必须要用data属性定义数据源。此外，对于列表而言，可以使用template属性定义数据的渲染方式。
通过下面的例子看一下模板的使用方式。本例中，我们希望显示数据集中的ID、title和year数据项。
webix.ui({ view: "list", data: list_data, template: "#id# #title# #year#" });结果显示如下：
为增加列表的可读性，对模板稍作更改：
template: "#id#. #title# (#year#)"这样看上去就更整洁了：
数据模板还允许配置加载后的数据在组件中的展示方式，其中可以包括来自初始数据集的纯文本、JSON键值和XML标记，甚至是能增添展示样式的HTML标记和CSS选择器。查看数据模板的文档页面，了解更多相关内容。
与JavaScript列表的交互：选取和编辑