控件中国网现已改版,您看到的是老版本网站的镜像,系统正在为您跳转到新网站首页,请稍候.......
中国最专业的商业控件资讯网产品咨询电话:023-67870900 023-67871946
产品咨询EMAIL:SALES@COMPONENTCN.COM

JS 控件 数据源

作者:未知 出处:cnblog 2013年04月19日 阅读:

 当我们在表格、列表中显示大量数据时,如果还需要对数据进行增删改、排序等处理时,直接操纵控件的DOM是非常繁琐和麻烦的事情,考虑一下场景:

 
1.表格中添加一条记录
2.对表格中的记录的某些字段进行编辑
3.把记录按照Id排序
上面这些操作都是非常常见的操作,但是这其中牵扯到不少琐碎的事情:
 
1.操纵记录对应的DOM,在表格中创建大量的输入框更改数据,通过表单提交数据。
2.把修改结果发送给后台
3.把DOM进行排序等等操作
这样处理的话,成本会非常大,我们仔细分析一下,从MVC的模式出发:
 
 
l  DOM 和样式,是View
 
l  数据源是Model
 
l  控件的控制逻辑是 Controll
 
我们说对View的所有的控制都是通过Controll 来进行的,Model的变化引起Control的变化,Control再来控制View 变化,所以我们使用Control来监听View和Model的变化,进而将耦合分离,所以我参照Ext的实现引入 Store类
 
Store类:
我们先来分析一下Store类需要哪些功能:
 
1.加载数据:异步加载或则直接加载内存中的数据
2.数据遍历、增删改
3.数据排序:远程排序或者当前页面排序
4.可以加载数组或者树形结构数据
将EXT的Store的实现简化一下,就得到下面的类结构图
 
 
 
使用代理类来加载数据,屏蔽异步加载和内存加载的区别
 
1.通过Sortable扩展实现本地排序,需要指定字段:
1)   sortField: 排序字段,例如id字段、日期字段等
 
2)   sortDirection: 排序方式,升序、降序
 
  2. 通过Proxy来加载数据,需要提供一下方法
 
1)  read(): 读数据,从数据源读数据
 
2)  sync(): 同步数据,跟数据源同步数据
 
  3. 通过AbstractStore 来抽象数据源通用的功能和接口,Store和TreeStore来分别实现操作数组的数据源和操作树形结构的数据源;
 
  4. 通过Binable扩展,来定义使用数据源的控件的扩展。需要实现以下方法:
 
1)  onLoad(): 加载数据
 
2)  onAdd(): 添加数据
 
3)  onRemove(): 移除数据
 
4)  onUpdate(): 更新数据
 
5)  onLocalSort(): 内存中排序
 
Store和TreeStore的实现比较复杂,不过使用方式比较简单,通过下面的示例即可理解。
 

热推产品

  • ActiveReport... 强大的.NET报表设计、浏览、打印、转换控件,可以同时用于WindowsForms谀坔攀戀Forms平台下......
  • AnyChart AnyChart使你可以创建出绚丽的交互式的Flash和HTML5的图表和仪表控件。可以用于仪表盘的创......
首页 | 新闻中心 | 产品中心 | 技术文档 | 友情连接 | 关于磐岩 | 技术支持中心 | 联系我们 | 帮助中心 Copyright-2006 ComponentCN.com all rights reserved.重庆磐岩科技有限公司(控件中国网) 版权所有 电话:023 - 67870900 传真:023 - 67870270 产品咨询:sales@componentcn.com 渝ICP备12000264号 法律顾问:元炳律师事务所 重庆市江北区塔坪36号维丰创意绿苑A座28-5 邮编:400020
在线客服
在线客服系统
在线客服
在线客服系统