Gird组件 Part-3:范例RSSFeed Viewer


Posted in Javascript onMarch 10, 2007

原文地址 文章日期:2006/09/04

新组件Gird包含了许多的类和继承方法。如果读者不是太熟悉的面向对象开发的话,可能会对一个变量如何从某个类得到继承的方法感到困惑,用起GIRD来感到困难。在YAHOO.ext.gird包中,大多数类是设计成为“即插即用plug and play”的,可扩展的extended和可自定义的customized,能以最小量的代码插入轻松到web程序中。

要测试和创建一个实现gird的范例,我决定做一个简单的,只有一页的RSS种子采集器RSS Feed Viewer。整个程序写了100行代码而其中有20行是关于gird的。这个范例说明了gird的一些典型功能,如Ajax loading,预处理(preprocessing)和自定义渲染(custom rendering)

这里嵌入了个迷你型程序(用iframe)

我一步一步手把手带你进入GIRD,还会支持哪些是关键的地方,哪些不是。

Step 1 创建柱模型ColumnModel

var myColumns = [
  {header: "Title", width: 350, sortable: true}, 
  {header: "Date", width: 125, sortable: true, renderer: formatDate}
];
var colModel = new YAHOO.ext.grid.DefaultColumnModel(myColumns);

GRID从柱模型中取得某一列的信息。在这个例子我们调用一个默认的柱模型(称DefaultColumnModel),一个包含所有相关的信息的对象。对象的属性如下:

  • header: - 表头
  • width: - 宽度
  • sortable: - true=可排序
  • renderer: - 指定渲染方式。调用函数参数为 (value, rowIndex, columnIndex),并由函数返回(return)值来显示到单元格cell中。
  • sortType: - 指定排序方式。参见文档资料,有5到6种的转换方式。

除header和width其它为可选的

创建DataModel数据模型

var schema = {
   tagName: 'item',
   id: 'use-index',
   fields: ['title', 'pubDate']
};
this.dataModel = new YAHOO.ext.grid.XMLDataModel(schema);
this.dataModel.addPreprocessor(1, parseDate); //列1是日期,先预处理一下
this.dataModel.onLoad.subscribe(this.onLoad, this, true);
this.dataModel.onLoadException.subscribe(this.showError, this, true);
this.dataModel.setDefaultSort(colModel, 1, 'ASC');

DataModel是GIRD的数据来源。所有在 YAHOO.ext.grid包中的DataModels,都有一系统通知UI改变内容的事件。也就是说你可以改变model内的数据,而同时对UI自动映射。

这个范例中我们使用XMLDataModel。XMLDataModel提供一个简易的方式来映射XML文档与gird之间的结构。你所要做的是写个简单的schema,让model知道有哪些column给gird。Schema有下列属性:

  • tagName: - Model会读取这一节点下(tagName)的所有子节点(items的上一层节点名称);
  • id: - The attribute or child element to match to get the id of the row. If an attribute or child element is not found with the supplied "id" name, the index of the record is used. So if you don't have a specific id attribute, just use something like 'use-index' which won't be matched and the index will be used.
  • fields: - An array of attribute names or child node tag names to match for the column values. If you have 4 columns in your ColumnModel, you should have 4 items in your fields array. If a name specified in the array isn't found, an empty string is used.

接着我们加入一个自定义的预处理器函数( 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实例是不可再用的。

如果你已经有XML文档的话,就可以直接加载,不用AJAX。load方法可以多次调用,替换或追加GRID数据。在view.js代码中你可见到当用户sumbit提交feed form时的load()调用。

创建一个GRID和AJAX加载的代码行数不超过20行,而且是直来直去不绕弯的。虽然这还未能足以发挥GIRD全部威力,但希望这小小的例子能帮助你开始入门。不要被这些类难到你。大多数这些类是在内部使用的,或者你要自定义GIRD或扩展GIRD,都无需修过核心。

完整的 feed-viewer.js下载 here. CSS 这里欲查看HTML源,在IFRAME上右键,应该会有“查看源代码”的选项。

Javascript 相关文章推荐
JS window.opener返回父页面的应用
Oct 24 Javascript
使用apply方法处理数组的三个技巧[译]
Sep 20 Javascript
基于javascript的JSON格式页面展示美化方法
Jul 02 Javascript
jQuery的观察者模式详解
Dec 22 Javascript
jQuery实现的鼠标经过时变宽的效果(附demo源码)
Apr 28 Javascript
JavaScript严格模式详解
Jan 16 Javascript
js自制图片放大镜功能
Jan 24 Javascript
JS switch判断 三目运算 while 及 属性操作代码
Sep 03 Javascript
微信小程序自定义对话框弹出和隐藏动画
Jul 19 Javascript
解决vue单页面应用进入页面加载所有 js 的问题
Aug 12 Javascript
Vue this.$router.push(参数)实现页面跳转操作
Sep 09 Javascript
vue实现拖拽交换位置
Apr 07 Vue.js
对YUI扩展的Gird组件 Part-2
Mar 10 #Javascript
对YUI扩展的Gird组件 Part-1
Mar 10 #Javascript
学习YUI.Ext第七日-View&JSONView Part Two-一个画室网站的案例
Mar 10 #Javascript
学习YUI.Ext 第六天--关于树TreePanel(Part 2异步获取节点)
Mar 10 #Javascript
学习YUI.Ext 第七天--关于View&JSONView
Mar 10 #Javascript
学习YUI.Ext 第六天--关于树TreePanel(Part 1)
Mar 10 #Javascript
学习YUI.Ext第五日--做拖放Darg&Drop
Mar 10 #Javascript
You might like
php源代码安装常见错误与解决办法分享
2013/05/28 PHP
php实现学生管理系统
2020/03/21 PHP
PHP并发场景的三种解决方案代码实例
2021/02/27 PHP
JQuery中html()方法使用不当带来的陷阱
2011/04/07 Javascript
解析JavaScript中delete操作符不能删除的对象
2013/12/03 Javascript
JavaScript的21条基本知识点
2014/03/04 Javascript
node.js 开发指南 ? Node.js 连接 MySQL 并进行数据库操作
2014/07/29 Javascript
Windows 系统下安装和部署Egret的开发环境
2014/07/31 Javascript
JQuery页面地址处理插件jqURL详解
2015/05/03 Javascript
JavaScript判断数组是否包含指定元素的方法
2015/07/01 Javascript
详解JavaScript逻辑Not运算符
2015/12/04 Javascript
浅析Bootstrip的select控件绑定数据的问题
2016/05/10 Javascript
Javascript基础回顾之(三) js面向对象
2017/01/31 Javascript
js实现鼠标拖动功能
2017/03/20 Javascript
JS中cookie的使用及缺点讲解
2017/05/13 Javascript
JS仿QQ好友列表展开、收缩功能(第二篇)
2017/07/07 Javascript
bootstrap 路径导航 分页 进度条的实例代码
2018/08/06 Javascript
微信小程序进入广告实现代码实例
2019/09/19 Javascript
js实现QQ邮箱邮件拖拽删除功能
2020/08/27 Javascript
ES6中的类(Class)示例详解
2020/12/09 Javascript
Python通过future处理并发问题
2017/10/17 Python
Python进程间通信Queue实例解析
2018/01/25 Python
Python上下文管理器类和上下文管理器装饰器contextmanager用法实例分析
2019/11/07 Python
使用Python给头像加上圣诞帽或圣诞老人小图标附源码
2019/12/25 Python
Python编程快速上手——强口令检测算法案例分析
2020/02/29 Python
Python HTTP下载文件并显示下载进度条功能的实现
2020/04/02 Python
Python爬虫抓取论坛关键字过程解析
2020/10/19 Python
Python+unittest+requests+excel实现接口自动化测试框架
2020/12/23 Python
美国Curacao百货连锁店网站:iCuracao.com
2019/07/20 全球购物
什么是SQL Server的确定性函数和不确定性函数
2016/08/04 面试题
如何开启linux的ssh服务
2015/02/14 面试题
高三语文教学反思
2014/01/15 职场文书
领导视察欢迎词
2014/01/15 职场文书
旅游市场营销方案
2014/03/09 职场文书
2014年五一劳动节社区活动总结
2014/04/14 职场文书
Nginx的rewrite模块详解
2021/03/31 Servers