About data loading (transfer) of easyui DataGrid)

This article only talks about the data loading of jquery easyui DataGrid, because this is also the most talked about. In fact, easyui DataGrid has only two ways to load data: one is Ajax loading the JSON data returned by the target URL; the other is loading JS objects, that is, using the loaddate method.

Here, we will give a brief summary and induction of the two methods, and describe in detail the mistakes that may occur during use, hoping to help you.

URL-based data loading call Method

Most people may choose this method at present, because it works well with popular frameworks. If you use a URL, you can write the URL in the Dom or declare the URL attribute of the DataGrid object, either of the following methods is acceptable:

1. <Table id = "TT" style = "width: 700px; Height: Auto" Title = "DataGrid" idfield = "Itemid" url = "datagrid_data2.json">

1. $ ('# Test'). DataGrid ({
2. URL: 'datagrid _ data2.json'
3. });

Related Methods

Load	Param	LoadPage 1Data, Param will replace the default query parameter. Note that this method is only applicable to the URL method.
Reload	Param	Refresh the current page data. When the load method is different, the reload method refresh the current page data, and the load method will jump to the first page and then refresh.
Options	Null	Obtain the parameter values of the DataGrid instance. Common parameters include URL, pagenumber, and pagesize, which play an important role in the request data and paging functions.

Secondary Loading Problems

For beginners who use URL, they often encounter repeated requests. The root cause of this problem isMultiple rendering componentsAnd how to avoid the problem of secondary loading? I personally think that the following two points can basically prevent secondary loading.

• Use the load and reload functions to dynamically load data, instead of re-rendering the component.Many people re-render the component only to set the URL. This is not worth the candle. You can use the Options method to get the OPTs of the component instance, and then assign a value to opts. URL;
• Do not use the class method to register components and JavaScript at the same time.. The class registration method is generally used to initialize attributes. If the JavaScript method is used, both attributes and events can be initialized. However, whether it is the class method or the javascipt method, the component is registered every time, as longURL Attribute SetThe request will be made. So when JavaScript registration is inevitable, simply do not use class registration.

Because there are a lot of materials on the URL-based Internet, I will briefly describe so much here. Next we will focus on loading data using loaddate.

Loading local data

First, you must understand the concept of "loading local data". This refers to loading JavaScript Object Data, while JavaScript data objects can be obtained through other asynchronous methods, therefore, the description of "loading local data" is not accurate.

Call Method

Set the URL attribute to null or not, and then use the loaddate method of the DataGrid to load the JS data object. This object contains two attributes, one of which is the total number of records, an array of objects on the current page number. For example:

1. VaR OBJ = {'Total': 100, 'rows ': [{ID: '1', name: '1'}, {ID: '2', Name: '2'}]};
2. $ ('# Tt'). DataGrid ('loaddata', OBJ );

How to Paging

If you do not make any changes to the source code, you can first obtain the pagination object of the DataGrid, and then implement pagination by writing the onselectpage event of the pagination object:

1. // Initialize dategrid
2. $ ('# Tt'). DataGrid ({
3. URL: NULL,
4. Pagination: True,
5. Pagesize: 20,
6. Pagenumber: 1,
7. Rownumbers: True
8. });
9. $ ('# Tt'). DataGrid ('getpager'). pagination ({
10. Displaymsg: 'currently, [{from}] to [{to}] [{total}] records are displayed ',
11. Onselectpage: function (ppageindex, ppagesize ){
12. // Change the value of the OPTs. pagenumber and opts. pagesize parameters to query the data of the specified page number at the data layer next time.
13. VaR gridopts = $ ('# tt'). DataGrid ('options ');
14. Gridopts. pagenumber = ppageindex;
15. Gridopts. pagesize = ppagesize;
16. // Define query Conditions
17. VaR querycondition = {name: ""};
18. // Asynchronously retrieves data to a JavaScript Object. The input parameter is the query condition and page number information.
19. VaR odata = getajaxdate ("ordermanagebuz", "qryworkorderpaged", querycondition, gridopts );
20. // Use the loaddate method to load the data returned by the DaO Layer
21. $ ('# Tt'). DataGrid ('loaddata', {"Total": odata. Page. recordcount, "rows": odata. Data });
22. }
23. });

The code above should be easy to understand, and the page made is basically normal. The only drawback is that it is not easy to write. So how can we achieve paging conveniently?

Previously, I wrote an article about jquery easyui DataGrid non-URL background paging. I made a slight extension to easyui DataGrid and added a dopagination event, which makes coding easier.

1. // Initialize dategrid
2. $ ('# Tt'). DataGrid ({
3. URL: NULL,
4. Pagination: True,
5. Pagesize: 20,
6. Pagenumber: 1,
7. Rownumbers: True,
8. Dopagination: function (ppageindex, ppagesize ){
9. VaR gridopts = $ ('# tt'). DataGrid ('options ');
10. // Define query Conditions
11. VaR querycondition = {name: ""};
12. // Asynchronously retrieves data to a JavaScript Object. The input parameter is the query condition and page number information.
13. VaR odata = getajaxdate ("ordermanagebuz", "qryworkorderpaged", querycondition, {pagenumber: gridopts. pagenumber, pagesize: gridopts. pagesize });
14. // Use the loaddate method to load the data returned by the DaO Layer
15. $ ('# Tt'). DataGrid ('loaddata', {"Total": odata. Page. recordcount, "rows": odata. Data });
16. },
17. });

In this way, you don't need to get the pagination object any more, and you don't need to set the pagenumber and pagesize attributes of opts. The encoding is simplified, isn't it much refreshed?

Loading Effect

Easyui DataGrid displays "loading..." only when data is obtained through URL ......" If you use the loaddate method to load data, you can actually use this effect, but it is a little more troublesome:

1. // Initialize dategrid
2. $ ('# Tt'). DataGrid ({
3. URL: NULL,
4. Pagination: True,
5. Pagesize: 20,
6. Pagenumber: 1,
7. Rownumbers: True,
8. Dopagination: function (ppageindex, ppagesize ){
9. // Change the value of the OPTs. pagenumber and opts. pagesize parameters to query the data of the specified page number at the data layer next time.
10. VaR gridopts = $ ('# tt'). DataGrid ('options ');
11. Gridopts. pagenumber = ppageindex;
12. Gridopts. pagesize = ppagesize;
13. Exec_wait ('TT', 'loaddategrid ()');
14. },
15. });
16. Function loaddategrid (){
17. VaR gridopts = $ ('# tt'). DataGrid ('options ');
18. // Define query Conditions
19. VaR querycondition = {name: ""};
20. // Asynchronously retrieves data to a JavaScript Object. The input parameter is the query condition and page number information.
21. VaR odata = getajaxdate ("ordermanagebuz", "qryworkorderpaged", querycondition, gridopts );
22. // Use the loaddate method to load the data returned by the DaO Layer
23. $ ('# Tt'). DataGrid ('loaddata', {"Total": odata. Page. recordcount, "rows": odata. Data });
24. }
26. /**
27. * Encapsulate a public Method
28. * @ Param {object} the ID of the grid table
29. * @ Param {object} func method for obtaining asynchronous data
30. * @ Param {object} time delayed execution time
31. */
32. Function exec_wait (grid, func, time ){
33. VaR dalaytime = 500;
34. _ FUNC _ = func;
35. _ Selector _ = '#' + grid;
36. $ (_ Selector _). DataGrid ("loading ");
37. If (time ){
38. Dalaytime = time;
39. }
40. Gtimeout = Window. setTimeout (_ exec_wait _, dalaytime );
41. }
42. Function _ exec_wait _(){
43. Try {eval (_ FUNC _);
44. } Catch (e ){
45. Alert ("_ FUNC _:" + _ FUNC _ + "; _ execwait _" + E. Message );
46. } Finally {
47. Window. cleartimeout (gtimeout );
48. $ (_ Selector _). DataGrid ("loaded ");
49. }
50. }

Of course, you can also use the onloadsuccess event of the DataGrid to implement it. In the end, the loding and loaded methods of the DataGrid are called to complete the display and hiding of the DIV:

1. Function loaddategrid (){
2. $ ('# Tt'). DataGrid ('loading'); // open the wait Div
3. VaR querycondition = {
4. Name: "Light of the century"
5. };
6. VaR odata = getajaxdate ("ordermanagebuz", "qryworkorderpaged", querycondition, opage );
7. $ ('# Tt'). DataGrid ('loaddata ',{
8. "Total": odata. Page. recordcount,
9. "Rows": odata. Data
10. });
11. }
13. $ ('# Tt'). DataGrid ({
14. Onloadsuccess: function (){
15. // Close the waiting Div after loading the data
16. $ ('# Tt'). DataGrid ('loaded ');
17. }
18. });

How to not count the total number

Sometimes the data volume on the data layer is very large, and the total number of statistics queries will be very time-consuming. The total number of statistics is not very suitable. How to not count the total number depends on how you write it in the background, you can virtualize the total number one by one. This number is always 1 larger than the current page number. The specific implementation is not within the scope of this article.

By now, loading grid data in loaddata mode is perfect. at least some of the problems have been solved. I hope you can have better suggestions for communication ......

 

 

 

1. // Add query parameters to run when the page is loaded
2. Function reloadgrid (){
3. VaR test = Document. getelementbyid ("nodechild"). innerhtml;
4. // Add query parameters directly to queryparams
5. $ ('# Haveinput'). DataGrid ({
6. URL: "scoresdetailscity. ashx? Test = "+ Test
7. })
9. VaR queryparams = $ ('# haveinput'). DataGrid ('options'). queryparams;
10. Getqueryparams (queryparams );
11. $ ('# Haveinput'). DataGrid ('options'). queryparams = queryparams;
13. $ ("# Haveinput"). DataGrid ('reload ');
15. }

About data loading (transfer) of easyui DataGrid)