一.首先看一下最终实现的效果,上图
二.思路,主要是分两个文件实现,一个是页面显示文件:代码如下:
<html> <head> <title>示例管理</title> #parse("ui:include") <script src="${path}/com/gdt/project/dsm/demo/demoModel/demoModel_script.vm"></script> <link type="text/css" rel="stylesheet" href="$path/ui/resource/common/css/global.css" /> <style> body { padding: 0; margin: 0 } </style> </head> <body> <div class="easyui-layout" style="width: 100%; height: 100%;"> <div data-options="region:‘north‘" class="query-panel" title="查询条件" style="height: 80px;"> <form id="demoModelForm_Query" method="post"> <label>姓名:</label><input class="easyui-textbox" style="width: 110px" name="name"> <label>地址:</label><input class="easyui-textbox" style="width: 110px" name="address"> <label>身份证:</label><input class="easyui-textbox"style="width: 110px" name="cardNo"> <input type="hidden" name="rule" value="name*[email protected]*[email protected]*eq"> <a href="javascript:void(0);" class="easyui-linkbutton" iconCls="icon-search" onclick=‘javascript:$("#grid_demoModel").datagrid("load",jQuery("#demoModelForm_Query").serializeObject());‘>查询</a> </form> </div> <div data-options="region:‘center‘,title:‘示例列表‘"> <table id="grid_demoModel"></table> <div id="dialog_demoModel" class="easyui-dialog" style="width: 400px; height: 280px; padding: 10px 20px;" closed="true"> <form id="demoModelForm_Manager"> 姓名:<input name="name" class="easyui-validatebox textbox" style="width: 150px" data-options="required:true "><br> 地址:<input name="address" class="easyui-validatebox textbox" style="width: 150px" data-options="required:true "><br> 身份证:<input id="uniquecardNo" name="cardNo" class="easyui-validatebox textbox" style="width: 150px" data-options="required:true"> </form> </div> </div> </div> </body> </html>
另一个是页面与后台交互的实现代码文件:
#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 = me.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:‘姓名‘ }, {field:‘address‘,title:‘地址‘ }, {field:‘cardNo‘,title:‘身份证‘ } ]] }); return this.grid; }, openInsertDialog:function(){ var me = this; me.updateEntity = false; jQuery("#uniquecardNo").attr("readonly",false); me.clearForm(); me.setDialog({name:‘#dialog_demoModel‘,button:me.executeButton(),title:‘新增示例‘}); }, 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:‘修改示例‘}); me.clearForm(); jQuery("#demoModelForm_Manager").form("load", row); } }, openRemoveConfirm:function(){ var row = jQuery("#grid_demoModel").datagrid("getSelected"); if (row) { jQuery.messager.confirm(‘系统提示‘, ‘是否删除?‘, function (r) { if (r) { var rtn = server.deleteObject(row); if(rtn.STATU == ‘801‘){ client.reload(); } } }); } }, executeButton:function(){ var me = this; return [{ text:‘保存‘, iconCls:‘icon-save‘, handler:function(){ var obj = jQuery("#demoModelForm_Manager").serializeObject(); if(obj.cardNo){ var codecardNo = server.uniqueCode({cardNo:obj.cardNo,rule:‘cardNo*eq‘}); $(‘#uniquecardNo‘).tooltip("hide"); if(codecardNo&&!me.updateEntity){ $(‘#uniquecardNo‘).tooltip({ position: ‘right‘, content: ‘<span style="color:#000000">该编码已被占用.</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:‘关闭‘, 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:‘新增‘,icon:‘icon-add‘,enabled:‘Y‘,fun:‘client.openInsertDialog();‘}, {btnId:‘2‘,btnName:‘编辑‘,icon:‘icon-edit‘,enabled:‘Y‘,fun:‘client.openMergerDialog();‘}, {btnId:‘3‘,btnName:‘删除‘,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, data: 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; } };
三.根据上述的ajax中的URL在controller、service、model中编写相应的处理代码
时间: 2024-11-09 02:42:07