1. How the form echoes data
<script>
Method One
function loadlocal () { $ (' #ff '). Form (' Load ', { name:' myname ', email:' [Email protected] ', Subject:' Subject ', message:' message ', language: ' en ' });
Method two function Loadremote () { $ (' #ff '). Form (' Load ', ' Form_data1.json '); }
Clears the form data function ClearForm () { $ (' #ff '). Form (' Clear '); } </script>
2. We usually click the Edit button in our project to make our form data echo and can be edited (or only allowed to view)
is usually such an institution
<div> <form> <table> <tr> ... </tr> </table> </form> </div>
3. Code examples in projects
<DivId= "Mydialog" title= "New Carousel Record" modal= "true" draggable= "false"class= "Easyui-tabs Easyui-dialog" closed= "true"style= "width:80%; height:96%; Margin:auto;; Display:none; " > <Divdata-options= "title: ' Carousel Record '" > <formId= "MyForm" action= "method=" POST "enctype= "Multipart/form-data" > <input type= "hidden" name= "id" value= ""/> <Table class= "Formtable" style= "width:600px;" > <tr> <th> Carousel picture name:</th> <TD>&L T;input id= "ImageName" type= "text" name= "name"style= "width:400px;"class= "Easyui-textbox"Data-options= "Required:true"/></td> </tr> <tr> <th> Carousel Image Jump address:</th> <td><input id= "url" type= "text" name= "url"style= "width:400px;"class= "Easyui-textbox"Data-options= "Required:true"/></td> </tr> <tr> <th> Cycle start time:</th> <td><input id= "StartTime" type= "text" Name= "StartTime"style= "width:400px;"class= "Easyui-datetimebox"Data-options= "Required:true"/></td> </tr> <tr> <th> Cycle end time:</th> <td><input id= "EndTime" type= "text" Name= "EndTime"style= "width:400px;"class= "Easyui-datetimebox"Data-options= "Required:true"/></td> </tr> <tr> <th>logo picture:</th> <td><input id= "Logofileid" type= "file" name= "file"multiple= "multiple" style= "Display:none;" /> <input type= "hidden" name= "FileId" value= "/></td> </t r> </table><br/> </form> </div> </div>
Code in the 4.JS file
Editing methods
function Getaucdetail (ID) { $.ajax ({ "POST", url:parent.baseUrl+ "recycle/ Findrecycleimagebyid/"+ ID, null, ' json ', success:function (Result) { rendereditform(result); }, error:function (Result) { } });};
5. Re-load data
function rendereditform(data) {var dlg= $ (' #mydialog '). Dialog ({title:' Modify the carousel image record ', buttons: [{text:Save, Handler:function () {
Modify Data Method Updateformsubmit(); }}, {text:Close, Handler:function () {Dlg.dialog (' Close '); } } ] }); $(' #myform '). Form (' Load ', {//It is convenient to call the Load method to load the selected data into the form.id:data.id, Name:data.name, Url:data.url, StartTime:data.startTime, EndTime : Data.endtime, fileId:data.fileId}); //Render Picture if(Data.fileid = =NULL|| Data.fileid = = "') { $(". Imgrender"). Remove (); $(". Imguploader"). Show (); } Else{renderimages ("Logofileid", Data.fileid); } $(' #mydialog '). Dialog (' Open ');//Open Window}
6. The key of the Load method here is the Name property value of the HTML file
7. Modify the form data submission method
function Updateformsubmit () {if($ (' #myform '). Form (' Validate ')) {$.ajax ({type:"POST", Url:parent.baseUrl+ ' Recycle/update ', Data: $ (' #myform '). Serialize (), DataType:' JSON ', success:function (Result) {$ (' #mydialog '). Dialog (' Close '); $(' #t_webImage '). DataGrid (' Reload '); $(' #t_webImage '). DataGrid (' Unselectall '); $.messager.show ({title:' Prompt message! ', msg:' Operation succeeded! ' }); }, Error:function (Result) {}}); }Else{alert ("Please complete the required details of the carousel first); }}
Easyui Load method Reloads the form's data