Use of Bootstrap-dialog (continued Bootstrap Table)

Bootstrap-dialog realize the increase of the contents of the table, delete, change.

Plugin Introduction: jquery and Bootstrap and Arttemplate must be introduced first.

<link rel= "stylesheet" href= "${ctx}/assets/plugins/bootstrap-dialog/css/bootstrap-dialog.min.css" ><script src= "${ctx}/assets/plugins/bootstrap-dialog/js/bootstrap-dialog.min.js" ></script ><script src= "${ctx}/assets/js/app-jquery-dialog.js" ></script>  //self-writing plugin, combined with Ajax. 

Increase:

Click Add Order: Pop-up box.

$ ("#addBtn"). On ("click",function() {     $. Form.showformdialog({ //displays the form that needs to be submitted.  title:           "Add VIP Order", //title posturl:           "${aapi}/ordervip/create",//Data submission Interface          Templateurl:' ${aapi}/page/custom/vipform ', //form the JSP page where the form is located, which is added manually in MySQL.  formId:           "#vipForm", //The ID of the form form to be submittedPosttype:           "Multipart", //Submit data type, consistent with background @requestbody.  Data: { //Custom-uploaded parameter pid:          0, PName:"--", Level:0}, onpostsuccess: function() {               $("#table"). Bootstraptable ("Refresh");      //Request to refresh table successfully, load data } });});

The JSP page form section in Templateurl.

Note: The interface document is given in the background, and name is consistent with the field name submitted by the form, otherwise it cannot be uploaded.

 <form Id= "Vipform"Method=" POST "action=" "> <input type=" hidden "name= "id">
<input type= "hidden"name= "pid"Value= "{{pid}}" >
<input type= "hidden"name= "Level"Value= "{{level}}" > <input type= "hidden"name= "Cusid"id= "id" value= "" placeholder= "id"/> <input type= "hidden"name= "Cusname"Id= "Cusname" value= "" placeholder= "select Big Customer Name"/> <div class= "Form-group" > <label for= "Fixmove" > Order type:</label>
<label class= "Checkbox-inline" > <input type= "checkbox"name= "Type" value= "1"/> Handling </label>
<label class= "Checkbox-inline" >
<input type= "checkbox"name= "type" value= "0"/> Repair </label> </div> <div class= "Form-group" > <label> Order Notes:</label> <div> <textareaname= "Remark"Rows= "3" cols= "></textarea>" </div> </div> <div class= "Form-group" > < Label for= "File" > order file </label> <div> <input type= "file" id= "file"name= "Orderfile"Accept= "Application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,
application/vnd.ms-excel,application/msword,application/ Vnd.openxmlformats-officedocument.wordprocessingml.document "/> </div> </div> <div class=" f Orm-group "id=" Searchform "> <label for= "Ishot" > Order user:</label>
<span id= "Cusname" ></span> <div> <input type= "text" class= "Searele"name= "nickname"Value= "" placeholder= "name"/> <input type= "text" class= "Searele"name= "Phone"Value= "" placeholder= "mobile number"/> <input id= "searchcus" type= "button" value= "Query"/> </div> <div> <table id= "custable" ></table> </div> </div></form>

Add content and upload, in the background interface to hit a breakpoint, you can hear the front-end incoming data (info). As shown in.

After successful message prompt, table refresh shows the order just added. Information tips This article is not to be elaborated in the Pnotify plug-in use in detail elaborated.

Change:

Click the Edit button to pop up the form box.

JS Code: In addition to the new DataSource and IsReadOnly, the same as the above.

$. Form.showformdialog ({title:"Modify VIP Order", PostURL:"${aapi}/ordervip/update", //update the content of the interface dataSource:      "${aapi}/ordervip/detail/2/" +Row.orderno,//New DataSource combined with Arttemplate for rendering data form data, implemented on this basis to modify. isreadonly:false, //set to non-read-only mode, enter modify mode, Commit button becomes modified. Templateurl:' ${aapi}/page/custom/vipmodifyform ', //Modified JSP page, inconsistent with the new page, using Arttemplate to render datasource data into the form. formId:"#Vipform", //Modify the Formid Posttype for the "vipmodifyform.jsp" page :"Multipart", data: {pid:0, PName:"--", Level:0}, Onpostsuccess:function() {         $("#table"). Bootstraptable ("Refresh"); }});

Templateurl:

<script>if("{{type}}" = = "1,0"){        $("#movetype"). attr ("Checked", "checked"); $("#fixtype"). attr ("Checked", "checked"); }Else if("{{type}}" = = "0"){         $("#fixtype"). attr ("Checked", "checked"); }Else if("{{type}}" = = "1"){        $("#movetype"). attr ("Checked", "checked"); }    functionClickck () {varMovetype = $ ("#movetype"). Prop ("Checked"); varFixtype = $ ("#fixtype"). Prop ("Checked"); varTypestr = "1,0"; if(movetype&&!Fixtype) {Typestr= "1"; }Else if(!movetype&&Fixtype) {Typestr= "0"; }        $("#typeStr"). Val (TYPESTR); }</script><formId= "Vipform"Method=" POST "action=" "> <input type=" hidden "name= "id">//type:hiden, the form control cannot be seen, but the value can be submitted as a single table. 
<input type= "hidden"name= "pid"Value= "{{pid}}" >
<input type= "hidden"name= "Level"Value= "{{level}}" > <input type= "hidden"name= "OrderNo"Value= "{{OrderNo}}"/>//Because it is to modify the contents of this order, so must upload a parameter of the order to distinguish, backstage request OrderNo. <input type= "hidden"name= "Cusid"id= "id" value= "" placeholder= "id"/> <input type= "hidden"name= "Cusname"Id= "Cusname" value= "" placeholder= "select Big Customer Name"/> <div class= "Form-group" > <labelfor="Fixmove" > Order type:</label>
<label class= "Checkbox-inline" > <input type= "checkbox" value= "1" id= "Movetype" onclick= "Clickck ()"/&gt ; Handling </label>
<label class= "Checkbox-inline" >
<input type= "checkbox" value= "0" id= "fixtype" onclick= "Clickck ()"/> Repair </label>
<input type= "hidden"name= "Type"ReadOnly id= "Typestr"/> </div> <div class= "Form-group" > <label> Order Notes:</label> <div> <textareaname= "Remark"Rows= "3" cols= "></textarea>" </div> </div> <div class= "Form-group" > < label> Order File:</label><span>{{filerealname}}</span>
<inputname= "Orderfile"Id= "input-1" type= "file" class= "file" accept= "Application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,
application/vnd.ms-excel,application/msword,application/ Vnd.openxmlformats-officedocument.wordprocessingml.document "> </div> <div class=" Form-group "id=" Searchform "> <label for= "Ishot" > Order user:</label>
<span id= "Cusname" ></span> <div> <input type= "text" class= "Searele"name= "nickname"Value= "" placeholder= "name"/> <input type= "text" class= "Searele"name= "Phone"Value= "" placeholder= "mobile number"/> <input id= "searchcus" type= "button" value= "Query"/> </div> <div> <table id= "custable" ></table> </div> </div></form>

After the request succeeds, the prompt is successful and the table is updated to the changed data.

By deleting:

Click the Delete button. Pop-up Delete information.

JS Code:

$. Form.showconfirm  ({title:  "hint"  "You confirm that you want to cancel the order" "+ ROW.O Rderno + ""? " //built-in text   URL:  "${aapi}/ ordervip/delete/"+ Row.orderno,  //removed interface   autoClose:  true  ,  //automatically closes   successtitle:  success  "Order" "+ Row.orderno +" "Canceled! " function   () {$ ( #table"). Bootstraptable ("Refresh" 

The message prompt is deleted after successful deletion and is deleted from the table.

Details:

Click on the order number to pop up the order details.

JS Code:

$. Form.showformdialog ({      "Order Details",      true//set to True there is no saved button anymore.) "${aapi}/ordervip/detail/2/" + Row.orderno, ' ${aapi}/page/custom/viporderdetail              '});

Arttemplate Rendering Template:

<div id= "Messageform" > <input type= "hidden" name= "id" > <div class= "Form-group" > <label& gt; Order number </label> <p>{{OrderNo}}</p> </div> <div class= "Form-group" > <label> number of splits </label> <p>{{if type== ' 0 '}} repair {{Else if type== ' 1 '}} handling {else if type== ' 1,0 '}} handling, repair {{/if}}</p> </div> <div class= "Form-group" > <label> initiator </label> <p>{{Cusname}}</p> </div> <div class= "Form-group" > <label> remarks </label> <p>{{Remark}}</p> </div> <div class= "Form-group" > <label> creation Time </label> <p>{{Createddtm}}</p> </div> <div class= "Form-group" > <label> document Download </label> <p id= "down Load "style=" Cursor:pointer; " ><i class= "fa fa-file-o" aria-hidden= "true" ></i>{{Filerealname}}</p> </div></div>

<script>
$ ("#download"). On ("click", Function () {
Location.href= ' ${aapi}/ordervip/download/{{orderno}} '; //Download the file interface
});
</script>

Use of Bootstrap-dialog (continued Bootstrap Table)