The DataGrid application of the JQuery Easyui Tutorial (iii)

Today to continue before the finishing, the last part of the DataGrid to collate data display and its paging function

Get database data displayed in the DataGrid:jQuery Easyui Tutorial for the DataGrid application (i)

DataGrid implementation paging:jQuery Easyui Tutorial for the DataGrid Application (ii)

The next step is to change the data, and first we add a function button to the page

It's very simple here is the toolbar property of the DataGrid

Next we implement the function of the key

Query comparison Trouble We finally write, first write add it, since to add, there should be a table or input text box, but also to submit, it will have form form:

Build a dialog window in your Web page

Set Click to open dialog in toolbar

Click the Add button and then pop the dialog window we wrote on the page

Here we find that it is not good, we can do the layout of the page, the table wrapped up to lay out, here does not explain,

This contact information is completed, but we found that the window can not be submitted, and can not be canceled, so we add two buttons (save and cancel)

Then click Add and the page will look like this

At this point the click button does not have any reaction, the next step in perfecting the two buttons to achieve its corresponding function,

Cancel button, after clicking Close the window will be OK

{text: ' Cancel ', Iconcls: ' Icon-cancel ', Handler:function () {$ (' #addphoner '). Dialog (' Close ');}}

Save button, click to commit the data, and receive the parameters returned after successful submission

{text: ' Save ', Iconcls: ' Icon-save ', Handler:function () {$ (' #form1 '). Form (' Submit ', {            URL: ' addphonerservlet?type= ') +type,onsubmit:function () {            var isValid = $ (this). Form (' Validate '); if (!isvalid) {            $.messager.show ({title: ') Message ', msg: ' Commit failed validation '}); return isValid;},            success:function (data) {var msg = eval (' ('  + data + ') '); if (msg.success) {            $ (' #dg '). DataGrid (' Reload '); $ (' #addphoner '). Dialog (' Close '); $.messager.show ({title: ' Message ', Msg:msg.message});}            Else{$.messager.show ({title: ' Message ', Msg:msg.message});}}        );}}

After that, the parameters are received and stored in the servlet's Doget method.

protected voidDoget (HttpServletRequest request, httpservletresponse response)throwsservletexception, IOException {//transcodingRequest.setcharacterencoding ("UTF-8"); Response.setcharacterencoding ("UTF-8"); Response.setcontenttype ("Text/html"); //Receive ParametersString pName = Request.getparameter ("PName") ; String Pnumber= Request.getparameter ("Pnumber") ; String Pbirthday= Request.getparameter ("Pbirthday") ; String Premark= Request.getparameter ("Premark") ; //receive the type parameter to determine whether to store or modify instructionsString type = Request.getparameter ("type") ; System.out.println (PName+pnumber+pbirthday+premark+type); String msg= "{' Success ': true, ' message ': ' Saved successfully '}" ; if(Type! =NULL)//non-null judgment        {            if(PName! =NULL&&! ". Equals (PName) && pnumber! =NULL&&! ". Equals (Pnumber) &&Pbirthday!=NULL&&! ". Equals (Pbirthday) && Premark! =NULL&&! "". Equals (Premark)) {Phone ph=NewPhone (); System.out.println (0000);                Ph.setpname (PName);                Ph.setpnumber (Pnumber);                                 Ph.setpremark (Premark); //String string goto dateSimpleDateFormat SDF =NewSimpleDateFormat ("Yyyy-mm-dd") ; Try{ph.setpbirthday (Sdf.parse (pbirthday)); } Catch(ParseException e) {//TODO Auto-generated catch blockE.printstacktrace (); }                                if(Type.equals ("Add"))                {                    NewPhoneservice (). Addphoner (ph); }            }        }        Else{msg= "{' Success ': true, ' message ': ' Network exception '}" ;     } response.getwriter (). write (msg); }

After service Layer method

//      Add a contact person       Public void Addphoner (Phone ph)      {          new  Phonedao (). Addphoner (ph);       }

And finally the DAO layer

//      Add a contact person       Public void Addphoner (Phone ph)      {          init ();                    Se.save (ph);                    Destroy ();      }

Add the completion, and then write the changes (this is the same as the deletion of the DataGrid is the same, the address of the submission is the same, the formation of the method is save into the update, do not introduce more)

Page section

{iconcls:"Icon-edit", Text:Modify, Handler:function() {type= "edit";//define parameters to perform a save or modify operation in the servlet's judgment$ ("#form"). Form ("reset");//Reset the contents of the form                               varit = $ ("#dg"). DataGrid ("getselected");//define variables and get the data for the selected row                               if(IT) {//determine if a variable has a value$ ("#form1"). Form ("Load", {//The form content assignment, here because has the time format particularity we write separately,PName:it.pName, PNumber:it.pNumber,//If there is no time, we can assign the object directly .PRemark:it.pRemark, Pbirthday:getdate (It.pbirthday)                                     }); $("#addphoner"). Dialog ("Open"). Dialog ("Settitle", "Edit Phoner");//Open the dialog window and set the title}Else{$.messager.show ({title:"Message", msg: "Please select a piece of data"}); }                           }                       }

Remove Features

Page section (the primary key of the selected record is placed in the array collection and sent to the servlet via a GET request)

{iconcls:"Icon-delete1", Text:Delete, Handler:function(){                              varRT = $ ("#dg"). DataGrid ("Getselections");//get an array of selected data                              vararray = [];//defining an empty array                               for(IinchRT) {//foreach traversal arrayArray.push (Rt[i].pnumber);//storing the primary key column of the data in an empty array of definitions                              }                              if(rt.length>0) {//determine if the data obtained by getselections is empty$.messager.confirm ("Warning", "OK delete?") ",function(r) {//Confirm callback Function                                    if(R) {$.get ("Deleteservlet?array=" +array,function(data) {//get mode send request                                            varmsg = eval (' (' + data + ') ');//parsing                                            if(msg.success) {$ ("#dg"). DataGrid ("Reload");//Reload DataGrid$.messager.show ({title: "Message", msg:msg.message});//displays information that is passed in the background after the delete action is performed                                            }                                        });                              }                                    }); }Else{$.messager.show ({title:"Hint", msg: "Please select at least one Record"});//If an empty prompt message                              }                           }                       }

The Doget method of the servlet (the primary key set that receives the pass is merged into a collection form, and the data is deleted by traversing the collection)

protected voidDoget (HttpServletRequest request, httpservletresponse response)throwsservletexception, IOException {//transcodingRequest.setcharacterencoding ("UTF-8"); Response.setcharacterencoding ("UTF-8"); Response.setcontenttype ("Text/html"); String Array= Request.getparameter ("array"); string[] Str= Array.split (",") ;                System.out.println (str);  for(String s:str) {NewPhonedao (). Deletephoner (s); } String msg= "{' Success ': true, ' message ': ' Delete succeeded '}" ;             Response.getwriter (). write (msg); }

Finally, there is the query function of this to be written before, the query slightly modified, time to replenish the code

The DataGrid application of the JQuery Easyui Tutorial (iii)