对YUI扩展的Gird组件 Part-1

2016-02-19 10:19 5 1 收藏

今天图老师小编给大家精心推荐个对YUI扩展的Gird组件 Part-1教程,一起来看看过程究竟如何进行吧!喜欢还请点个赞哦~

【 tulaoshi.com - Web开发 】

原文地址

文章日期:2006/9/26

新版的GIRD可以支持远程数据了。分页和远程排序的设置是通俗易懂的,另外一些常用的自定义的参数我会在这篇贴子中说明一下。新论坛的界面(在建设中)就是一个分页和远程排序的好例子,而本文的代码均来自那个例子。

新方法和属性

利用LoadableDatatModel对象(XMLDataModel和JSONDataModel的父类)实现分页和远程排序,有若干种的新方法和属性。
下列变量“dm”指的是DataModel的实例。

方法

initPaging(url, pageSize, baseParams) 现实分页的最重要方法。用该方法,你可以一次过地初始化分页。有关参数的资料,请参阅下列相关的属性。例子fourm.js的用法:
dm.initPaging('topics.php', 20);
loadPage(pageNum, callback, keepExisting)加载新的一页。你的回调(callback)将会在数据加载完毕后调用。”keepExisting“决定是否覆盖当前的数据,或者在已有的数据上添加新数据。例子fourm.js的用法:
// the grid is ready, load page 1 of topics dm.loadPage(1);
isPaged()返回分页是否被激活; getTotalRowCount()返回可用的总记录数(the total number of record)XMLDataModel有新的属性“totalTag”,用来获取总行数。总行数由服务器返回生成XML文档中的“totalTag”那个节点取值,这是一个让DataModel知道有多少记录好的方法。如果你想特定某个总数,可以在Gird初始化的时候用getTotalRowCount覆盖(override)总数 forum.js采用默认的方式:
dm = new YAHOO.ext.grid.XMLDataModel({ tagName: 'Topic', totalTag: 'TotalCount', id: 'id', fields: ['title', 'author', 'totalPosts', 'lastPost', 'lastPoster'] });
另外一种办法:
dm = new YAHOO.ext.grid.XMLDataModel({ tagName: 'Topic',   id: 'id',   fields: ['title', 'author', 'totalPosts', 'lastPost', 'lastPoster']  }); dm.getTotalRowCount = function(){ return 500; //或者是你要的数量 }
getPageSize()返回已配置的page size getTotalPages() 用page size和total rows计算出可用页数。 属性 pageSize - 每页的记录数。可在initPaging参数中设置或直接设置。 pageUrl - 调用的URL,返回数据。可在initPaging参数中设置或直接设置。
// 调用“/data.php”产生所有分页、排序dm.pageUrl = '/data.php';//这种方式也不错dm.initPaging('/foo.php', 50);
remoteSort - 类型:Boolean True值激活远程排序。如果你使用initPaging()上面的方法,这个会自动被设置成TRUE,否则默认是false。 baseParams - 类型:Object。 由”键、键值name/value “组成的对象,会被包含到每个分页、排序请求。在论坛中我使用了这个传递选择好的forumId到我的数据脚本中:
// 传入已选择好forumId的值,产生所有分页、排序dm.baseParams['forumId'] = forumId;
paramMap -类型 Object。 model添加分页、排序的请求,默认的通过下列参数 :page, pageSize, sortColumn 和 sortDir。如果你不想使用这些参数名字的话可通过map的参数改名。例如:
//"page"改名为"pageNum"myDataModel.paramMap['page'] = 'pageNum';

把所有功能组合在一起

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

这是一个创建Gird的过程,和分页代码:

// 限制选区只是一行sm = new YAHOO.ext.grid.SingleSelectionModel();// 监听选区改变sm.addListener('selectionchange', onSelection);// 创建我们的column modelcm = new YAHOO.ext.grid.DefaultColumnModel([ {header: "Topic", width: 330},  {header: "Author", width: 100},  {header: "Posts", width: 40},  {header: "Last Post", width: 150},  {header: "Last User", width: 120}]);//这个属性设置默认的排序,免得在每个column上设置。cm.defaultSortable = true;// 创建数据模型data model。注意"totalTag"条目。它告诉model去寻找该节点下全部的纪录。dm = new YAHOO.ext.grid.XMLDataModel({  tagName: 'Topic',  totalTag: 'TotalCount',  id: 'id',  fields: ['title', 'author', 'totalPosts', 'lastPost', 'lastPoster']});// 初始化分页dm.initPaging('topics.php', 20);//设置我们想转入的附加参数(可作为第三个参数传入到inirPaing)dm.baseParams = {'forumId': 4};dm.setDefaultSort(cm, 3, 'DESC');//当每次新数据加载后,选择GIRD的第一行dm.addListener('load', sm.selectFirstRow, sm, true);// 创建grid对象grid = new YAHOO.ext.grid.Grid('topics-grid', dm, cm, sm);grid.render();//分页工具条,下面将会分析var toolbar = grid.getView().getPageToolbar();toolbar.addSeparator();toolbar.addButton({  className: 'new-topic-button',  text: "New Topic",  click: createTopic});// 当gird准备好,加载话题的第一项dm.loadPage(1);

分页工具条 Paging Toolbar

由于分页的按钮较为常用,我决定写一个简易的工具条组件来实现分页。今次发布的YAHOO.ext.Toolbar十分简单,提供了一些方法,用来实现工具条的分页。 按钮的设置靠CSS完成。图标ICON应该是16X16标准图片。如果不是,图片会被切割。 添加按钮的例子:

toolbar.addButton({  className: 'my-button',  tooltip: "New Foo",  click: createFoo});
在CSS中ENABLE/DISABLED图标:
.my-button{ background-image: url(../images/foo.gif);}.ytb-button-disabled .my-button{ background-image: url(../images/foo-disabled.gif);}
创建带文字的ICON(JS写法如上例):
toolbar.addButton({  className: 'my-button',  text: "New Foo",  click: createFoo});
但CSS写法就有点复杂:
.ytoolbar .my-button{ background-image: url('images/foo.gif'); background-position: 0px 0px; background-repeat: no-repeat; padding-left:18px; padding-top:1px; width:auto; display:block;}

要自定义一大堆图标的工具条,最好就是css sprite。新版GIRD的分页图标可能就会采用CSS Sprite这种方式。

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

下一步做的是。。

下一篇帖子我将会说说grid的拖放,以及两个gird之间的拖放。

Jack

来源:http://www.tulaoshi.com/n/20160219/1594219.html

延伸阅读
标签: flash教程
认识组件 大家都知道,“属性”面板是Flash MX的一大特色。每个组件不但可以在“属性”面板设置其属性,而且还有自己的“参数”面板进行参数的设置。如图1所示。按快捷键Ctrl+F3可以打开“属性”面板,然后点选组件,就可以设置组件的参数了。按快捷键Ctrl+F7可以打开“组件”面板,然后用鼠标左键按住面板中的组件即可将组件...
《质量效应2》全视频攻略 part 1 (opening) 《质量效应2》全视频攻略 Part 1 (Opening) 你能Hold住吗?质量效应2兰姐真人原型性感写真 澳大利亚演员伊冯娜·斯特拉霍夫斯基在签订为米兰达配音时,开发团队就决定以这位演员为模型打造这名游戏角色。 游戏造型 所以那些玩过《质量效应2》的玩家,你与之暧昧的兰姐也是真人,还登陆了最...
标签: ASP
  '---- file name /upaoad.asp/ <% Public Function BuildUploadRequest(strRequestBin)     Dim PosBeg, PosEnd, boundary, boundaryPos     'Get the boundary     PosBeg = 1     PosEnd = InstrB(PosBeg,strRequestBin,getByteString(chr(13))...
标签: FLASH flash教程
第1帧完成,我们已经实现了让用户确定是否接受协议的第一步。下面我们来设计第2帧。这第2帧的场景中放置了许多组件,以及两个输入文本。如图4所示。这些元件所完成的任务是让用户填入个人信息以及意见,并检验是否又漏填或是添写不正确。 图 4 4.选中第2帧场景中左边的输入文本,起实例名为“text1”,如图5所示。该输入文本是用来纪...
标签: flash教程
MX中新增了Components UI(UI组件)功能。有了组件的帮助,就可以设计出更复杂、更强大的程序。譬如可以设计一些窗体,用来登记用户的地址、电话、电子邮件地址以及其它个人信息,并在提交到前验证这些数据。或是建立一个多问题、多部分的调查,迅速计算结果并画出调查结果数据图表。或是建立个人像册,存放图像和缩略图。或是创建...

经验教程

753

收藏

90
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部