Heim >Web-Frontend >js-Tutorial >对YUI扩展的Gird组件 Part-1_YUI.Ext相关

对YUI扩展的Gird组件 Part-1_YUI.Ext相关

WBOY
WBOYOriginal
2016-05-16 19:16:571119Durchsuche

原文地址

文章日期: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';

把所有功能组合在一起

这是一个创建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

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn