组件规格说明31.docx
《组件规格说明31.docx》由会员分享，可在线阅读，更多相关《组件规格说明31.docx（278页珍藏版）》请在冰豆网上搜索。
组件规格说明31
UEP3.1页面组件用户手册
目录
UEP3.1页面组件用户手册1
目录i
PartⅠ.相关文件说明1
1.Jsp文件1
2.Js文件2
3.Action文件5
PartⅡ.组件使用详解7
1.Record7
2.AjaxDataWrap7
3.DataCenter8
4.基本页面组件9
4.1.按钮（button）9
4.2.日期（date）12
4.3.树（tree）15
4.4.region（region）19
4.5.图片轮播（imageslide，image）22
4.6.页面轮播（pageslide，page）23
4.7.accordion（accordion，section）25
4.8.分页（datasetpager）27
4.9.弹出窗口28
4.10.单文件上传（fileupload）32
4.11.多文件上传（fileuploads）35
4.12.文件下载（filedownload）35
4.13.颜色面板（colorpalette）36
4.14.进度条（progressbar）37
4.15.滑动条（slidebar）38
4.16.密码强度验证（pwdstrength）40
4.17.验证码（validatecode）41
4.18.工具条（toolbar）41
4.19.time标签（time）42
4.20.数字微调器（numberspinner）44
4.21.单选框（radio）46
4.22.弹出层48
4.23.浮层48
5.页面布局组件49
5.1.布局（layouttable，layoutregion，layoutarea）49
5.2.tab页（tabpanel，tab）52
5.3.简单布局（filllayout，fillarea）55
5.4.行布局（rowlayout）57
6.下拉组件59
6.1.下拉（drop）59
6.2.动态下拉（dynamicdrop）62
6.3.下拉树（droptree）67
6.4.增强下拉（extdrop）70
6.5.年份组件（dropnumber）74
6.6.inputbutton（inputbutton）75
6.7.inputdialog（inputdialog）80
7.freeform组件82
7.1.freeform（freeform）82
7.2.ajaxform（ajaxform）89
7.3.formgroup95
7.4.formfield96
7.5.formarea97
7.6.formdrop98
7.7.formcustom99
7.8.formdate100
7.9.formextdrop101
7.10.formdropnumber102
7.11.formdroptree103
7.12.formdyndrop104
7.13.forminputbutton105
7.14.forminputdialog107
7.15.formradiogroup109
7.16.formtime109
8.表格组件110
8.1.ajax表格（ajaxgrid）110
8.2.动态表格（datagrid）127
8.3.静态表格（staticgrid）130
8.4.树表格（treegrid）132
8.5.gridlineno136
8.6.gridfield137
8.7.griddate138
8.8.gridcheckbox139
8.9.gridbutton140
8.10.gridlink141
8.11.gridcomposite142
8.12.gridcustom142
8.13.griddrop143
8.14.griddropnumber145
8.15.griddroptree146
8.16.griddyndrop147
8.17.gridextdrop149
8.18.gridinputbutton150
8.19.gridinputdialog152
8.20.gridimg154
8.21.gridradio155
8.22.gridgroup155
8.23.gridtime156
9.菜单157
9.1.菜单（menu）157
9.2.两级滑动菜单（accordionmenu）158
9.3.三级滑动菜单（slidemenu）160
9.4.右键弹出菜单（popupmenu）161
10.高级组件164
10.1.富文本编辑器（richtext）164
10.2.ueditor（ueditor）166
10.3.fusionchart（fusionchart）168
10.4.视频播放器（videoplayer）171
11.功能组件172
11.1.部门选择（deptselect）172
11.2.人员选择（personselect）176
11.3.角色选择（roleselect）178
12.框架辅助182
12.1.校验182
12.2.多任务框架（multitask）183
13.平台提供的公共方法184
14.样式的扩展184
14.1.多主题切换184
14.2.menu菜单组件样式扩展185
15.动态添加组件194
PartⅠ.相关文件说明
1.Jsp文件
在webroot下新建demo.jsp文件，UEP中的JSP编辑器HaiyisoftJSPEditor左侧有个JspPalette，里面包括UEP平台的全部组件，该面板可以拖动，能够拖动到jsp页面的右边显示，可以根据个人习惯自己调整位置。
点击面板的组件列表，显示出该列表下的所有组件，再点击一下组件列表，会自动收缩该组件列表。
我们可以直接拖动某一组件列表中的某一组件到jsp代码相应的位置处，生成相应的代码。
内容如下：
❶pageset.jspa是JSP页面引入的资源文件
<%@pagelanguage="java"import="java.util.*"pageEncoding="GBK"%>
❶<%@includefile="/framework/include/pageset.jspa"%>
❷JSP页面引入的JS文件
❷
Demoview>
❸s:
form标签有一个action属性，该属性的值对应了相应Action类中action跳转配置的value值。
提供服务的ActionURL
❸formaction="demo">
layoutTable>
❹查询区
❹layoutRegion>
regiontitle="查询条件"collapsible="false"collapseoninit="false">
编号
100%"id="code"
name="dataWrap.query.code"upload="true"/>
姓名
100%"id="name"
name="dataWrap.query.name_LIKE"upload="true"/>
性别
100%"id="gender"
name="dataWrap.query.gender"upload="true"/>
buttonname="查询"
onclick="retrieve（）"/>
|
|
region>
layoutRegion>
❺数据展示表格组件
❺layoutArea>
ajaxgridid="ajaxgrid"name="dataWrap"height="100%"width="100%"
queryfunc="retrieve（）"supporttoexcel="true"supporttopdf="true">
gridlinenotitle="序号"width="30"/>
gridcheckboxname="checked"width="50"title="全选"/>
gridfieldname="id"title="ID"width="100"/>
gridfieldname="code"title="编号"width="100"/>
gridfieldname="name"title="姓名"width="100"maxlength="12"/>
griddropname="gender"title="性别"width="100"dropname="DEMO.STUDENT_SEX"/>
griddatename="birthday"title="出生日期"editor="datetime"width="100"/>
gridfieldname="address"title="地址"width="100"/>
gridfieldname="remark"title="备注"width="100"/>
ajaxgrid>
layoutArea>
layoutArea>
❻工具栏组件
❻toolbarheight="100%">
buttonname="添加"onclick="add（）"/>
buttonname="删除"onclick="ajaxgrid.delCheckedRecords（）"/>
buttonname="保存"onclick="save（）"/>
buttonname="查询"onclick="retrieve（）"/>
toolbar>
layoutArea>
layoutTable>
form>
view>
2.Js文件
Js文件是将前台页面的Js脚本单独存放在一个文件中，这样方便维护。
如上小节中所用的js文件为demoSript.js，其内容可以分为初始化、查询、添加记录、后台保存。
1）初始化：
functionajax_init（❶response）{
vardataWrap=❷response.getAjaxDataWrap（"dataWrap"）;
❸ajaxgrid.setData（dataWrap）;
❹vareditFlag=response.getParameter（"EDIT_FLAG"）;
}
在页面打开时，会自动执行ajax_init方法，方法名字不能自定义，这个方法是必须的。
❶Action回传页面的参数，参见PartⅡDataCenter类型
❷从DataCenter中获取相应的dataWrap数据
❸设置表格展示的数据
❹从DataCenter中获取参数
2）查询功能：
functionretrieve（）{
❶vardata=ajaxgrid.collectData（true）;
vardataArr=[];
dataArr.push（data）;
❷$.request（{
action:
"retrieve",
data:
dataArr,
success:
ajax_init
}）;
}
❶查询数据时，需要将页面数据收集上传，可以调用表格的collectData方法。
❷调用后台的retrieve方法，这里使用了ajax方法$.request,方法的写法及参数的含义如下：
$.request（{
action:
"调用的后台方法名称",
async：
true||false,//同步或者异步调用
Pageparam:
"all"||"none",//是否收集页面上的upload=”true”的值进行上传
data:
收集表格或form中的属性,//该属性为数组格式
params：
{❸}//用户自定义的参数
success:
回调方法//成功后的调用方法
}）;
❸json数据格式，对应Action中的属性名称及值或者对应Action中封装的property对象中的key及值。
3）添加功能
该方法比较简单，可以参照初始化方法ajax_init（）和查询方法retrieve（）理解
functionadd（）{
$.request（{
action:
"add",
success:
onaddcomplete
}）;
}
functiononaddcomplete（response）{
varrec=response.getAjaxDataWrap（"dataWrap"）.getData（）❶;
ajaxgrid.addRecord（rec）;❷
}
❶获取dataWrap中的单条的数据
❷表格添加一条记录
4）保存数据方法
Save方法也很简单，保存前判断是否进行校验：
if（ajaxgrid.isValid（）），然后收集数据，调用后台方法，在保存成功后，在回调方法中要重置record缓存数组：
ajaxgrid.reset（）。
functionsave（）{
if（❶ajaxgrid.isValid（））{
vargridData=❷ajaxgrid.collectData（false,"update"）;
vardataArr=[];
❸dataArr.push（gridData）;
❹$.request（{
action:
"save",
data:
dataArr,
success:
onsavecomplete
}）;
}
}
functiononsavecomplete（response）{
❺ajaxgrid.reset（）;
$.alert（'提示信息',❻response.getMessage（））;
}
❶校验表格数据是否合法
❷收集表格数据
❸将收集的数据放入数组对象中
❹调用后台方法
❺重置表格修改标志
❻获取后台传递的自定义信息
3.Action文件
和为demo.jsp提供服务的DemoAction.java,内容如下
@Namespace（"/demo"）
@ParentPackage（"framework-default"）
@Action（value="/demo",results={@Result（name="input",location="demo.jsp"）}）
publicclassDemoActionextendsAjaxAction{
privatestaticfinallongserialVersionUID=1L;
❶privateAjaxDataWrapdataWrap=newAjaxDataWrap（）;
/**
*查询操作
*/
@Override
publicvoidretrieve（）{
QueryParamListparams=❷getQueryParam（"dataWrap"）;
dataWrap.setDataList（❸调用方法查询数据，返回结果为List）;
❹responseData.setAjaxDataWrap（"dataWrap",dataWrap）;
}
/**
*添加一条记录
*@throwsException
*/
publicvoidadd（）throwsException{
❺dataWrap.setData（newDemoStudent（））;
responseData.setAjaxDataWrap（"dataWrap",dataWrap）;
}
/**
*保存操作
*/
publicvoidsave（）{
ListupdateList=this.dataWrap.getUpdateList（）;
ListinsertList=this.dataWrap.getInsertList（）;
ListdeleteList=this.dataWrap.getDeleteList（）;
❻//调用方法保存增删改列表数据
responseData.setMessage（"保存成功"）;
}
/**
*初始化
*/
@Override
protectedvoidinitTreat（）{
❼super.retrieveAfterInit=true;
❽this.dataWrap.getPageInfo（）.setRowOfPage（15）;
}
@Override
publicAjaxDataWrap❾getDataWrap（）{
returndataWrap;
}
}
在Action类的最前面我们看到一些配置信息，其中：
@Namespace（“/demo”）表示action的名字空间，和Action的value组合起来作为URL。
@ParentPackage（“framework-default”）表示所在的Action需要继承framework-default包。
@Action（value="..",results={@Result（name="..",location=".."）}）是配置的Action跳转，value的值对应了前台的JSP文件中s:
form标签的action的属性值。
Result指向了打开的jsp文件，如果location的值是以”/”打头，那么jsp文件就是从WebRoot根下开始的文件路径，否则就是从WebRoot的@Namespace（“..”）路径下的文件路径。
❶页面的数据封装，包括数据列表、单条数据、固定查询条件和分页对象，AjaxDataWrap为和ajax表格配合使用的DataWrap，比DataWrap多了增加、删除和更新记录三个列表。
❷获取指定名字的dataWrap的查询参数
❸调用方法查询数据，返回结果为List
❹向DataCenter对象中添加一个ajaxDataWrap
❺向DataCenter对象中添加单条记录
❻处理页面上传的数据
❼initTreat方法初次加载页面时调用，retrieveAfterInit表示是否执行retrieve方法
❽设置表格每页展示15条数据
❾默认DataWrap的get方法，这里必须指定泛型有具体类型。
如果页面组件使用的是这个方法返回的DataWrap，那么页面组件的name是”dataWrap”，不是这个方法返回的dataWrap的名字。
PartⅡ.组件使用详解
1.Record
概述
Record表示一条数据，类似于关系数据库中Table的一条记录，它是一个客户端内部容器，与服务器不进行直接交互。
其json结构数据为：
Record是一个JavaScript对象，除了包含我们的业务数据对应的key和value，还包含前台组件展示所用的一些属性，分别为行号、列号、标识行是否被选中、行状态等。
其中，行号用rowIndex标识，列号用cellIndex表示，是否选中用checked表示，id表示前台展示的序号
方法列表
方法名称
方法参数
方法说明
get（name）
name:
对应的业务数据字段名
获取Record中的某项数据
set（name,value）
name:
对应的业务数据字段名
value：
对应的业务数据值
设置Record中的某项数据
2.AjaxDataWrap
概述
AjaxDataWrap对象是AjaxAction中封装的AjaxDataWrap类的前台体现，该对象为Ajax表格、Ajaxfrom提供相关数据，其JSON格式描述如下：
AjaxDataWrap对象主要用来存储Ajaxgrid、ajaxform组件使用的数据，其中pageInfo分页对象，sortString为排序字符串，cachData为数据缓存标志，data为当前行数据（Record），dataList为Record对象数组
方法列表
方法名称
方法参数
方法说明
getData（）
无
获取单条数据
setData（record）
record:
一条数据
设置单条数据
getDataList（）
无
获取dataList里的数据
setDataList（recordArray）
recordArray:
record数组
设置dataList里的数据
3.DataCenter
概述
DataCenter为Ajax客户端与服务端数据交换的载体，其json格式的描述为：
其内部数据结构主要包含下行的dataWrap数据、参数、错误信息、自定义信息等。
用法
DataCenter主要封装在ajax_init以及$.request（{……}）回调函数中的参数中，如：
functionajax_init（❶response）{
varajaxDataWrap=response.getAjaxDataWrap（"dataWrap"）;
ajaxgrid.setData（response.getAjaxDataWrap（"dataWrap"））;
}
functionsave（）{
vargridData=ajaxgri
升级会员 