专题开发十三:JEECG微云高速开发平台-附录

时间:2024-01-13 18:33:32

专题开发十三: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所看到的。

专题开发十三:JEECG微云高速开发平台-附录

12-2

专题开发十三:JEECG微云高速开发平台-附录

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 添加不论什么属性。