[ExtJs] add, delete, modify, and query of the table control Grid, and use renderer to use text rather than icons for the actioncolumn of the operation Column

[ExtJs] add, delete, modify, and query of the table control Grid, and use renderer to use text rather than icons for the actioncolumn of the operation Column

In the query of grid, a paging table component that interacts with the background database in ExtJs (click to open the link), this article describes how the Grid control is displayed by page. In addition, adding, deleting, and modifying the data in the control is a success. To sort the control, add an order by statement to the database query statement in the background. The order by statement in the foreground can only sort the current page after the page is displayed, which makes no sense. The following example shows how to add, delete, modify, and query the table control Grid of ExtJs.

 

I. Basic Objectives

Or there is a user table in the database:

Then, in the webpage, as shown in, add, edit, and delete buttons can be used to add, delete, modify, and query the table control.

 

Ii. Basic Ideas

The directory structure of this project is as follows:

 

Iii. Production Process

1. showData. php

This page is the formSubmit used to read data in [ExtJs] query of grid, a paging table component that interacts with the background database (click to open the link. php, the field is not changed, and the data is taken from the model. php class. Complete the construction of paging data. I will not go into details here.

 

 getUserInfoByPaging($start,$limit);$total=$userClass->getUserTotalNum();$data="";for($i=0;$i
 

2. model. php

 

This page has not been modified yet. According to the idea of [php] using the original JavaScript Ajax to design MVC layers for php and compatible with IE6 (click to open the link), it is only for insert, delete from, update, and other statements that do not return results add another method. In fact, this file is the business logic of the user table.

 

 

32.16grid.html

Although there is only one grid.html page at the front end, this page is quite ambitious.

(1) first introduce Ext resources, and then use the same method as [ExtJs] for querying the grid with a paging table component that interacts with the background database (click to open the link, first, define the model and construct a data center. The definition here is written in Ext. onReady (function () {}); outside of the function as a global variable.

 

<Script type = "text/javascript" src = ".. /js/ext-all.js "> </script> <script type =" text/javascript "src = ".. /js/bootstrap. js "> </script> <script type =" text/javascript "src = ".. /js/ext-lang-zh_CN.js "> </script>

 

Next, There will be various database processing pages. There is nothing to say, it is to catch data from ExtJs at the front end, use php to operate Mysql, and then print the response Json on this page, extJs reads this string through its own Ajax mechanism and will automatically process it. Data is sent from ExtJs at the front end. Of course, if the system is actually used, you also need to prevent SQL injection. Here is just a small example, so don't write it so complicated.

4. addData. php

Insert data back-end page

 

 Modify ("insert into user (username, password) values ('". $ username. "','". $ password. "');"); echo "{'success': true, 'msg ':' added successfully! '} ";?>

5. editData. php

 

Modify data backend page

 

 Modify ("update user set username = '". $ username. "'where id = ". $ id. ";"); $ userClass-> modify ("update user set password = '". $ password. "'where id = ". $ id. ";"); echo "{'success': true, 'msg ':' modified successfully! '} ";?>

6. deleteData. php

 

Deleting the data backend page is generally not the case. It is reasonable to say that all operations to delete data in the database are marked as deleted. In case of an emergency or data analysis, review records. Just like monitoring videos, it's a waste of time to delete data directly. But here is just a small example. Don't care about these details!

This is the Ajax processing of ExtJs, not the form, so print out a common string!

 

 Modify ("delete from user where id =". $ id. ";"); echo "deleted successfully! ";?>