JEECG - 基于代码生成器的J2EE智能开发框架 续六: JEECG 前台页面和后台交互讲解
近期有朋友對?EasyUI和后臺交互方式不理解，特做一下簡單整理，希望能對大家有所幫助!!!
?
一般情況下一個功能模塊分為：增、刪、改、查四個功能點;
?
針對功能的頁面設計如下：
【OLD】老式頁面設計采用：離散設計
???????????????????????????????????????????一個功能分別對應三個頁面
???????????????????????????????????????????1.添加頁面
??????2.修改頁面
??????3.列表頁面
?
【NEW】JEECG頁面設計：采用一個頁面實現增、刪、改、查全部功能;
???????????????????????????????技術點一：Jeecg頁面布局采用EasyUI的布局方式,針對添加和修改頁面都使用DIV方式實現，頁面采用Dialog方式彈出；
??????????????????????????????????????技術點二：Form(添加/修改)請求提交方式，采用Jquery方式Form提交;
? ? ? ? ? ?
? ? ? ? ? ? ?
舉例講解JSP頁面結構：
例子:?WebRoot/sun/jeecg/jeecgOneDemo.jsp
?
大家會發現<body class="easyui-layout">下面有多個DIV,一般情況下會有六個，下面做一下詳細介紹
?
第一部分：Div功能詳細介紹
?
A.查詢Div
說明：這個是追加查詢條件的地方
<divregion="north" border="false" title="過濾條件"collapsed="true"?style="height: 110px;overflow: hidden;display: none;"align="left">
…此中間添加查詢條件字段，查詢字段需要對應跟Page中字段名一致；
<div>
?
B.數據列表展現DIV
<divregion="center" border="false">
<table id="datagrid"></table>
</div>
?
C.行數據按鈕DIV
?說明：大家會發現將鼠標放在一行數據的時候，會顯示一些操作按鈕，就是這個DIV的效果
<divid="menu" class="easyui-menu"style="width:120px;display: none;">
?
D.添加數據DIV
<divid="jeecgOneDemoAddDialog" style="display: none;width:500px;height: 300px;" align="center">
<formid="jeecgOneDemoAddForm" method="post">
….在添加form間，添加你需要添加的字段
?
E.修改數據DIV
<divid="jeecgOneDemoEditDialog" style="display: none;width:500px;height: 300px;" align="center">
<formid="jeecgOneDemoEditForm" method="post">
…在Form間，添加你要修改的字段
?
F.調用其他頁面彈出DIV
說明：這個的具體使用方法，大家可以在《JEECG技術手冊》中看到.
<divid="iframeDialog" style="display: none;overflow: auto;width:600px;height: 400px;">
?
?
?
第二部分：JS代碼講解 -頁面和后臺交互
?
??? 1.? JS對象講解
?????????var searchForm;???? //查詢Form對象
var datagrid;????????? //數據列表對象
var jeecgOneDemoAddDialog;//添加頁面Dialog對象
var jeecgOneDemoAddForm;??? //添加頁面Form對象
var cdescAdd;
var jeecgOneDemoEditDialog; //修改頁面Dialog對象
var jeecgOneDemoEditForm;?? //修改頁面Form對象
var cdescEdit;
var showCdescDialog;
var iframeDialog;????????????????????? //彈出調用的其他頁面的Dialog
?
?
2.?詳細說明：
????????簡述：這里添加和修改的模式是一樣的，只以添加的為例子進行講解
?
[1].//添加DIV的FORM
jeecgOneDemoAddForm = $('#jeecgOneDemoAddForm').form({
url : 'jeecgOneDemoAction!add.action',//對應后臺action方法
success : function(data) {
var json = $.parseJSON(data);???????? //action以json方式返回處理結果
if (json && json.success) {
$.messager.show({
title :'成功',
msg : json.msg
});
datagrid.datagrid('reload');
jeecgOneDemoAddDialog.dialog('close');
} else {
$.messager.show({
title : '失敗',
msg : '操作失敗！'
});
}
}
});
?
[2].//添加DIV的Dialog
jeecgOneDemoAddDialog =$('#jeecgOneDemoAddDialog').show().dialog({
title : '添加單表模型Demo',
modal : true,
closed : true,
maximizable : true,
buttons : [ {
text : '添加',
handler : function() {
jeecgOneDemoAddForm.submit();// form提交
}
} ]
});
?
?
[3].//datagrid操作按鈕對應方法講解
toolbar : [ {
text : '增加',
iconCls : 'icon-add',
handler : function() {
add();//對應頁面按鈕的添加
}
}, '-', {
text : '刪除',
iconCls : 'icon-remove',
handler : function() {
del();//對應頁面按鈕的刪除，注意這里的刪除支持批量刪除
}
}, '-', {
text :'修改',
iconCls : 'icon-edit',
handler : function() {
edit();//對應頁面按鈕的修改
}
?
?
?
總結
以上是生活随笔為你收集整理的JEECG - 基于代码生成器的J2EE智能开发框架 续六: JEECG 前台页面和后台交互讲解的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： C#中的虚函数
- 下一篇： VS2013默认打开html文件没有设计