egret-docs-master/extension/EUI/dataCollection/arrayCollection
guofei 4fe0162b34 fist commit 2024-06-19 13:32:32 +08:00
..
5604f06ae5c6a.png fist commit 2024-06-19 13:32:32 +08:00
5604f064ed624.png fist commit 2024-06-19 13:32:32 +08:00
README.md fist commit 2024-06-19 13:32:32 +08:00

README.md

ArrayCollection 是 eui 中专用的一个数据封装类。一个典型的数据展示组件的设计思路是,组件和数据相分离,给组件一个数据源,组件就按预定的方式把数据展示出来。在很多不同语言的框架中,都能看到类似的实现方式。

对于 DataGroup 、 List 这种类型的组件,它的数据源其实就是需要一个"数组"。不用 TypeScript 中的数组直接作为这类组件的数据源的原因是:普通的数组没有派发事件的能力,当数组内的数据被修改了(增删改)组件却无法有效的获知也无法及时更新视图上的显示内容。为了解决这个问题eui 框架需要将数组再做一层封装,做一些功能上的增强。这就是引入 ArrayCollection 的目的。

创建 ArrayCollection 的示例如下:

//先创建一个数组
var sourceArr:any[] = [{name:"one",value:1},{name:"two",value:2}];
//用 ArrayCollection 包装
var myCollection:eui.ArrayCollection = new eui.ArrayCollection(sourceArr);

也可以不创建数组直接使用new eui.ArrayCollection(),这样将在内部默认创建一个空数组。

封装的最大意义在于事件,可以在 ArrayCollection 上添加事件侦听,每当数据改变时,就可以获取消息:

//当数据改变的时候ArrayCollection 会派发事件
myCollection.addEventListener(eui.CollectionEvent.COLLECTION_CHANGE,this.collectionChangeHandler,this);
private collectionChangeHandler(evt:eui.CollectionEvent):void {
    console.log("数据已改变:"+evt.kind+","+evt.target.length);
}

然后给 ArrayCollection 添加数据,事件侦听的效果如下:

var itemData:Object = {name:"three",value:3};
myCollection.addItem(itemData);//相当于push
myCollection.addItemAt({name:"zero",value:0},0);//添加的指定的索引位置

编译并运行,效果如图:

如果要获取 ArrayCollection 中的数据,可以这样:

console.log(myCollection.getItemAt(0).name);//根据索引位置获取某一项数据
console.log(myCollection.getItemIndex(itemData));//获取某一项数据所在的索引值
console.log(myCollection.length);//获取数组长度

编译并运行,效果如图:

如果要替换某一项数据,可以:

myCollection.replaceItemAt({name:"zero",value:-1},0);

做删除操作,可以:

myCollection.removeItemAt(0);//删除某一个
myCollection.removeAll();//全部删除

完整代码如下:

class Main extends eui.Group {
    public constructor() {
        super();
    }
    protected createChildren():void {
        //先创建一个数组
        var sourceArr:any[] = [{name:"one",value:1},{name:"two",value:2}];
        //用ArrayCollection包装
        var myCollection:eui.ArrayCollection = new eui.ArrayCollection(sourceArr);

        //当数据改变的时候ArrayCollection会派发事件
        myCollection.addEventListener(eui.CollectionEvent.COLLECTION_CHANGE,this.collectionChangeHandler,this);

        var itemData:Object = {name:"three",value:3};
        myCollection.addItem(itemData);//相当于push
        myCollection.addItemAt({name:"zero",value:0},0);//添加的指定的索引位置

        myCollection.replaceItemAt({name:"zero",value:-1},0);

        //获取
        console.log(myCollection.getItemAt(0).name);//根据索引位置获取某一项数据
        console.log(myCollection.getItemIndex(itemData));//获取某一项数据所在的索引值
        console.log(myCollection.length);//获取数组长度

        myCollection.removeItemAt(0);//删除某一个
        myCollection.removeAll();//全部删除
    }

    private collectionChangeHandler(evt:eui.CollectionEvent):void {
        console.log("数据已改变:"+evt.kind+","+evt.target.length);
    }
}