kendo listview 从服务器读取数据时加载菊花图(loading...)解决方案.

本文介绍了在使用Kendo UI的ListView组件从服务器读取数据时,如何实现在加载数据过程中显示菊花图(loading...),并解决加载过程中菊花图未显示的问题。通过分析和调试,发现问题出在ListView设置数据源时隐藏了loader。最终通过利用dataSource的read方法中的deferred对象,确保数据加载完成后才绑定到ListView,成功实现了菊花图的显示。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

这是第一篇blog,, 本人语文作文都不及格的,,,记性也越来越不好,

想通过写blog,,以后项目遇到的问题可以翻起来看看.,,

这里将记录我成长过程遇到的各种问题,



----------------------------正文-----------------------



项目主要框架:requirejs+jq+kendo

功能需求: 在读取数据时加载个菊花图,,加载完成在隐藏菊花图,,这里的菊花图指ajax 读取数据时,,等待过程中显示 显示loading..这个小图片

遇到的问题: 数据在读取的过程中,菊花图没有显示,.


解决过程:

起初认为是页面在未加载完时,js就showloading菊花图了,导致页面显示了,菊花图又被隐藏了.

后通过代码排除,(愚蠢而有点效的方法),即是通过删除部分代码,慢慢排除是那个代码导致菊花图被隐藏了,

其实比较有效率的方法是通过断点调试.

通过代码排除,导致隐藏菊花图是在listview设置数据源的时候,把页面的loader给隐藏了.

问题出在这里, $("#mainlistview").data("kendoMobileListView").setDataSource(context.viewModel.dataLuggages);

为什么知道是他把loader给隐藏掉呢,,我是通过控制台一个小办法,,这个大伙可以学习学习哈.


看到木有,,然后再通过断点再到this.loader.show的位置,,在this.loader.show()下加断点,单步调试就进去了show()的方法下,

4351加个断点,就可以了.

控制台执行$("#mainlistview").data("kendoMobileListView").setDataSource(dataLuggages);

就会进去4351这个断点.所以就可以确定listview在设置数据源时,触发了loader.hide()了.

那么如何解决是好呢,这也让愚蠢的我想了好久..如何在读取数据完时在让listview绑定数据源呢,


1.datasource有个requeststart这个方法,,在这个方法中设置loader.show()无效,

2.ajax读取数据时,设置loader,show()无效.

3...尝试好多..


最后问题能解决还是挺幸运的,

我的kendo版本从2013年升级到2014年,,最后升级到2015年..

13,14年在调试ios的时候.输入框对焦有问题.所以就干脆升级到最新版本.

新版本的read才有用deferred.具体是到那个版本,自己去查看下源码,下面我有介绍,

先贴下解决成功的代码



这里的datasourceLuggages是项目需求,把他又简单封装了一次,,其实就是个datasource.


这里为什么能像到用deferred的这个,done办法呢,还是得力于控制台小技巧,查看了read这个方法,,发现这个方法也是用deferred做处理的

(注意这里有resoleve().promise()等方法)

,


在read读完在处理listview绑定数据源,,ok..菊花图出现了...嗨嗨森



 







评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值