HTML5开发移动web应用——Sencha Touch篇(10)
2023-09-11 14:20:42 时间
我们把数据可视化出来,为的就是进行一些针对数据的操作。
这里介绍一下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();
这就保证每次搜索时都没有上一次搜索的干扰。
假设不清楚的话。显示的内容是多次搜索结果的交集(非常可能就没有结果)。
相关文章
- 【微信小程序项目实践总结】30分钟从陌生到熟悉 web app 、native app、hybrid app比较 30分钟ES6从陌生到熟悉 【原创】浅谈内存泄露 HTML5 五子棋 - JS/Canvas 游戏 meta 详解,html5 meta 标签日常设置 C#中回滚TransactionScope的使用方法和原理
- uni-app - HTML5+ Runtime 本应用使用HBuilderX x.x.x 或对应的cli版本编译,而手机端SDK版本是x.x.x。不匹配的版本可能造成应用异常。
- (近万字)一篇文章带你了解HTML5和CSS3开发基础与应用-适合前端面试必备
- web渗透测试----27、基于DOM的HTML5存储操作
- 《HTML5移动Web开发实战》—— 导读
- 《HTML5移动应用开发入门经典》—— 1.1 了解HTML5的由来
- 《HTML5移动应用开发入门经典》—— 1.8 问与答
- 《HTML5移动应用开发入门经典》—— 2.3 HTML 4标签和属性的变化
- 《HTML5移动应用开发入门经典》—— 2.4 HTML5中的HTML语法变化
- 《HTML5和JavaScript Web应用开发》——第 1 章 客户端架构 1.1了解HTML5
- 《HTML5和JavaScript Web应用开发》——2.4 浏览器分级
- 《HTML5 Canvas开发详解》——2.11 内容预告
- 《HTML5开发手册》——2.6 初学者“菜谱”:使用s元素显示不准确或不相关的内容
- 《iOS应用开发指南——使用HTML5、CSS3和JavaScript》——1.2 内容和情景就是一切
- 《iOS应用开发指南——使用HTML5、CSS3和JavaScript》——导读
- 《超越平凡的Web设计——HTML5+CSS3专业应用之道 (iWeb会场抢先版)》——第一部分——前端工程师之路第1章 超越平凡的Web设计
- 《超越平凡的Web设计——HTML5+CSS3专业应用之道 (iWeb会场抢先版)》——第7章 直击HTML5
- 《响应式Web设计:HTML5和CSS3实践指南》——2.9节基于位置伪类的交替行样式
- [js高手之路] html5 canvas系列教程 - 开始路径beginPath与关闭路径closePath详解
- HTML5新特性:元素的classList属性与应用
- HTML5 input file控件使用accept过滤限制的文件类型以及在谷歌下打开很慢的问题
- [置顶] Html5视频合集
- 利用HTML5与jQuery技术创建一个简单的自动表单完成
- html5+Css3+JavaScript+jQuery:HTML5篇
- HTML5 学习笔记