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 ;}