Heim >Web-Frontend >js-Tutorial >对YUI扩展的Gird组件 Part-1_YUI.Ext相关
文章日期:2006/9/26
新版的GIRD可以支持远程数据了。分页和远程排序的设置是通俗易懂的,另外一些常用的自定义的参数我会在这篇贴子中说明一下。新论坛的界面(在建设中)就是一个分页和远程排序的好例子,而本文的代码均来自那个例子。
新方法和属性
利用LoadableDatatModel对象(XMLDataModel和JSONDataModel的父类)实现分页和远程排序,有若干种的新方法和属性。
下列变量“dm”指的是DataModel的实例。
方法
dm.initPaging('topics.php', 20);
// the grid is ready, load page 1 of topics dm.loadPage(1);
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; //或者是你要的数量 }
// 调用“/data.php”产生所有分页、排序 dm.pageUrl = '/data.php'; //这种方式也不错 dm.initPaging('/foo.php', 50);
// 传入已选择好forumId的值,产生所有分页、排序 dm.baseParams['forumId'] = forumId;
//"page"改名为"pageNum" myDataModel.paramMap['page'] = 'pageNum';
把所有功能组合在一起
这是一个创建Gird的过程,和分页代码:
// 限制选区只是一行 sm = new YAHOO.ext.grid.SingleSelectionModel(); // 监听选区改变 sm.addListener('selectionchange', onSelection); // 创建我们的column model cm = 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这种方式。
下一步做的是。。
下一篇帖子我将会说说grid的拖放,以及两个gird之间的拖放。
Jack