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

下面我们将在列表中添加交互功能。我们将从最基本的特性着手,即选取功能。要实现选取列表特定条目的功能,可以使用select属性。

webix.ui({ view: "list", data: list_data, template: "#id#. #title# (#year#)", select: true //or select: 1 });

就这么简单!

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

要启用选取多个条目的功能,使用如下的代码:

/* "Ctrl"+click multiselection */ select:"multiselect", /* "Touch" multiselection */ multiselect:"touch"

要为用户提供编辑列表数据的功能,我们将用到Webix的另一个特性。通过调用protoUI()方法,可以将多个对象的内容合并到一个单一的对象中,并新建一个视图。换句话说,我们可以基于已有的部件去新建一个具有所需特性的部件。

下面创建一个名为editlist的新部件:

webix.protoUI({ name:"editlist" }, webix.EditAbility, webix.ui.list);

这里我们将Webix的List视图以及实现通用编辑交互的EditAbility混合类(mixin)汇集在一起。这样就可以在项目中使用这个新建的视图:

webix.ui({ view: "editlist", data: list_data, template: "#id#. #title# (#year#). Rating: #rating#", select: 1, /* 编辑对象的属性 */ editable: true, editor: "text", editValue: "title", editaction:"dblclick" });

下面解释一下代码所做的事情。我们启用了编辑特性,并设置了适合的编辑器类型。然后指定了我们需要的编辑标题功能。代码行editaction:"dblclick"表示需要双击打开编辑器。

避免过长的列表:使用分页

如果你有一个特别长的列表,通过上下拉动列表查找所需的条目是非常烦人的。一个可取的解决方案是将列表内容分割为多个页面显示。在继续介绍其它类型的列表之前,我们最后介绍一下分页。此外,分页会帮助我们理解Webix学习中的另一个重要知识点:创建Webix提供的布局。

我们的应用由两个视图组成,一个分页器和一个列表。要在页面上并排使用一个以上的组件,就必须创建一个布局。分页器就是一个独立的部件。使用Webix,我们可以将页面作为行和列的组合进行展示。对于我们的例子而言,需要将页面分成两行。下面代码给出了我们需要做的工作:

webix.ui({ rows:[ { /* 第一个部件的代码。 */ }, { /* 第二个部件的代码。 */ }] })

通过组合内嵌的行和列,可以创建任一复杂的布局。返回到我们的列表例子,第一个要添加的部件就是分页器。我们需要使用下面的属性初始化分页器:

view属性:定义部件的类型。

id属性:用于将分页器链接到适合的列表。

animate属性:允许动画。

group属性:定义页面数量。

size属性:定义每页中显示的记录数量。

列表部件的代码与上面例子基本一样。我们需要实现的代码是:

webix.ui({ rows:[ { view: "pager", id:"myPager", animate: { direction:”top” }, group: 10, size: 15 }, { view:”list”, /* 插入列表的代码。 */ pager: "myPager" //链接到分页器。 } ] });

下图展示了生成的列表,该列表支持漂亮的动画:

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

要控制大型数据列表的展示空间,分页并非是唯一的方法。下面让我们看一些Webix能提供的其它类型列表。

其它类型的JavaScript列表

除了上面介绍的普通列表之外,Webix提供了一些具有更多扩展功能的列表。这些列表对于实现特定数据排列任务非常有用:。

让我们从Grouplist开始介绍。

使用更强大的Grouplist升级基本JavaScript列表

如果要在一个列表中使用大量的数据,一种十分有用的方式是按一定的规则将列表条目分组展示。例如,将城市按照国家进行分组,用户在注册页面上选取城市时就会方便很多。

我们现在对前面的例子做一个升级。这次我们将会使用Grouplist,而非基本的列表部件。我们将按上市年份对电影进行分组。下面给出了我们用到的三个属性:

templateItem属性:定义了数据记录中要正常展示的数据。

templateGroup属性:定义了在折叠状态时,分组的头部所展示的数据。

templateBack属性:定义了在展开状态是,分组的头部所展示的数据。

除了上述属性,我们还要使用scheme属性,定义用于数据处理的模式。让我们看一下代码:

webix.ui({ view:"grouplist", data:list_data, templateBack: "Year #value#", templateGroup:" Year #value#", templateItem:"#rank#. #title#", scheme:{ $group:function(obj){ /* 列表数据按“year”属性分组。 */ return obj.year; }, /* 在各层级中,按“year”或“rank”对展示列表项排序。 */ $sort:{ by:"value", dir:"desc" } }, });

这样就得到了一个日期列表,具有如下的展示效果:

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

点击列表的任一项,就会列出相应年份的电影。列表的最上面一行提供了返回上一页面的功能,该行的展示效果取决于templateBack属性:

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

你可以看一下演示。放手去试验一下代码。

用于非层次化数据集的Unitlist

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/4ca89da8dc46a9684825fe95a8306e60.html