Official dojo 1.6 Tutorial: DataGrid Guide

Original Author: Bryan Forbes
Link: http://dojotoolkit.org/documentation/tutorials/1.6/datagrid/

Zhuxw (zhuxw1984@gmail.com)

Because the DataGrid effectively presents table data, it has already become one of the core components of many applications. In this tutorial, we will focus on how to define the layout structure of the grid and discuss the scrolling mechanism used by the DataGrid.

Difficulty: Moderate

Applicable to the dojo version: 1.6 (in fact, most of the content has been supported since 1.2-Translator's note)

Dojox. Grid. DataGrid

It is estimated that we have all had this experience: Your boss suddenly found you and asked to display a lot of data in your developing application. As a web developer, the more data is displayed, the larger the memory occupied by the browser-but your boss doesn't understand this. He just wants to put the data into that application. Now it's time for Dojo's dojox. Grid. DataGrid to show its talents. The DataGrid can carry thousands of rows of data and freely scroll the screen. It only occupies a small amount of memory. In this tutorial, we will learn the basic knowledge of the DataGrid.

To provide a visual impression of the DataGrid's ability to process massive data, we created a grid that displays statistics of professional baseball players in the United States:

[Example]

As you can see, the DataGrid can easily carry the data list containing 17452 records. In this tutorial, we will use a small dataset as an example: show only the hitting statistics of Hall of Fame players. Okay, let's get started!

Components of the DataGrid

As you may have guessed, the DataGrid consists of several different parts. At the top layer, a DataGrid consists of views. The view splits the DataGrid into several areas and renders the header and content for each area separately ). The header and content are composed of rows, and the rows are composed of sub-rows. The child row is composed of cells. Let's take a look at some figures to have an intuitive understanding:

In the subsequent tutorial, we will continue to repair the layout structure of this example. To define a DataGrid, we need to pass some objects and arrays to the structure attribute in the constructor. We will start from the smallest definable unit-cell-to the largest component-view. We do not discuss how to obtain data from the server at the moment, but this part will be covered in the next tutorial.

Cell

The first thing we need to do is to tell the DataGrid which cells (or columns) need to be displayed for each data record "). To do this, we will pass an array of "cell definition" to the structure attribute. Each cell definition object can contain the following attributes:

• Name: String displayed in the header
• Field: field name in the data record (used to obtain data -- Translator's note)
• Width: Specifies the CSS width string of the column width (the unit is required, and the default value is em without the Unit)
• Hidden: A boolean value. If it is true, the column will be hidden.

grid = new dojox.grid.DataGrid({    store: store,    query: { id: "*" },    structure: [        { name: "First Name", field: "first", width: "84px" },        { name: "Last Name", field: "last", width: "84px" },        { name: "Bats", field: "bats", width: "70px" },        { name: "Throws", field: "throws", width: "70px" },        { name: "G", field: "totalG", width: "60px" },        { name: "AB", field: "totalAB", width: "60px" },        { name: "Games as Batter", field: "totalGAB", width: "120px" },        { name: "R", field: "totalR", width: "60px" },        { name: "RBI", field: "totalRBI", width: "60px" },        { name: "BB", field: "totalBB", width: "60px" },        { name: "K", field: "totalK", width: "60px" },        { name: "H", field: "totalH", width: "60px" },        { name: "2B", field: "total2B", width: "60px" },        { name: "3B", field: "total3B", width: "60px" },        { name: "HR", field: "totalHR", width: "60px" }    ]}, "grid");

[Example]

The DataGrid also provides methods to control the visual effect of cells through CSS styles and CSS classes. The headerstyles attributes, cellstyles attributes, and styles attributes in the cell definition are CSS style strings (note that they must end with a semicolon), which are applied to the header cells, content cells, and all cells respectively. In addition, the headerclasses attribute, cellclasses attribute, and classes attribute are CSS class names separated by spaces for their respective cells.

<style>.firstName {    font-style: italic;}.lastName {    font-weight: bold;}</style><script>grid = new dojox.grid.DataGrid({    store: store,    query: { id: "*" },    structure: [        { name: "First Name", field: "first", width: "84px",            classes: "firstName" },        { name: "Last Name", field: "last", width: "84px",            cellClasses: "lastName" },        { name: "Bats", field: "bats", width: "70px",            cellStyles: "text-align: right;" },        { name: "Throws", field: "throws", width: "70px" },        { name: "G", field: "totalG", width: "60px" },        { name: "AB", field: "totalAB", width: "60px" },        { name: "Games as Batter", field: "totalGAB", width: "120px",            styles: "text-align: center;" },        { name: "R", field: "totalR", width: "60px" },        { name: "RBI", field: "totalRBI", width: "60px" },        { name: "BB", field: "totalBB", width: "60px" },        { name: "K", field: "totalK", width: "60px" },        { name: "H", field: "totalH", width: "60px" },        { name: "2B", field: "total2B", width: "60px" },        { name: "3B", field: "total3B", width: "60px" },        { name: "HR", field: "totalHR", width: "60px" }    ]}, "grid");</script>

[Example]

Child row

Now we have defined all the data fields to be displayed, but it does not look very comfortable. Sub-rows make some data easier to read and understand. To define a child row, you need to upload an array of cells defined for the DataGrid. The child row allows us

Two new attributes are used in the cell definition: rowspan defines the number of child rows occupied by a cell, while colspan defines the number of columns occupied by a cell.

Note: colspan cannot be defined in the cell of the first child row, because the DataGrid uses the table-layout: fixed; style to accelerate row rendering.

grid = new dojox.grid.DataGrid({    store: store,    query: { id: "*" },    structure: [        [            { name: "First Name", field: "first", width: "84px", rowSpan: 2 },            { name: "Last Name", field: "last", width: "84px", rowSpan: 2 },            { name: "Bats", field: "bats", width: "70px", rowSpan: 2 },            { name: "Throws", field: "throws", width: "70px", rowSpan: 2 },            { name: "G", field: "totalG", width: "60px" },            { name: "AB", field: "totalAB", width: "60px" },            { name: "R", field: "totalR", width: "60px" },            { name: "RBI", field: "totalRBI", width: "60px" },            { name: "BB", field: "totalBB", width: "60px" },            { name: "K", field: "totalK", width: "60px" }        ],[            { name: "Games as Batter", field: "totalGAB", colSpan: 2 },            { name: "H", field: "totalH" },            { name: "2B", field: "total2B" },            { name: "3B", field: "total3B" },            { name: "HR", field: "totalHR" }        ]    ]}, "grid");

[Example]

View

We have made the data easier to read. However, once you scroll the grid to the rightmost end, you will not be able to see who the player is for each record. By writing a view definition, we can lock a group of columns to avoid them being rolled left and right, so that they are always visible. A view definition is an object with the following specific attributes:

• Cells: An array defined by a cell, or an array of this array
• Noscroll: A boolean value. If it is set to true, the view does not display the scroll bar (either horizontally or vertically)
• Width: Specifies the CSS width string of the view width. This width is valid only when the cell width adopts a relative value (such as a percentage ).

grid = new dojox.grid.DataGrid({    store: store,    query: { id: "*" },    structure: [        {            noscroll: true,            cells: [                { name: "First Name", field: "first", width: "84px" },                { name: "Last Name", field: "last", width: "84px" }            ]        },{            cells: [                [                    { name: "Bats", field: "bats", width: "70px", rowSpan: 2 },                    { name: "Throws", field: "throws", width: "70px", rowSpan: 2 },                    { name: "G", field: "totalG", width: "60px" },                    { name: "AB", field: "totalAB", width: "60px" },                    { name: "R", field: "totalR", width: "60px" },                    { name: "RBI", field: "totalRBI", width: "60px" },                    { name: "BB", field: "totalBB", width: "60px" },                    { name: "K", field: "totalK", width: "60px" }                ],[                    { name: "Games as Batter", field: "totalGAB", colSpan: 2 },                    { name: "H", field: "totalH" },                    { name: "2B", field: "total2B" },                    { name: "3B", field: "total3B" },                    { name: "HR", field: "totalHR" }                ]            ]        }    ]}, "grid");

[Example]

View definitions also provide a useful attribute to reduce the redundant code: defaultcell. This attribute allows you to define default cell attributes. If the cell definition does not contain attributes of the same name, the DataGrid automatically uses these attributes:

grid = new dojox.grid.DataGrid({    store: store,    query: { id: "*" },    structure: [        {            noscroll: true,            defaultCell: { width: "84px" },            cells: [                { name: "First Name", field: "first" },                { name: "Last Name", field: "last" }            ]        },{            defaultCell: { width: "60px" },            cells: [                [                    { name: "Bats", field: "bats", width: "70px", rowSpan: 2 },                    { name: "Throws", field: "throws", width: "70px", rowSpan: 2 },                    { name: "G", field: "totalG" },                    { name: "AB", field: "totalAB" },                    { name: "R", field: "totalR" },                    { name: "RBI", field: "totalRBI" },                    { name: "BB", field: "totalBB" },                    { name: "K", field: "totalK" }                ],[                    { name: "Games as Batter", field: "totalGAB", colSpan: 2 },                    { name: "H", field: "totalH" },                    { name: "2B", field: "total2B" },                    { name: "3B", field: "total3B" },                    { name: "HR", field: "totalHR" }                ]            ]        }    ]}, "grid");

[Example]
It can be seen that by setting the width attribute in defaultcell, we only need to set the width attribute for the column different from this default value.

NOTE: If neither the cell definition nor the default settings are specified, the default column width is 6em.

Paging and virtual scrolling

For historical reasons, when a large amount of data needs to be displayed, developers will adopt a technology called "Paging": there is only one small part at any time (about 25-50 records) the data is displayed. You can use buttons or other controls to switch between pages.

But with the scroll wheel (some people may say the mouse), the paging control is a little bulky.

The DataGrid uses a slightly different technology, called virtual scrolling: When browsing by page, you only need to scroll the scroll wheel. This technology is called "virtual scrolling" because although it looks like a long string of records, only a small part of data is rendered at any time. However, the DataGrid still uses the paging technology. When a user scrolls, the data is requested one page by one from the server (or the store data source of dojo. By default, the three pages of data recently rendered are retained to prevent the user from rolling back to the original place. The number of data rows per page can be controlled by the rowsperpage attribute of the DataGrid, while the number of rows for rendering results to be temporarily retained is controlled by the keeprows attribute.

Note: to calculate the number of data records that the DataGrid will retain, you only need to calculate keeprows by rowsperpage.

Conclusion

Dojox. Grid. DataGrid is a powerful component that can render large datasets and display complex structures composed of child rows. It also allows you to view the long list by scroll wheel without clicking any controls. In the next tutorial, we will study how dojox. Grid. DataGrid is integrated with the data store of the dojo data source.

Reference

DataGrid official documentation