Dojo1.6 official Tutorial: Connecting DataGrid and store

Original Author: Kris zyp
Link: http://dojotoolkit.org/documentation/tutorials/1.6/store_driven_grid/
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 connect a grid to store (the client dataset of Dojo-Translator's note) for fast and efficient data reading and updating.

Difficulty: elementary
Dojo version: 1.6

DataGrid and store

First, we will create a store. In this example, we will create a jsonrest store, which uses JSON rest HTTP to connect the grid to our server. The creation code is as follows:

dojo.require("dojo.store.JsonRest");myStore = new dojo.store.JsonRest({target:"MyData/"});

The code above indicates that the store will send a request to the given URL ("mydata/") to get or modify the data.

Note: Other Types of store can also be used, for example, Dojo/store/memory (the original document is incorrect and there is no dojo/data/memory. -- Translator's note), can also drive the DataGrid. However, this tutorial only uses jsonrest store.

Now we can create a DataGrid. In version 1.6, the DataGrid is still based on the dojo. data API, so we will use the interface adapter dojo. Data. ObjectStore to connect the DataGrid to the store we just created. The DataGrid adopts the construction of standard dojo widgets, therefore, we can use our store as the parameter to instantiate a DataGrid (and make sure that the correct CSS file has been imported (for example, if you use the Claro topic, you can import dojox/GRID/resources/clarogrid.css. -- Translator's note ))

dojo.require("dojox.grid.DataGrid");dojo.require("dojo.data.ObjectStore");dojo.ready(function(){    grid = new dojox.grid.DataGrid({        store: dataStore = dojo.data.ObjectStore({objectStore: myStore}),        structure: [            {name:"State Name", field:"name", width: "200px"},            {name:"Abbreviation", field:"abbreviation", width: "200px"}        ]    }, "target-node-id"); // make sure you have a target HTML element with this id    grid.startup();});

Now we have created a grid. After it is started, the grid is called. after startup ()-the Translator's note), the query () method of the store will be called to trigger a request to obtain data. The server needs to return a JSON array containing data as the response, so that the grid will render the data. The response in the JSON array format looks like this:

[    {"id":0,"name":"Alabama","abbreviation":"AL","capital":"Montgomery"},    {"id":1,"name":"Alaska","abbreviation":"AK","capital":"Juneau"}]

[Example]

Now we have a grid that can work normally. It can get data from our server. Next, let's take a look at how to enhance our component.

Paging

Implementing real-time paging by responding to scroll mouse wheel events is one of the powerful functions of the dojo DataGrid. It provides a seamless and intuitive user experience for browsing big datasets-you can simply scroll the scroll wheel to see more data without clicking any page control. This real-time paging is implemented by constantly sending a special request to store, which limits the number of data rows returned each time. Grid will pass a request object to the query () method of store as its second parameter. This object has two attributes: Start and count. Jsonrest store sends the two parameters to the server through the HTTP header attribute range. This is a feature that is very important for scalability, because it enables us to delay loading rows out of the visible range, rather than loading all data at once. The first request sent to the server is as follows (you can easily view these requests in the browser debugging tool ):

GET /MyData/ HTTP/1.1Range: items=0-19...

The HTTP server can determine the number of rows of data to be sent to the client through the range header (for example, this range header can be converted to the limit or offset parameter of the MySQL server ). For large-scale datasets, When you scroll down the grid, subsequent requests are triggered. These subsequent requests also have the range parameter, but the offset (starting line number) is different. Instead of sending requests directly to the server, the grid calls the store functions (these are automatically completed ):

myStore.query("", {start: 0, count: 20}).then(...grid's callback...);

Sort

The DataGrid also supports triggering data sorting requests when you click the column header. For the sake of performance, grid handed over the actual sorting work to the store, because the sorting efficiency in the database is the highest. When you click a column, grid sends a new request with the sort parameter to store. This parameter is passed in through the second parameter (a parameter object) of the query () method. For jsonrest store, this tells the server that the returned data needs to be sorted by a certain attribute (in this example, it is the "name" attribute ):

GET /MyData/?sort(+name) HTTP/1.1Range: items=0-19...

The grid sends a sorting request to the store through the following logic:

myStore.query("", {start: 0, count: 20, sort:[{attribute:"name"}]}).        then(...grid's callback...);

GRID has a very important feature in interacting with the store, that is, the data request method makes the data view of the store independent. This means that if we directly request data from the store outside the grid, there is no impact on the display of the grid. In other words, the request to store by grid is limited to itself and independent from other requests. You cannot sort the store directly. You can only obtain a sorted data view, which is the content displayed by the grid when you click the column header.

Filter

In addition to the sorting view, we can also create a filtering view. This can be done through the setquery () method. The DataGrid will pass these parameters to the store (like sorting and paging, it is best to filter data at the database level, which is the most efficient ). For example, to filter out all rows abbreviated as "NY", write as follows:

grid.setQuery({abbreviation: "NY"});

This will trigger the following request:

GET /MyData/?abbreviation=NY HTTP/1.1Range: items=0-19...

This request will also be converted into a suitable database query.

In the grid, the request sent to the setquery method is the first parameter of the store. Query () method. If jsonrest store is used, the request is eventually converted to a string and sent to the server in the form of http get after the URL.

Edit Grid

The DataGrid allows you to directly edit cells after double-clicking (or clicking), providing a good user experience. The DataGrid writes the changes back to the store through a unified data interface. Once a cell is edited, the changed data is written back using the setvalue method of the dojo data adapter. It is temporarily stored in the adapter until the SAVE () method is called:

dataStore.save();

After the SAVE () method is called, all unsaved changes are saved to the store using the put () method.

Note: The DataGrid often needs to get objects by ID. To avoid sending redundant requests to the server, you can add a cache for the store to quickly access the cached objects locally:

dojo.require("dojo.store.JsonRest");dojo.require("dojo.store.Memory");dojo.require("dojo.store.Cache");myStore = dojo.store.Cache(    dojo.store.JsonRest({target:"MyData/"}),     dojo.store.Memory());

Conclusion

DataGrid is a powerful and rich table control that provides scalable Table Data Rendering, including sorting, filtering, column movement, selection, editing, and keyboard navigation. The close connection between the DataGrid and store makes it easy to configure data processing in the grid.