EasyUI DataGrid is a DataGrid written with Jquery. It can be seen that it is a front-end Web UI technology. Generally, it is common to use backend languages such as PHP in the background when a DataGrid is generated, to directly generate the HTML syntax to display the DataGrid. When you want to operate on the DataGrid, the parameters are passed to the backend to re-generate the entire page.
EasyUI DataGrid supports two methods. One is that, as mentioned above, the backend server generates HTML and displays it to the front end. The other is that AJAX is used to generate data, simply feed the data in JSON format to the front-end. After the front-end receives the data, use JQuery to refresh the screen of this part of the DataGrid when you analyze your data.
The second approach is introduced here. AJAX technology can be used to operate data layer-> control layer-> presentation layer-independently, in my previous multi-level architecture design preface, I will not put all HTML production in PHP like the old method, resulting in PHP developers themselves, it is also necessary to have a deep understanding of HTML and other front-end technologies before development.
In this way, another benefit is that the front-end UI can be changed, but the background program does not need to be modified significantly. Currently, JavaScript DataGrid in JSON format is supported in many different ways. You can also refer to the DataGrid provided by other companies to select the most suitable one.
Here, let's look at the code to better understand what I mean:
First, you need to design the html ui interface to define the columns to be displayed and the display names of the columns. EasyUI DataGrid also provides the column definitions for this part, using JavaScript for dynamic definition, I am used to using HTML for direct definition, which is not complicated. In the future, it is easier for the Web artist to directly operate on the division of labor.
This part focuses on URL settings.
DataGrid2.php
Copy codeThe Code is as follows:
<! DOCTYPE html PUBLIC "-// W3C // dtd html 4.01 Transitional // EN" "http://www.w3.org/TR/html4/loose.dtd">
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8">
<Meta name = "keywords" content = "jquery, ui, easy, easyui, web">
<Meta name = "description" content = "easyui help you build your web page easily! ">
<Title> A small elastic easyUI datagrid </title>
<Link rel = "stylesheet" type = "text/css" href = "./JS/EasyUI/themes/default/easyui.css">
<Link rel = "stylesheet" type = "text/css" href = "./JS/EasyUI/themes/icon.css">
<Script type = "text/javascript" src = "./JS/jquery. js"> </script>
<Script type = "text/javascript" src = "./JS/EasyUI/jquery. easyui. min. js"> </script>
</Head>
<Body>
<H2> A small elastic easyUI datagrid url test
<Table id = "tt" class = "easyui-datagrid" style = "width: 750px; height: 300px"
Url = "maid" title = "Load Data" pagination = "true">
<Thead>
<Tr>
<Th field = "UNum" width = "80"> UNum </th>
& Lt; th field = "STUID" width = "120" & gt; User ID & lt;/th & gt;
<Th field = "Password" width = "80" align = "right"> Password </th>
<Th field = "Birthday" width = "80" align = "right"> Birthday </th>
<Th field = "Nickname" width = "200"> Nickname </th>
<Th field = "DBSTS" width = "60" align = "center"> DBSTS </th>
</Tr>
</Thead>
</Table>
</Body>
</Html>
Background interface for obtaining data definition
Datagrid2_getdata.php
Copy codeThe Code is as follows:
<? Php
$ Page = isset ($ _ POST ['page'])? Intval ($ _ POST ['page']): 1;
$ Rows = isset ($ _ POST ['rows '])? Intval ($ _ POST ['rows ']): 10;
$ Offset = ($ page-1) * $ rows;
$ Result = array ();
$ Tablename = "STUser ";
//...
Require_once (". \ db \ DB_config.php ");
Require_once (". \ db \ DB_class.php ");
$ Db = new DB ();
$ Db-> connect_db ($ _ DB ['host'], $ _ DB ['username'], $ _ DB ['Password'], $ _ DB ['dbname']);
$ Db-> query ("select count (*) As Total from $ tablename ");
$ Row = $ db-> fetch_assoc ();
$ Result ["total"] = $ row ["Total"];
$ Db-> query ("select * from $ tablename limit $ offset, $ rows ");
$ Items = array ();
While ($ row = $ db-> fetch_assoc ()){
Array_push ($ items, $ row );
}
$ Result ["rows"] = $ items;
Echo json_encode ($ result );
?>
From the above, we can see that this is a simple action to obtain information.
At the beginning, the DataGrid will contain two parameters,
$ _ POST ['page']) Current page number
$ _ POST ['rows ']) displays several pieces of data on each page.
Then, an array $ result is used to store two pieces of information,
$ Result ["total"] several pieces of information
$ Result ["rows"] stores the actual data array set
Finally, we need to output the $ result array in JSON format. After the DataGrid receives the array, it will process and refresh the screen.
Later, in the next step, you can abstract the data format Processing Section of the EasyUI DataGrid from the database access section, they are independent of each other and become two classes for processing.
A good architecture and class design are actually generated by the accumulation of experience, constantly evolving and improved. The most important spirit of the original framework is, the division of labor of each Class should be clear and accurate. This is to cope with the above issues and constantly evolve the corresponding measures, so that modification and adjustment will be easier in the future.
Otherwise, it will become easier. You don't know where to start if you want to change it, because there will be dozens or even hundreds of programs waiting for you to change it together to expand and solve stability problems, that is to say, everyone is opposed to modifying the original system, because there are too many changes to be made, and only one change will not work. Even if the problem is solved by dozens of changes, who will test whether the changes have been made, do you ask your user to help you test it? If you think about it, forget it. Don't change it any more. Now the system is ready for use.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
