HTML5从入门到精通——Sencha Touch篇(9)-职坐标

HTML5从入门到精通——Sencha Touch篇(9)

沉沙 2018-06-20 来源：阅读 1100 评论 0

摘要：我们把数据可视化出来，为的就是进行一些针对数据的操作。本文介绍一下DataView的排序功能和搜索功能。掌握这两个技能，可以让写出的数据界面内的数据能够根据要求进行排序，可以进行数据的搜索显示灯功能。希望阅读本篇文章以后大家有所收获，帮助大家对HTML5的理解更加深入。

我们把数据可视化出来，为的就是进行一些针对数据的操作。这里介绍一下DataView的排序功能和搜索功能。掌握这两个技能，可以让写出的数据界面内的数据能够根据要求进行排序，可以进行数据的搜索显示灯功能。

一、排序

当我们想根据数据的某一个字段排序时，可以调用sort方法：

store.sort(‘lastName’,’asc’);

其中，store是我们定义好的数据仓库，调用sort方法进行排序。sort方法传入两个参数，第一个参数为按照哪个字段排序，第二个参数为升序还是降序。

如果想对多个字段进行排序，可以执行如下代码：

 store.sorters.add(new Ext.util.Sorter({  
 property:’firstName’,  
 direction:’asc’  
 }));  
 store.sort();

通过sorters.add方法可以添加多个排序条件，最后调用sort()方法，执行排序的先后顺序按照添加顺序决定。

我们可以在界面中定义一个选项框，根据用户的选项进行排序，通过为每一个选项设定value值，将value值传入sort方法中，按照要求进行排序。

二、搜索

DataView中有对数据仓库中数据进行过滤的方法，代码如下：

store.filter(‘lastName’,’Tom’);

这句话就表示筛选出这样的数据，它的lastName属性值为Tom。同理，如果我们想实现用户的查找功能，定义一个搜索框，将用户输入的要搜索的值传入filter函数中即可。还可以按照多个过滤条件先后进行过滤（这里要多个筛选时间都成立的数据才会被选出来）。注意，在每一次执行搜索操作前，一定要执行搜索清除操作：

store.clearFilter();

这就保证每次搜索时都没有上一次搜索的干扰。如果不清楚的话，显示的内容是多次搜索结果的交集（很可能就没有结果）。

本文由职坐标整理并发布，了解更多内容，请关注职坐标WEB前端HTML5/CSS3频道！

web前端技术选型文档 html5教程百度云 html5教程ppt

本文由 @沉沙发布于职坐标。未经许可，禁止转载。