JAVAEE--BOS logistics project 04: learning plan, datagrid, paging query, batch deletion, modification function, javaee Logistics Project

JAVAEE--BOS logistics project 04: learning plan, datagrid, paging query, batch deletion, modification function, javaee Logistics Project
1. LearningPlan

1. Usage of datagrid (important)

N rendering static HTML as a datagrid Style

N send an ajax request to obtain json data and create a datagrid

N use the API provided by easyUI to create a datagrid(MASTER)

2. Implement paging query for dispatched personnel

N adjust the page to send ajax requests based on the datagrid

N create PageBean encapsulate paging Parameters

N defines general paging query methods

N convert the paging query result to json return

3. Batch Delete dispatched personnel

N page Adjustment

N server implementation

4. Change dispatch personnel

N page Adjustment

N server implementation

 

 

2 Usage of datagrid (important)2.1 Render static HTML as a datagrid Style

<! -- Method 1: render static HTML as a datagrid style --> <table class = "easyui-datagrid"> <thead> <tr> <th data-options = "field: 'id' "> NO. </th> <th data-options =" field: 'name' "> name </th> <th data-options =" field: 'age' "> age </th> </tr> </thead> <tbody> <tr> <td> 001 </td> <td> James </td> <td> 90 </td> </tr> <td> 002 </td> <td> Lao Wang </td> <td> 3 </td> </tr> </tbody> </table>

 

 

2.2 Send an ajax request to obtain json data and create a datagrid

Provide json files:

 

<! -- Method 2: Send an ajax request to obtain json data. Create a datagrid --> <table data-options = "url: '$ {pageContext. request. contextPath}/json/datagrid_data.json '"class =" easyui-datagrid "> <thead> <tr> <th data-options =" field: 'id' "> NO. </th> <th data-options =" field: 'name' "> name </th> <th data-options =" field: 'age' "> age </th> </tr> </thead> </table>

 

2.3 Use the API provided by easyUI to create a datagrid (master)

<! -- Method 3: Use the API provided by easyUI to create a datagrid --> <script type = "text/javascript" >$ (function () {// After the page is loaded, create a data table datagrid $ ("# mytable "). datagrid ({// define all columns of the title row columns: [{title: 'number', field: 'id', checkbox: true}, {title: 'name ', field: 'name'}, {title: 'age', field: 'age'}, {title: 'address', field: 'address'}], // specify the url of the ajax request sent from the data table: '$ {pageContext. request. contextPath}/json/datagrid_data.json ', rownumbers: true, singleSelect: true, // define the toolbar: [{text: 'add', iconCls: 'icon-add ', // bind the button. Click Event handler: function () {alert ('add... ') ;},{ text: 'delete', iconCls: 'icon-delete'}, {text: 'modify', iconCls: 'icon-edit '}, {text: 'query', iconCls: 'icon-search'}], // display pagination: true}) ;}); </script>

 

If the data table uses paging entries, the json returned by the server must be changed:

 

 

Request:

 

 

Response:

 

 

3 Query by dispatcher by PAGE

Page: WEB-INF/pages/base/staff. jsp

 

3.1 Page Adjustment

L modify the URL of the datagrid on the page

 

3.2 Server implementation3.2.1 Wrap PageBean tool class

Encapsulate paging-related attributes

 

 

 

3.2.2 Extended General paging query methods in BaseDao

/*** Common paging Query Method */public void pageQuery (PageBean pageBean) {int currentPage = pageBean. getCurrentPage (); int pageSize = pageBean. getPageSize (); DetachedCriteria detachedCriteria = pageBean. getDetachedCriteria (); // query total --- total data size detachedCriteria. setProjection (Projections. rowCount (); // specifies the form of an SQL statement sent by the hibernate framework ---- "select count (*) from bc_staff; List <Long> countList = (List <Long>) this. getHibernateTemplate (). findByCriteria (detachedCriteria); Long count = countList. get (0); pageBean. setTotal (count. intValue (); // query rows --- the data set to be displayed on the current page detachedCriteria. setProjection (null); // specifies the form of The hibernate framework sending SQL ---- "select * from bc_staff; int firstResult = (currentPage-1) * pageSize; int maxResults = pageSize; list rows = this. getHibernateTemplate (). findByCriteria (detachedCriteria, firstResult, maxResults); pageBean. setRows (rows );}

 

 

3.2.3 Provides the paging query method in StaffAction.

// Property-driven, receiving the page parameters submitted by the page: private int page; private int rows;/*** paging Query Method * @ throws IOException */public String pageQuery () throws IOException {PageBean pageBean = new PageBean (); pageBean. setCurrentPage (page); pageBean. setPageSize (rows); // create an offline submitted query object: DetachedCriteria detachedCriteria = DetachedCriteria. forClass (Staff. class); pageBean. setDetachedCriteria (detachedCriteria); staffService. pageQuery (pageBean); // convert the PageBean object to json using json-lib, write the output stream back to the page // JSONObject --- convert a single object to json // JSONArray ---- convert the array or set object into json JsonConfig jsonConfig = new JsonConfig (); // specify which attributes do not need to be converted to json jsonConfig. setExcludes (new String [] {"currentPage", "detachedCriteria", "pageSize"}); String json = JSONObject. fromObject (pageBean, jsonConfig ). toString (); ServletActionContext. getResponse (). setContentType ("text/json; charset = UTF-8"); ServletActionContext. getResponse (). getWriter (). print (json); return NONE ;}

 

4 Batch Delete dispatched personnel

There is a delete tag in the dispatch table. 1 indicates deleted, 0 indicates not deleted.

4.1 Page Adjustment

L The method provided by the data table datagrid to obtain all selected rows:

 

 

Modify the event bound to the delete button:

Function doDelete () {// obtain all the selected rows in the data table and return the array object var rows =$ ("# grid "). datagrid ("getSelections"); if (rows. length = 0) {// No selected records. The prompt $. messager. alert ("prompt message", "select the dispatcher to be deleted! "," Warning ");} else {// select the dispatcher. A confirmation box is displayed. messager. confirm ("confirm deletion", "Are you sure you want to delete the selected dispatcher? ", Function (r) {if (r) {var array = new Array (); // OK, send a request // obtain the id of all selected dispatchers for (var I = 0; I <rows. length; I ++) {var staff = rows [I]; // json object var id = staff. id; array. push (id);} var ids = array. join (","); // 1, 2, 3, 4, 5 location. href = "staffAction_deleteBatch.action? Ids = "+ ids ;}});}}

 

4.2 Server implementation

 

Step 1: Create a deleteBatch batch Delete method // property driver in StaffAction to receive the ids parameter private String ids submitted on the page; /*** remove multiple dispatchers */public String deleteBatch () {staffService. deleteBatch (ids); return LIST;} Step 2: Provide a batch Delete method in the Service/*** batch Delete by dispatcher * logical Delete, change deltag to 1 */public void deleteBatch (String ids) {// 1, 2, 4 if (StringUtils. isNotBlank (ids) {String [] staffIds = ids. split (","); for (String id: staffIds) {staffDao.exe cuteUpdate ("staff. d Step 3: Provide the HQL statement in Staff. hbm. xml to delete the dispatcher logically <! -- Delete dispatch logic --> <query name = "staff. delete"> UPDATE Staff SET deltag = '1' WHERE id =? </Query> due to dtd constraints, the query and class are of the same level. If nested writes are performed, an error is returned.

5 Dispatcher modification function5.1 Page Adjustment

Step 1: bind a double-click event to the data table

 

Step 2: Add a dispatcher on the copy page to obtain the modify dispatcher window.

 

 

Step 3: Define a function

// Function doDblClickRow (rowIndex, rowData) corresponding to the double-click row event bound to the data table {// open the modify dispatcher window $ ('# editStaffWindow '). window ("open"); // use the load method of the form object to echo the data $ ("# editStaffForm "). form ("load", rowData );}

 

5.2 Server implementation

Create the edit Method in StaffAction and modify the dispatch information.

 

/*** Modify dispatch information */public String edit () {// query the database explicitly and query the original data according to the id of Staff staff = staffService. findById (model. getId (); // use the data submitted on the page to overwrite the staff. setName (model. getName (); staff. setTelephone (model. getTelephone (); staff. setHaspda (model. getHaspda (); staff. setStandard (model. getStandard (); staff. setStation (model. getStation (); staffService. update (staff); return LIST ;}