EasyUI DataGrid is a DataGrid written in Jquery. From this we can see that it is a front-end Web UI technology. Generally, when people generate DataGrid, it is more common to use background languages such as background PHP to directly generate HTML syntax to display DataGrid. When you want to operate on the DataGrid, you pass the parameters to the backend and regenerate the entire web page.
EasyUI DataGrid supports two methods. One is that, the background server generates the displayed HTML well and displays it to the front end. Another way is to use AJAX to generate it, just feed the JSON format data to the front end. After the front end receives the data, it analyzes the data itself and uses JQuery to refresh the screen of the DataGrid part.
Here is the second approach, using AJAX technology to do it. The advantage of this is that the three layers of the data layer-> control layer-> display layer can be operated independently, achieving the spirit I mentioned in the previous multi-level architecture design introduction. It will not be like the old method, putting all the HTML generation in PHP to produce it, causing PHP developers themselves to also have to have a deep understanding of front-end technologies such as HTML before they can develop.
This approach brings another benefit, that is, your front-end UI can be replaced, but the background program does not need to be greatly modified. Currently, there are many JavaScript DataGrids that support JSON data format. You can also refer to the DataGrid provided by other companies and choose the most suitable one to use.
At this point, let’s take a look at the program code and you will understand my above meaning better:
First of all, you need to design an HTML UI interface to define which columns to display, the display name of the column, etc., as for the column definition in this part, EasyUI DataGrid also provides it, using JavaScript for dynamic definition, and I am used to using HTML to directly define it, which is not complicated. In terms of division of labor, it is easier to hand it over to Web artists to operate directly.
This part focuses on the setting of URLs.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http:///TR/html4/">
<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 little dragon easyUI datagrid</title>
<link rel="stylesheet" type="text/css" href="./JS/EasyUI/themes/default/">
<link rel="stylesheet" type="text/css" href="./JS/EasyUI/themes/">
<script type="text/javascript" src="./JS/"></script>
<script type="text/javascript" src="./JS/EasyUI/"></script>
</head>
<body>
<h2>A little dragon easyUI datagrid url test</h2>
<table class="easyui-datagrid" style="width:750px;height:300px"
url="datagrid2_getdata.php" title="Load Data" pagination="true">
<thead>
<tr>
<th field="UNum" width="80">UNum</th>
<th field="STUID" width="120">User ID</th>
<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>
To define the background interface for data acquisition
datagrid2_getdata.php
<?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, it can be seen that this is a very simple action obtained by information.
At the beginning, DataGrid will pass in two parameters.
$_POST['page']) is currently on which page
$_POST['rows']) How many data should be displayed on each page
Then, use an array $result to store two information,
$result["total"] How many data are there
$result["rows"] stores the actual data array set
Finally, you need to output the $result array to generate the JSON data format. After DataGrid is received, it will process and refresh the screen.
Later, in a step further, datagrid2_getdata.php can be separated from the part of the data format processed unique to EasyUI DataGrid from the part of the data inventory inventories, and each is independently formed into two classes for processing.
A good architecture and class design are actually generated by the accumulation of experience, constantly evolved and improved, and the most important spirit of the original framework is that the division of labor of each Class must be clear and accurate. This is to deal with the above and continuously evolve the corresponding measures for these problems, so that it will be easier to modify and adjust in the future.
Otherwise, it is easier to become. You want to change but don’t know where to start, because there are dozens of programs waiting for you to modify them together, so as to extend the stability issue. That is, everyone opposes to modify the original system because there are too many ones, and it is not enough to change less. There are dozens of problems together. Even if all the changes are completed, who will test whether there are any improvements? Will you ask your user to help you test? Think about it, just forget it, don’t change it anymore, anyway, the system is still good now.
EasyUI DataGrid supports two methods. One is that, the background server generates the displayed HTML well and displays it to the front end. Another way is to use AJAX to generate it, just feed the JSON format data to the front end. After the front end receives the data, it analyzes the data itself and uses JQuery to refresh the screen of the DataGrid part.
Here is the second approach, using AJAX technology to do it. The advantage of this is that the three layers of the data layer-> control layer-> display layer can be operated independently, achieving the spirit I mentioned in the previous multi-level architecture design introduction. It will not be like the old method, putting all the HTML generation in PHP to produce it, causing PHP developers themselves to also have to have a deep understanding of front-end technologies such as HTML before they can develop.
This approach brings another benefit, that is, your front-end UI can be replaced, but the background program does not need to be greatly modified. Currently, there are many JavaScript DataGrids that support JSON data format. You can also refer to the DataGrid provided by other companies and choose the most suitable one to use.
At this point, let’s take a look at the program code and you will understand my above meaning better:
First of all, you need to design an HTML UI interface to define which columns to display, the display name of the column, etc., as for the column definition in this part, EasyUI DataGrid also provides it, using JavaScript for dynamic definition, and I am used to using HTML to directly define it, which is not complicated. In terms of division of labor, it is easier to hand it over to Web artists to operate directly.
This part focuses on the setting of URLs.
Copy the codeThe code is as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http:///TR/html4/">
<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 little dragon easyUI datagrid</title>
<link rel="stylesheet" type="text/css" href="./JS/EasyUI/themes/default/">
<link rel="stylesheet" type="text/css" href="./JS/EasyUI/themes/">
<script type="text/javascript" src="./JS/"></script>
<script type="text/javascript" src="./JS/EasyUI/"></script>
</head>
<body>
<h2>A little dragon easyUI datagrid url test</h2>
<table class="easyui-datagrid" style="width:750px;height:300px"
url="datagrid2_getdata.php" title="Load Data" pagination="true">
<thead>
<tr>
<th field="UNum" width="80">UNum</th>
<th field="STUID" width="120">User ID</th>
<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>
To define the background interface for data acquisition
datagrid2_getdata.php
Copy the 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, it can be seen that this is a very simple action obtained by information.
At the beginning, DataGrid will pass in two parameters.
$_POST['page']) is currently on which page
$_POST['rows']) How many data should be displayed on each page
Then, use an array $result to store two information,
$result["total"] How many data are there
$result["rows"] stores the actual data array set
Finally, you need to output the $result array to generate the JSON data format. After DataGrid is received, it will process and refresh the screen.
Later, in a step further, datagrid2_getdata.php can be separated from the part of the data format processed unique to EasyUI DataGrid from the part of the data inventory inventories, and each is independently formed into two classes for processing.
A good architecture and class design are actually generated by the accumulation of experience, constantly evolved and improved, and the most important spirit of the original framework is that the division of labor of each Class must be clear and accurate. This is to deal with the above and continuously evolve the corresponding measures for these problems, so that it will be easier to modify and adjust in the future.
Otherwise, it is easier to become. You want to change but don’t know where to start, because there are dozens of programs waiting for you to modify them together, so as to extend the stability issue. That is, everyone opposes to modify the original system because there are too many ones, and it is not enough to change less. There are dozens of problems together. Even if all the changes are completed, who will test whether there are any improvements? Will you ask your user to help you test? Think about it, just forget it, don’t change it anymore, anyway, the system is still good now.