Gird组件 Part-3:范例RSSFeed Viewer

慕熙520

慕熙520

2016-02-19 10:20

今天图老师小编给大家精心推荐个Gird组件 Part-3:范例RSSFeed Viewer教程,一起来看看过程究竟如何进行吧!喜欢还请点个赞哦~

原文地址 文章日期: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

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)
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数据模型

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)
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的数据

展开更多 50%)
分享

猜你喜欢

Gird组件 Part-3:范例RSSFeed Viewer

Web开发
Gird组件 Part-3:范例RSSFeed Viewer

对YUI扩展的Gird组件 Part-1

Web开发
对YUI扩展的Gird组件 Part-1

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

对YUI扩展的Gird组件 Part-2

Web开发
对YUI扩展的Gird组件 Part-2

W3 Jmail 使用范例

ASP
W3 Jmail 使用范例

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

HTML DOM Viewer

Web开发
HTML DOM Viewer

Flash组件之旅(3):使用第三方组件(3)

flash教程
Flash组件之旅(3):使用第三方组件(3)

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

android获取屏幕像素思路及代码

android获取屏幕像素思路及代码

Android应用程序签名步骤及相关知识介绍

Android应用程序签名步骤及相关知识介绍
下拉加载更多内容 ↓