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"/> |
第三步：设置查询按钮
|
<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].查询按钮对应的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
12-3
12.5使用toolbar 自定义js 参数规则
第一步：定义按钮
<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微云快速开发平台-附录