专题开发十三:JEECG微云高速开发平台-附录
专题开发十三:JEECG微云高速开发平台-附录
12.1UI库经常使用控件參考演示样例
|
序号 |
控件 |
解决方式 |
參考演示样例 |
|
1 |
datagrid数据列表。字段採用数据字典显示文本 |
<t:dgCol title="状态" sortable="true" field="status" replace="正常_1,禁用_0,超级管理员_-1"></t:dgCol> |
WebRoot/webpage/system/user/userList.jsp |
|
2 |
树列表展现 |
參考演示样例[菜单管理]:WebRoot/webpage/system/function/functionList.jsp |
|
|
3 |
POPUP实现 |
<t:choose hiddenName="roleid" hiddenid="id" url="userController.do?roles" name="roleList" icon="icon-choose" title="角色列表" textname="roleName" isclear="true"></t:choose> |
/WebRoot/webpage/system/user/user.jsp |
|
4 |
下拉菜单实现 |
WebRoot/webpage/system/user/user.jsp |
|
|
5 |
radio控件 |
WebRoot/webpage/system/user/user.jsp |
|
|
6 |
数据列表展示 |
WebRoot/webpage/system/user/userList.jsp |
|
|
7 |
经常使用组件DEMO地址 |
上传/表单验证/Excel导入/Excel导出/ 页面不同弹出方式/树界面展示/自己主动补全/一对多演示样例/tabs切换 |
/WebRoot/webpage/demo/* |
|
8 |
下拉菜单多级联动 |
||
|
9 |
一对多明细行加下拉项 |
||
|
10 |
datagrid数据列表,时间字段格式化 |
||
|
11 |
数据行全选 |
||
|
12 |
反复校验 |
12.2开发技巧:採用IFrame打开页面
眼下在JEECG开发平台中,为了提高easyui的性能,tab的打开採用href方式,可是href方式存在例如以下问题:
1.href仅仅载入目标URL的html片段
这个特性是由jQuery封装的ajax请求处理机制所决定的,所以目标URL页面里不须要有html。
head,body等标签。即使有这些元素,也会被忽略,所以放在head标签里面的不论什么脚本也不会被引入或者运行。
2.短暂的页面混乱:
href链接的页面比較复杂的时候,easyui对其渲染往往须要一个较长的过程
当载入的页面布局较为复杂,或者有较多的js脚本须要执行的时候,就不优点理了。
所以,综合考虑。假设页面样式、js简单就採用系统默认的href方式打开tab页。
假设页面复杂。不好拆分,则採用 iframe方式打开tab。
採用ifrme方式,须要在配置菜单的时候。加上&isIframe标识,例如以下所看到的:
|
dataSourceController.do?goDruid&isIframe 须要注意:改为iframe方式的页面须要在head中追加: <t:base type="ckeditor,jquery,easyui,tools"></t:base> |
12.3开发技巧:组合查询实现方法
简述:代码生成器默认生成的查询方式为单字段查询。假设想实现字段组合查询,须要採用例如以下方式。
实现步骤:
第一步:设置dategrid字段查询属性query="true"
第二步:相应query="true"的dategrid字段设置查询字段组件
|
<input type="text" name="userName" id="userName" style="width: 80px"/> |
第三步:设置查询button
|
<a href="#" class="easyui-linkbutton" iconCls="icon-search" onclick="userListsearch()">查询</a> |
注意点:
1.这样的写法t:dgToolBar这个标签不能使用,不然会有冲突,查询form显示不出来;
2.查询函数的名字规则"[dategrid组件name]search()"
[1].dategrid组件name
|
<t:dategrid name="userMe" |
[2].组合查询DIV
|
<div id="userMetb" |
[3].查询button相应的js方法
|
<a href="#" class="easyui-linkbutton" iconCls="icon-search" onclick="userMesearch()">查询</a> |
參考演示样例:/WebRoot/webpage/system/user/userList.jsp
演示样例代码如图12‑1
12.4Formvalid新增属性tiptype的使用
Formvalid中的tiptype用来定义提示信息的显示方式,一共同拥有4种取值,在其官方的说明中,不同取值的含义例如以下:
|
取值 |
含义 |
|
1 |
自己定义弹出框提示。 |
|
2 |
側边提示(会在当前元素的父级的next对象的子级查找显示提示信息的对象。表单以ajax提交时会弹出自己定义提示框显示表单提交状态); |
|
3 |
側边提示(会在当前元素的siblings对象中查找显示提示信息的对象,表单以ajax提交时会弹出自己定义提示框显示表单提交状态); |
|
4 |
側边提示(会在当前元素的父级的next对象下查找显示提示信息的对象。表单以ajax提交时不显示表单的提交状态) |
在jeecg中,tiptype的属性配置代码例如以下:
|
<t:formvalid formid="formobj" dialog="true" usePlugin="password" layout="table"tiptype="1" action="jeecgOrderMainController.do?save"> |
与官方的使用方法不同的是,JEECG中对取值为1时的样式以及校验方式进行了改造。官方版是在提交时才给出提示,而JEECG中是在onblur的时候就会提示,当输入正确后,1秒中后会自己主动消失。
注:<t:formvalid>标签中不写tiptype时默觉得4.即側边显示。
使用建议:单表能够不用给定tiptype属性。即使用默认的側边校验。主从表的数据校验给定tiptype="1"。
单表和主从表的数据校验提示效果分别如图12‑2和图12‑3所看到的。
12-2
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvemhhbmdkYWlzY290dA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast">
12-3
12.5使用toolbar 自己定义js 參数规则
第一步:定义button
<t:dgToolBar title="JS增强"icon="icon-edit"
url="cgFormHeadController.do?jsPlugin"funname="jsPlugin"></t:dgToolBar>
第二步:定义js方法
三个參数说明:
1.三个參数缺一不可
2.三个參数顺序不能变
3.有且仅仅有三个參数
4.id为datagrid的name属性
function jsPlugin(title,url,id){
var rowData = $('#'+id).datagrid('getSelected');
if (!rowData) {
tip('请选择编辑项目');
return;
}
url += '&id='+rowData.id;
$.dialog({
content: "url:"+url,
lock : true,
title:"JS增强编辑["+rowData.tableName+"-"+rowData.content+"]",
opacity : 0.3,
width:900,
height:500,
cache:false,
ok: function(){
iframe = this.iframe.contentWindow;
iframe.goForm();
return false;
},
cancelVal: '关闭',
cancel: true /*为true等价于function(){}*/
});
}
12.6表单字段反复校验方法
目的:实现通用表单字段反复校验,
比如:部门管理模块,部门名称反复校验
<inputname="departname" class="inputxt" value="${depart.departname}" validType="t_s_depart,departname,id"datatype="s3-10">
1)代码配置
给input标签。添加validType属性,格式如:t_s_depart,departname,id即(数据表名称、相应的数据库字段、业务实体的隐藏域主键的Id属性)
2)消息提示方式,两种方式
[1].提示弹出层:例如以下所看到的:给t:formvalid 添加tiptype="1" 属性
<t:formvalidformid="formobj" tiptype="1"layout="table"…
[2].提示信息在文本框后面提示
不须要给t:formvalid 添加不论什么属性。
专题开发十三:JEECG微云高速开发平台-附录的更多相关文章
- 开发指南专题八:JEECG微云高速开发平台数据字典
开发指南专题八:JEECG微云高速开发平台数据字典的使用 1.标签中使用数据字典 数据字典为系统中可能用到的字典类型数据提供了使用的便利性和可维护性.下面拉框标签<t:dictSele ...
- 开发指南专题六:JEECG微云高速开发平台代码生成
开发指南专题六:JEECG微云高速开发平台代码生 1.1. 代码生成扫描路径配置 用代码生成器生成代码后.须要进行相关配置配置,扫描注入control.service.entity等; 具体操作过程例 ...
- 开发指南专题五:JEECG微云高速开发平台代码生成器
开发指南专题五:JEECG微云高速开发平台代码生成器 1.1. Maven开发环境搭建 在搭建jeecg的maven开发环境之前,须要先配置好本机的maven环境,并在eclipse中安装好m2ecl ...
- 开发指南专题十一:JEECG微云高速开发平台--基础用户权限
版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/zhangdaiscott/article/details/26580037 开发指南专题 ...
- 开发指南专题二:JEECG微云高速开发平台JEECG框架初探
开发指南专题二:JEECG微云高速开发平台JEECG框架初探 2.JEECG框架初探 2.1演示系统 打开浏览器输入JEECG演示环境界址:http://demo.jeecg.org:8090/能够看 ...
- 开发指南专题十四:JEECG微云高速开发平台MiniDao 介绍
版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/zhangdaiscott/article/details/27068645 开发指南专题十四:J ...
- 专题开发十二:JEECG微云高速开发平台-基础用户权限
专题开发十二:JEECG微云高速开发平台-基础用户权限 11.3.4自己定义button权限 Jeecg中.眼下button权限设置,是通过对平台自己封装的button标签(<t:dgFun ...
- 开发指南专题4:JEECG高速微云开发平台--JEECG开发环境的搭建
开发指南专题4:JEECG微云高速开发平台开发环境搭建 1. JEECG开发环境搭建 JEECG推荐的开发环境为Myeclipse8.5/Eclipse3.7+JDK1.6+Tomcat6.0 1.1 ...
- 开发专题指南: JEECG高速微云开发平台前言
JEECG微云高速开发平台-前言 1. 前言 1.1. 技术背景 随着WEB UI 框架(EasyUI/Jquery UI/Ext/DWZ)等的逐渐成熟,系统界面逐渐实现统一化,代码生成器也能够生成统 ...
随机推荐
- 【HDU 4547 CD操作】LCA问题 Tarjan算法
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4547 题意:模拟DOS下的cd命令,给出n个节点的目录树以及m次查询,每个查询包含一个当前目录cur和 ...
- HTML5 Canvas Arc Tutorial
HTML5 Canvas Arc Tutorial HTML5 Canvas Arc Tutorial
- hdu 5625 Clarke and chemistry
Problem Description Clarke is a patient with multiple personality disorder. One day, Clarke turned i ...
- js获取浏览器的keydown事件(附keycode码)
<script type="text/javascript" language=JavaScript charset="UTF-8"> docume ...
- .net网站开发(设计):1.什么是MVC模式
好吧我知道,应该很少人一开始学网站开发就从MVC开始,但如果你已经理解了三层架构之类的,那直接尝试强大的微软MVC网站开发模式也是挺不错的. 但其实我们学校有个实验室,那些干进去的就算是大一的学生,也 ...
- Velocity.js发布:更快的动画切换速度
Velocity.js是一款动画切换的jQuery插件,它重新实现了jQuery的$.animate()方法从而加快动画切换的速度.Velocity.js只有7k的大小,它不仅包含了$.animate ...
- ubuntu系统分区方案
一.各文件及文件夹的定义 /bin:bin是binary(二进制)的缩写.存放必要的命令 存放增加的用户程序. /bin分区,存放标准系统实用程序./boot:这里存放的是启动LINUX时使用的一些核 ...
- python 笔记3--高级特性
切片 语法 L[l:r] 取L[l],L[l+1]-L[r-2],L[r-1] L[l:r:m] 取L[l],L[l+m],L[l+2*m],L[l+3*m]-.(满足l+n*m<=r-1) t ...
- .NET进阶系列之一:C#正则表达式整理备忘
有一段时间,正则表达式学习很火热很潮流,当时在CSDN一天就能看到 好几个正则表达式的帖子,那段时间借助论坛以及Wrox Press出版的<C#字符串和正则表达式参考手册>学习了一些基础的 ...
- 设计模式--委托模式C++实现
原文章地址:http://www.cnblogs.com/zplutor/archive/2011/09/17/2179756.html [委托模式 C++实现] 我对.Net的委托模型印象很深刻,使 ...