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 前台页面和后台交互讲解相关推荐
- JEECG - 基于代码生成器的J2EE智能开发框架 续一: JEECG框架搭建步骤 [更新版]
提醒: A.项目开发环境: MyEclipse6.5 + jdk1.6 + Tomcat6.0 ; B.目前已经测试通过的数据库有MySql5.Oracle10g.SqlServer200 C.建 ...
- JEECG - 基于代码生成器的J2EE智能开发框架 续四: 查询条件SQL生成器设计思路
JEECG[J2EE Code Generation]是一款基于代码生成器的敏捷开发框架. 续前文:http://blog.csdn.net/zhangdaiscott/article/detail ...
- JEECG - 基于代码生成器的J2EE智能开发框架 续二: 代码生成器使用规则
JEECG[J2EE Code Generation]是一款基于代码生成器的敏捷开发框架. 续前文:http://blog.csdn.net/zhangdaiscott/article/detail ...
- JEECG - 基于代码生成器的J2EE智能开发框架 续一:开发环境搭建步骤
提醒: A.项目开发环境:MyEclipse6.5+jdk1.6+Tomcat6.0 B.目前已经测试通过的数据库有MySql5.Oracle10g.SqlServer200 C.建议使用goo ...
- JEECG - 基于代码生成器的J2EE智能开发框架 续五:权限设计
当前分析: 目前权限模块的设计,模型很多也很成熟,各种精细控制也很完善,但同时因为权限设计的太精细化,也产生一个问题: 用户系统操作越来越复杂: 实际上用到这么精细设计的项目也并不多. 一般项目只需控 ...
- JEECG - 基于代码生成器的J2EE智能开发框架 杂记:【演示视频和源码】
前言:随着WEB UI框架(EasyUi/Jquery UI/Ext)等的逐渐成熟,系统界面逐渐实现统一化,代码生成器也可以生成统一规范的界面!代码生成+手工MERGE半智能开发将是新的趋势,单表数据 ...
- 【CF 应用开发大赛】JEECG 基于代码生成器J2EE智能开发框架
为什么80%的码农都做不了架构师?>>> 应用名称:JEECG(J2EE Code Generation) 基于代码生成器J2EE智能开发框架 应用URL地址:http://j ...
- 基于51单片机的智能空调控制系统设计(仿真+代码+原理图+报告+视频讲解)
基于51单片机的智能空调控制系统 这里写目录标题 1 开发环境 讲解演示视频 2 功能说明介绍 3 仿真图 4 程序 4.1 工程文件 4.2 代码 5 原理图 6 元器件清单 7 视频讲解 8 资料 ...
- JEECG(J2EE Code Generation) 基于代码生成器J2EE智能开发框架 杂记:发布新版本 JEECG_v2.0
版本升级记录: 1.数据库脚本初始化自动化(支持多种数据库) 2.权限完善,增加按钮权限功能 3.增加代码生成器:单表模型和一对多(父子表)例子 4.增加Spring jdbc分页(SQL分离代码写法 ...
最新文章
- vector删除第i个元素_[LeetCode] 215. 数组中的第K个最大元素
- mysql datetime 默认值_老大让我整理下公司内部MySQL使用规范,分享给大家
- 第五节 suid/ sgid /sbit /which /locate / find /stat / ln / uname -a
- 数据结构源码笔记(C语言):集合的位向量表示
- Django之model
- ubuntu 局域网dns服务器_如何在 Ubuntu 16.04 服务器上配置内网 DNS 服务
- c++堆栈溢出怎么解决_StackOverFlowError 常见原因及解决方法
- 比赛中学习(2)-voc数据集制作中将.txt文件变为.xml文件
- leetcode题库53-- 最大子序和
- 在cygwin下使用VC编译器
- 达梦数据库常用管理工具简介
- 计算机键盘指示灯不亮也不启动不了机,电脑开不开机,显示器无反应,键盘指示灯不亮,主...
- altium designer 2019安装教程
- 华为路由器配置VRRP
- 网页无法保存html文件,怎么保存无法保存的网页
- 半导体Led Driver IC失效分析
- 浅谈TPM设备管理系统、推行要素和目的
- 如何搭建云服务器以及使用
- 大学物理实验长度的测量实验报告_大学物理实验长度测量法实验报告完整版
- 先验概率 后验概率 贝叶斯法则 贝叶斯公式