SoFunction
Updated on 2025-04-13

Gird Component Part-3: Example RSSFeed Viewer

Original addressArticle date: 2006/09/04

The new component Gird contains many classes and inheritance methods. If the reader is not very familiar with object-oriented development, he may be confused about how a variable can be inherited from a class and it is difficult to use GIRD. In packages, most classes are designed to be "plug and play", extended and customizable, and can be easily inserted into web programs with a minimum amount of code.

To test and create an example that implements gird, I decided to do a simple, one-page RSS seed collector RSS Feed Viewer. The entire program wrote 100 lines of code and 20 of them were about gird. This example illustrates some typical functions of gird, such as Ajax loading, preprocessing and custom rendering

A mini program is embedded here (using iframe)

I will take you into GIRD step by step, and will support what are the key points and what are not.

Step 1 Create a column model ColumnModel

var myColumns = [
  {header: "Title", width: 350, sortable: true}, 
  {header: "Date", width: 125, sortable: true, renderer: formatDate}
];
var colModel = new (myColumns);

GRID obtains information about a column from the column model. In this example, we call a default column model (called DefaultColumnModel), an object containing all relevant information. The properties of the object are as follows:

  • header:- Table header
  • width:- Width
  • sortable:- true=Sorted
  • renderer:- Specify rendering method. The call function parameter is (value, rowIndex, columnIndex), and the function returns (return) value to be displayed in the cell cell.
  • sortType:- Specify the sorting method. See documentation, there are 5 to 6 conversion methods.

Except header and width, the others are optional

Create DataModel Data Model

var schema = {
   tagName: 'item',
   id: 'use-index',
   fields: ['title', 'pubDate']
};
 = new (schema);
(1, parseDate); //Column 1 is the date, pre-process it first(, this, true);
(, this, true);
(colModel, 1, 'ASC');

DataModel is the data source for GIRD. All DataModels in the package have an event that the system notifies the UI of changing content. That is to say, you can change the data in the model and automatically map the UI.

In this example, we use XMLDataModel. XMLDataModel provides a simple way to map the structure between an XML document and a gird. All you have to do is write a simple schema and let the model know which columns are given to the gird. Schema has the following properties:

  • tagName:- Model will read all child nodes (name of the previous layer of items) under this node (tagName);
  • id: - The attribute or child element to match to get the id of the row. If an attribute or child element is not found with the supplied "id" name, the index of the record is used. So if you don't have a specific id attribute, just use something like 'use-index' which won't be matched and the index will be used.
  • fields: - An array of attribute names or child node tag names to match for the column values. If you have 4 columns in your ColumnModel, you should have 4 items in your fields array. If a name specified in the array isn't found, an empty string is used.

Next we add a custom preprocessor function (a custom preprocessor). If you just sort the date, it will be fine without using this function (it will also sort by default). The advantage of using is higher efficiency.It should be noted thatThis function must be used before the data becomes part of the model data. All RSS FEED and XML are essentially string strings. If you want to make JAVASCRIPT analyze, you should first type conversion. We add a preprocessor to convert to JAVASCRIPR type and then put it in DataModel.

Let’s talk about DataModel events and default sorting (translator’s note: it seems that there is no sorting), which is easier to understand.

Step 3: Create a Grid

 = new ();
(, this, true); 
 = new ('feed-grid', , colModel, ); ();

First we create a SingleSelectionModel. The reason is that we want to limit only one constituency to be selected at the same time. If you don't want this kind of limitation, just ignore the relevant code. If you don't specify it, gird will automatically create a DefaultSelectionModel.

SelectionModel exposes two events: onRowSelect and onSelectionChange. onRowSelect fires when a row is selected or unselected, and there is also a parameter that allows you to pass in so as to know which row is selected or unselected. onSelectionChange fires when the Gird's selection changes. The most important difference between the two is that when more than one row is selected (within the same time), each row in the selection will trigger its own event, while onSelectionChange will only trigger an event once after the multi-selectronic section is selected. For more details on these two events, see the documentation.

Now create our Gird object. The first parameter passed into the Grid construction function is the rendered container (also called holder: the shelf, carrier, and the bearer of the Grid, which is widely used in MVC). ContainermustSpecify the height and width, if no absolute/relative positioning is set, GIRD will set "relative". The following second and third parameters are the objects of Step 1 and Step2.

Then we start render() render(). Render grid to container on event. Before render() is called, any effects such as interlaced color change, MouseOver color change, etc. must be set well. Although data and selections are event-driven, they cannot be changed once rendered. So this method is called only once. Unfortunately, you cannot render multiple containers that are the same grid, that is, grid instances are not available again.

Step 4 - Load some data

('', {feed: '/ajaxian'});

This method can only be called after creating the XMLDataModel. My suggestion is to call the method after everything is created, so that the data is loaded before the user sees the GIRD UI.

load() comes with three methods. URL (required), parameters (optional), callback (optional). Parameters can also be encoded encoded string (param1=one¶m2=two) or an object (for example). If it is an object, its keys and values ​​will be encoded into URIs before sending.

Then we start render() render(). Render grid to container on event. Before render() is called, any effects such as interlaced color change, MouseOver color change, etc. must be set well. Although data and selections are event-driven, they cannot be changed once rendered. So this method is called only once. Unfortunately, you cannot render multiple containers that are the same grid, that is, grid instances are not available again.

If you already have an XML document, you can load it directly without AJAX. The load method can be called multiple times, replaced or appended to GRID data. In the code, you can see the load() call when the user sumbit submits the feed form.

Create a GRID and AJAX to load the code with no more than 20 lines, and it is straightforward and without any twists. Although this isn't enough to get the full power of GIRD, I hope this small example will help you get started. Don't be troubled by these categories. Most of these classes are used internally, or if you want to customize GIRD or extend GIRD, you don't need to repair the core.

Full Downloadhere. CSS hereTo view the HTML source, right-click on IFRAME, there should be an option to "View Source Code".