Gird component for YUI extension Part-1

Original address

Article date: 2006/9/26

The new version of GIRD can support remote data. The settings for pagination and remote sorting are easy to understand. I will explain some of the commonly used custom parameters in this post. The interface of the new forum (in construction) is a good example of pagination and remote sorting, and the code in this article comes from that example.

New methods and properties

Using LoadableDataTatModel object (the parent class of XMLDataModel and JSONDataModel) to implement pagination and remote sorting, there are several new methods and properties.
The following variable "dm" refers to an instance of DataModel.

method

initPaging(url, pageSize, baseParams)The most important way to realistic paging. With this method, you can initialize the page at once. For information about parameters, see the related properties below. Example usage:
```
('', 20);
```
loadPage(pageNum, callback, keepExisting)Load a new page. Your callback will be called after the data is loaded. "keepExisting" determines whether to overwrite the current data, or add new data to the existing data. Example usage:
```
// the grid is ready, load page 1 of topics 
(1);
```
isPaged()Return to whether the pagination is activated;
getTotalRowCount()Returns the total number of records available. XMLDataModel has a new attribute "totalTag" to get the total number of rows. The total number of rows is returned by the server to the node "totalTag" generated in the XML document. This is a good way to let DataModel know how many records there are. If you want to specify a certain total number, you can use getTotalRowCount to override the total number when initializing the Gird. Use the default method:
```
dm = new ({   
  tagName: 'Topic',   
  totalTag: 'TotalCount',   
  id: 'id',   
  fields: ['title', 'author', 'totalPosts', 'lastPost', 'lastPoster'] 
});
```
Another way:
```
dm = new ({   
  tagName: 'Topic',   
	id: 'id',   
	fields: ['title', 'author', 'totalPosts', 'lastPost', 'lastPoster'] 
 }); 
 = function(){ return 500; //Or the quantity you want }		
```
getPageSize()Returns the configured page size
getTotalPages()Use page size and total rows to calculate the number of available pages.

property

pageSize - Number of records per page. It can be set in the initPaging parameter or directly set.
pageUrl - The URL to call, returns data. It can be set in the initPaging parameter or directly set.

// Call "/" to generate all paging and sorting = '/';
//This method is also good('/', 50);

remoteSort - Type: Boolean True value activates remote sorting. If you use the method above initPaging(), this will be automatically set to TRUE, otherwise it will be false by default.
baseParams - Type: Object. Objects composed of "keys and key value name/value" will be included in each paging and sorting request. In the forum I used this to pass the selected forumId into my data script:

// Pass in the selected forumId value to generate all paging and sorting['forumId'] = forumId;

paramMap - Type Object. Model adds pagination and sorting requests, and the default parameters are passed: page, pageSize, sortColumn and sortDir. If you do not want to use these parameter names, you can change the name through the map parameter. For example:

//"page" is renamed to "pageNum"['page'] = 'pageNum';

Combine all functions together

This is a process of creating a Gird, and paging code:

// Restricted selections are just one linesm = new ();
// Listen to the selection changes('selectionchange', onSelection);

// Create our column modelcm = new ([
 {header: "Topic", width: 330}, 
 {header: "Author", width: 100}, 
 {header: "Posts", width: 40}, 
 {header: "Last Post", width: 150}, 
 {header: "Last User", width: 120}
]);
//This property sets the default sorting so as not to be set on each column. = true;

// Create data model data model.  Note the "totalTag" entry.  It tells the model to find all records under the node.dm = new ({
  tagName: 'Topic',
  totalTag: 'TotalCount',
  id: 'id',
  fields: ['title', 'author', 'totalPosts', 'lastPost', 'lastPoster']
});
// Initialize the paging('', 20);
//Set the additional parameters we want to transfer to (can be passed into inirPaing as the third parameter) = {'forumId': 4};
(cm, 3, 'DESC');
// When each new data is loaded, select the first row of GIRD('load', , sm, true);

// Create grid objectgrid = new ('topics-grid', dm, cm, sm);
();

//Pagination toolbar, the following will be analyzedvar toolbar = ().getPageToolbar();
();
({
  className: 'new-topic-button',
  text: "New Topic",
  click: createTopic
});

// When the gird is ready, load the first item of the topic(1);

Paging Toolbar

Since the pagination button is more commonly used, I decided to write a simple toolbar component to implement pagination. This time, the release is very simple and provides some methods to implement the pagination of the toolbar. The button setting is done by CSS. The icon ICON should be a 16X16 standard picture. If not, the picture will be cut. Example of adding buttons:

({
  className: 'my-button',
  tooltip: "New Foo",
  click: createFoo
});

ENABLE/DISABLED icon in CSS:

.my-button{
 background-image: url(../images/);
}
.ytb-button-disabled .my-button{
 background-image: url(../images/);
}

Create an ICON with text (JS is written as above):

({
  className: 'my-button',
  text: "New Foo",
  click: createFoo
});

But CSS writing is a bit complicated:

.ytoolbar .my-button{
 background-image: url('images/');
 background-position: 0px 0px;
 background-repeat: no-repeat;
 padding-left:18px;
 padding-top:1px;
 width:auto;
 display:block;
}

To customize a lot of icon toolbars, it is best to be css sprite. The paging icon of the new version of GIRD may be CSS Sprite.

The next step is to do it. .

In the next post I will talk about drag and drop of grid, and drag and drop between two girds.

Jack