Unitlist并未明显地更改列表的观感。Unitlist用于显示非层次化数据集，因此它并不提供层级间的前进或后退功能，而是允许排序数据项，并根据一个设定的值对数据项进行分组，例如根据标题中的首个字母。
下面让我们看一个例子：
webix.ui({ view:"unitlist", template:"#title# (#year#)", data: list_data, select: true, uniteBy:function(obj){ return obj.title.substr(0,1); }, });这看上去与我们的第一个例子非常相似。但是这里我们所使用的view属性值是“unitlist”，表示使用的是Unitlist部件而非基本列表部件。另一个重要的不同是unitBy属性，该属性用于根据指定条件对数据进行分组。在我们的例子中，使用标题中的第一个字母作为分组准则。
展示结果如下图所示：
这些可视的“锚点”有助于用户在滚动列表时快速地找到需要的分类。使用type等可选属性，还可以更改列表的条目和头部的外观。例如下面的代码：
type:{ height:50, headerHeight:30, },将给出如下结果：
type:{ height:50, headerHeight:30, },
在这里可以看到演示。
使用X-List展示水平条目让我们通过做一些简单的事情结束本节内容。在展示数据的方式上，X-List不同于JavaScript的List部件，它实现的是列表条目的水平排列。
要在X-List中展示一个常规的列表，必须要添加两个新的属性：
webix.ui({ view:"list", template:"#title# (#year#)", data: list_data, select: true, /* 允许列表水平滚动。 */ scroll:"x", /* 允许列表的水平布局。 */ layout:"x", });结果展示如下：
选择一个适合的解决方案使用JavaScript列表可以让数据更为结构化，更易于找到所需的信息。UI库提供了使用最小的代价创建列表的方法，更为重要的是，列表可以与其他的有用部件进行组合。我们考虑使用Webix这样的软件库，并学习了四种类型的Webix JavaScript列表的工作方式，还查看了该UI库中的其它特性。
下面的小备忘录有助于你确定如何选择适合的列表类型：
操作大量的数据时，使用具有分页功能的基本列表；
对于每个列表元素都具有自己的子分组的层次数据结构，可以选用Grouplist；
如果要按某个常见值对非层次数据中的元素进行分组展示，可以选择Unitlist；
X-List适用于数据的水平展示。
必须要指出的是，这里介绍的仅是Webix的基本用法。更详细的内容请参考Webix文档。
如果按需配置列表部件并与其它的Webix组件组合，就可以创建各种复杂度的Web和移动应用。通过一些在线应用，可以查看到List、Grid、Tree等部件是如何在一个页面中同时生效的。例如XLReporting：
以及GanttPRO：
Sergey Laptick是一名前端开发人员和Web技术爱好者，对JavaScript和HTML5具有很浓厚的兴趣。他喜欢任何Web相关事物，沉溺于JavaScript编程。当前他全心投入到对新事物的学习当中，并编写学习案例，为初级开发人员提供指导。他也在多个东欧地区会议上分享他的经验。
查看英文原文：