设为首页收藏本站

JEECG官方网站-企业级JAVA快速开发平台

 找回密码
 立即注册

关注JEECG发展历程 关注最新动态和版本, 记录JEECG成长点滴 最新动态 - 技术支持 - 师徒架构班

JEECG最新版本下载 JEECG智能开发平台 - 显著提高开发效率 常见问题 - 入门视频 - 参与开源团队

商务 QQ: 3102411850、418799587 商务热线: 18611788525 客服电话: 010-64808099 官方邮箱: jeecgos@163.com

查看: 7460|回复: 8

JEECG -J2EE智能开发框架 续六: JEECG 前台页面和后台交互讲解

[复制链接]

156

主题

55

好友

4万

积分

论坛元老

Rank: 10Rank: 10Rank: 10

热心会员 推广达人 宣传达人 突出贡献 优秀版主 荣誉管理 JEECG团队成员

发表于 2013-1-16 15:03:14 |显示全部楼层
近期有朋友对 EasyUI和后台交互方式不理解,特做一下简单整理,希望能对大家有所帮助!!!

一般情况下一个功能模块分为:增、删、改、查四个功能点;

针对功能的页面设计如下:
【OLD】老式页面设计采用:离散设计
                                            一个功能分别对应三个页面
                                            1.添加页面
       2.修改页面
       3.列表页面

【NEW】JEECG 页面设计: 采用一个页面实现增、删、改、查全部功能;
                                技术点一:Jeecg 页面布局采用EasyUI的布局方式,针对添加和修改页面都使用DIV方式实现,页面采用Dialog方式弹出;
                                       技术点二:Form(添加/修改) 请求提交方式,采用Jquery方式Form提交;
JEECG 前台页面和后台交互讲解 (3).png

举例讲解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();//对应页面按钮的修改
}



1

主题

0

好友

12

积分

新手上路

Rank: 2

发表于 2013-5-20 17:51:54 |显示全部楼层
LZ辛苦了
回复

使用道具 举报

2

主题

1

好友

142

积分

注册会员

Rank: 3Rank: 3

发表于 2013-11-21 14:00:19 |显示全部楼层
不错
回复

使用道具 举报

0

主题

0

好友

6

积分

新手上路

Rank: 2

发表于 2013-11-21 21:23:35 |显示全部楼层
膜拜下
回复

使用道具 举报

0

主题

0

好友

186

积分

注册会员

Rank: 3Rank: 3

发表于 2013-12-17 10:46:07 |显示全部楼层
回复

使用道具 举报

0

主题

0

好友

186

积分

注册会员

Rank: 3Rank: 3

发表于 2013-12-17 11:26:12 |显示全部楼层
回复

使用道具 举报

0

主题

0

好友

42

积分

新手上路

Rank: 2

发表于 2013-12-21 16:30:28 |显示全部楼层
不错!支持下
回复

使用道具 举报

0

主题

0

好友

27

积分

新手上路

Rank: 2

发表于 2013-12-25 18:05:00 |显示全部楼层
lz  确实 挺辛苦的啊
回复

使用道具 举报

0

主题

0

好友

186

积分

注册会员

Rank: 3Rank: 3

发表于 2014-1-3 13:14:35 |显示全部楼层
给力给力
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

Archiver|手机版|JEECG快速开发平台 - 官方论坛 ( 京ICP备12013567号-3 )  

GMT+8, 2019-7-19 01:59 , Processed in 2.636404 second(s), 28 queries , Gzip On, Memcache On.

JEECG Open Source

© 2001-2012 Comsenz Inc.

回顶部