First look at the effect of the final realization,
Two. Ideas, mainly divided into two files to achieve, one is the page display file: Code as follows:
<HTML><Head><title>Sample Management</title>#parse ("Ui:include")<Scriptsrc= "${PATH}/COM/GDT/PROJECT/DSM/DEMO/DEMOMODEL/DEMOMODEL_SCRIPT.VM"></Script><Linktype= "Text/css"rel= "stylesheet"href= "$path/ui/resource/common/css/global.css" /><style>Body{padding:0;margin:0}</style></Head><Body> <Divclass= "Easyui-layout"style= "width:100%; height:100%;"> <Divdata-options= "region: ' North '"class= "Query-panel"title= "Query condition"style= "height:80px;"> <formID= "Demomodelform_query"Method= "POST"> <label>Name:</label><inputclass= "Easyui-textbox"style= "width:110px"name= "Name"> <label>Address:</label><inputclass= "Easyui-textbox"style= "width:110px"name= "Address"> <label>Id:</label><inputclass= "Easyui-textbox"style= "width:110px"name= "Cardno"> <inputtype= "hidden"name= "rule"value= "Name*[email protected]*[email protected]*eq"> <ahref= "javascript:void (0);"class= "Easyui-linkbutton"Iconcls= "Icon-search"onclick= ' javascript:$ ("#grid_demoModel"). DataGrid ("Load", JQuery ("#demoModelForm_Query"). SerializeObject ());>Inquire</a> </form> </Div> <Divdata-options= "Region: ' Center ', title: ' Sample List '"> <TableID= "Grid_demomodel"></Table> <DivID= "Dialog_demomodel"class= "Easyui-dialog"style= "width:400px; height:280px; padding:10px 20px;"closed= "true"> <formID= "Demomodelform_manager">Name:<inputname= "Name"class= "Easyui-validatebox textbox"style= "width:150px"data-options= "Required:true"><BR>Address:<inputname= "Address"class= "Easyui-validatebox textbox"style= "width:150px"data-options= "Required:true"><BR>ID:<inputID= "Uniquecardno"name= "Cardno"class= "Easyui-validatebox textbox"style= "width:150px"data-options= "Required:true"> </form> </Div> </Div> </Div></Body></HTML>
The other is the implementation code file of the page interacting with the background:
#parse ("Ui:path") jQuery (document). Ready (function () {Client.initview ();}); var client = {Grid:null,updateentity:false,initview:function () {var me = This;var toolbar = Me.createtoolbar (); var grid = M E.initgrid ({toolbar:toolbar,url: ' ${path}/com/gdt/project/dsm/demo/demomodel/page.do '});},initGrid:function ( param) {This.grid = JQuery ("#grid_demoModel"). DataGrid ({url:param.url, pagination:true, Singleselect:true,fit : True,fitcolumns:true,toolbar:param.toolbar, columns:[[{field: ' Name ', title: ' Name '}, {field: ' Address ', title: ' Addresses '}, {field: ' Cardno ', title: ' ID card '}]]}); return This.grid;},openinsertdialog:function () {var me = This;me.updateen Tity = False;jquery ("#uniquecardNo"). attr ("ReadOnly", false); Me.clearform (); Me.setdialog ({name: ' #dialog_demoModel ', Button:me.executeButton (), title: ' New Example '});},openmergerdialog:function () {var me = This;var row = JQuery ("#grid_ Demomodel "). DataGrid (" getselected "); if (row) {me.updateentity = True;jquery ("#uniquecardNo"). attr ("ReadOnly", true); Me.setdialog ({name: ' #dialog_demoModel ', Button:me.executeButton (), title: ' Modify Example '}); Me.clearform (); JQuery ("#demoModelForm_Manager"). Form ("Load", row); }},openremoveconfirm:function () {var row = JQuery ("#grid_demoModel"). DataGrid ("getselected"); if (row) { JQuery.messager.confirm (' System hint ', ' Is it deleted? ', function (r) {if (R) {var Rtn = server.deleteobject (Row), if (RTN. Statu = = ' 801 ') {client.reload ();} }});}},executebutton:function () {var me = This;return [{text: ' Save ', Iconcls: ' Icon-save ', handler:function () {var obj = JQuery ("#demoModelForm_Manager"). SerializeObject (); if (Obj.cardno) {var Codecardno = Server.uniquecode ({cardno:o Bj.cardno,rule: ' Cardno*eq '); $ (' #uniquecardNo '). ToolTip ("Hide"); if (codecardno&&!me.updateentity) {$ (' # Uniquecardno '). ToolTip ({position: ' Right ', content: ' <span style= "color: #000000" > The encoding is already occupied .< /SPAN> ', Onshow:function () {$ (this). ToolTip (' Tip '). css ({BordercoLor: ' Red '}); }}). tooltip ("show"); return;}} var validate = JQuery ("#demoModelForm_Manager"). Form (' enablevalidation '). Form (' Validate '); if (validate) {if ( me.updateentity) {var row = JQuery ("#grid_demoModel"). DataGrid ("getselected"); obj[' id '] = row.id; } var Rtn = server.saveorupdate (obj); if (RTN. Statu = = ' 801 ') {me.reload (); } me.dialogcontrol ({dialog: ' #dialog_demoModel ', Control: ' Close '}),}}},{text: ' Off ', iconcls: ' Icon-cancel ', handler: function () {Me.dialogcontrol ({dialog: ' #dialog_demoModel ', Control: ' Close '}),}}];},reload:function () {var me = this; Me.grid.datagrid ("Load");},setdialog:function (param) {jQuery (Param.name). Dialog ({modal:true,buttons: Param.button}). dialog (' Open '). dialog (' Settitle ', param.title);},createtoolbar:function () {var btns = Server.btns (); var toolbar = [];jquery.each (btns,function (i,n) {with (n) {Toolbar.push ({text:btnname,iconcls:icon,handler:function ( {eval (fun);}});}); Return Toolbar;},clearform:function () {JqueRy ("#demoModelForm_Manager"). Form (' clear ');},dialogcontrol:function (param) {jQuery (Param.dialog). Dialog ( Param.control);}}; var server = {Btns:function () {var btns = [{btnid: ' 1 ', Btnname: ' New ', Icon: ' Icon-add ', Enabled: ' Y ', fun: ' Client.openinsertdialog (); '},{btnid: ' 2 ', Btnname: ' Editor ', Icon: ' Icon-edit ', Enabled: ' Y ', fun: ' Client.openmergerdialog (); '},{btnid: ' 3 ', btnname: ' Delete ', icon: ' Icon-remove ', Enabled: ' Y ', Fun: ' client.openremoveconfirm (); '}]; return btns;},saveorupdate:function (param) {var Rtn = Null;jquery.ajax ({type: "POST", Data:param,cache:false,async: False,url: "${path}/com/gdt/project/dsm/demo/demomodel/sou.do", Success:function (msg) {RTN = msg; }}); return rtn;},deleteobject:function (param) {var Rtn = Null;jquery.ajax ({type: "POST", Cache:false,async:false,dat A:param, url: "${path}/com/gdt/project/dsm/demo/demomodel/delete.do", Success:function (msg) {RTN = msg; }}); return rtn;},uniquecode:function (param) {var Rtn = False;jquery.ajax ({type: "POST", Cache:false,async: False,data:param, url: "${path}/com/gdt/project/dsm/demo/demomodel/findall.do", Success:function (msg) {RTN = False ; if (msg. returnobjs.length>0) {Rtn = true;} }); return RTN;}};
Three. Write the appropriate processing code in the controller, service, model according to the URL in the Ajax above
Easyui implementation of page additions and deletions to database connections (primarily front-end implementation)