JS 控件 数据源

 

简介：

当我们在表格、列表中显示大量数据时，如果还需要对数据进行增删改、排序等处理时，直接操纵控件的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的实现比较复杂，不过使用方式比较简单，通过下面的示例即可理解。

实现：

Grid实现

级联选择框实现