Gird组件 Part-3:范例RSSFeed Viewer

2019-06-03 02:16:01于丽

接着我们加入一个自定义的预处理器函数( a custom preprocessor)。如果只是对日期排序,不用这个函数,也是没问题的(默认它自己也会排序)。用的好处是效率更高。要注意的是,必须在 数据成为model数据一部分之前使用这个函数。所有RSS FEED和XML实质都是字串符Strings,如果要让JAVASCRIPT分析,应该先要类型转换,我们加入一个预处理器来转换到JAVASCRIPR类型,然后放到DataModel中。

下面说说DataModel事件和默认排序(译注:好像没有排序),较易理解的内容。

Step 3: 创建Grid

this.selModel = new YAHOO.ext.grid.SingleSelectionModel();
this.selModel.onRowSelect.subscribe(this.showPost, this, true); 
this.grid = new YAHOO.ext.grid.Grid('feed-grid', this.dataModel, colModel, this.selModel); this.grid.render();
 

首先我们创建一个SingleSelectionModel。原因是我们想在同一时间内,限制只有一个选区是被选中的。如果你不想要这种限制,忽略相关代码便可,不指定的情况下gird会自动创建DefaultSelectionModel。

SelectionModel暴露了两个事件:onRowSelect 和 onSelectionChange。onRowSelect当某一行选中或反选时触发,还有一个参数允许你传入,以便得知哪一个行被选中或反选。onSelectionChange当Gird的选区发生改变时触发。两者最主要的区别,当超过一行被选中(同一时间内),选区的每一行会触发各自的事件,而onSelectionChange只会在多选区完成选择后,触发一次事件。更多关于这两个事件的细节,请参阅文档。

现在创建我们的Gird对象。第一个参数传入Grid构建函数的是被渲染的container(又作holder:架子、载体、Grid的承受者,在MVC中大量使用)。Container必须指定高度和宽度,如果没有设置绝对/相对的定位,GIRD会设置"相对"。接下的第二和第三的参数是Step 1、 Step2 的对象。

然后我们开始渲染render()。事件上渲染grid到container。在render()调用之前,任何的效果如隔行换色、MouseOver换色等等的必须设置好。尽管数据和选区是事件驱动的,可是一经渲染便不能改变。所以这方法只调用一次。遗憾的是,你不能渲染多个同是一个grid的containers,即grid实例是不可再用的。

Step 4 - 加载一些数据

this.dataModel.load('feed.php', {feed: 'http://feeds.feedburner.com/ajaxian'});

创建好XMLDataModel之后,这个方法方可调用。我的建议是在所有东西创建好之后调用该方法,这样的话,用户看到GIRD 的UI之前,数据已经加载好。

load()带有三个方法。URL(必选),参数(可选),回调(可选)。参数亦可以经过编码的encoded字串符 (param1=one¶m2=two) ,或是一个object(例子便是)。如果是对象,发送之前会将其键和值编码成URI。

然后我们开始渲染render()。事件上渲染grid到container。在render()调用之前,任何的效果如隔行换色、MouseOver换色等等的必须设置好。尽管数据和选区是事件驱动的,可是一经渲染便不能改变。所以这方法只调用一次。遗憾的是,你不能渲染多个同是一个grid的containers,即grid实例是不可再用的。