JeeSite 4.0 说说前端的那些事(组件补充)
程序员文章站
2022-05-05 08:46:21
...
表单组件封装
validcode 验证码
<#form:validcode name="validCode" isRequired="true" isRemote="true" />
组件属性:
var p = {
id: id!name, // 验证码输入框ID
name: name!, // 验证码输入框名称(必填)
isRequired: @ObjectUtils.toBoolean(isRequired!true), // 是否必填,默认必填
dataMsgRequired: thisTag.attrs['data-msg-required'], // 必填错误提示信息
isRemote: @ObjectUtils.toBoolean(isRemote!true), // 是否支持实时远程验证
dataMsgRemote: thisTag.attrs['data-msg-remote'], // 必填错误提示信息
isLazy: @ObjectUtils.toBoolean(isLazy!false), // 是否懒加载验证码图片,原noRefresh参数
};
listselect 列表选择
<#form:listselect id="userSelect" title="用户"
url="${ctx}/sys/user/userSelect?userType=${role.userType}" allowClear="false"
checkbox="true" itemCode="userCode" itemName="userName"/>
组件属性:
var p = {
// 标签参数
id: id!, // 元素ID
path: path!, // 绑定form上model中属性的值
name: name!, // 隐藏域名称
value: value!, // 隐藏域值
labelPath: labelPath!, // 绑定form上model中属性的值
labelName: labelName!, // 标签框名称
labelValue: labelValue!, // 标签框值
class: class!'', // 标签框的CSS类名
placeholder: placeholder!, // 标签框的预期值的提示信息
dataMsgRequired: thisTag.attrs['data-msg-required'], // 必填错误提示信息
btnClass: btnClass!, // 标签框后面的按钮CSS类名
title: title!'选项', // 对话框标题
boxWidth: boxWidth!'$(top.window).width() - 100', // 对话框宽度
boxHeight: boxHeight!'$(top.window).height() - 100', // 对话框高度
url: url!, // 树结构,数据源地址 [{id, pid, name}]
readonly: @ObjectUtils.toBoolean(readonly!false), // 是否只读模式
allowInput: @ObjectUtils.toBoolean(allowInput!false), // 是否允许label框输入
allowClear: @ObjectUtils.toBoolean(allowClear!true), // 是否允许清空选择内容
checkbox: @ObjectUtils.toBoolean(checkbox!false), // 是否显示复选框,是否支持多选,如果设置canSelectParent=true则返回父节点数据
itemCode: itemCode!, // 选择后结果集中的Code属性名,返回到隐藏域的值
itemName: itemName!, // 选择后结果集中的Name属性名,返回到输入框的值
};
fileupload 文件上传
1、文件上传:
<#form:fileupload id="upload1" bizKey="${user.id}" bizType="user_upload1"
uploadType="all" class="required" readonly="false"/>
后台代码:FileUploadUtils.saveFileUpload(user.getId(), "user_upload1");
2、图片上传:
<#form:fileupload id="upload2" bizKey="${user.id}" bizType="user_upload2"
uploadType="image" class="required" readonly="false"/>
后台代码:FileUploadUtils.saveFileUpload(user.getId(), "user_upload2");
3、返回路径:
<#form:fileupload id="upload3" returnPath="true"
filePathInputId="upload3Path" fileNameInputId="upload3Name"
uploadType="image" readonly="false" maxUploadNum="3" isMini="false"/>
<#form:input name="upload3Path" class="form-control"/>
<#form:input name="upload3Name" class="form-control"/>
组件属性:
var p = {
// 标签参数
id: id!, // 元素ID
bizKey: bizKey!, // 业务表的主键值(与附件关联的业务数据)
bizType: bizType!, // 业务表的上传类型(全网唯一,推荐格式:实体名_上传类型,例如,文章图片:article_photo)
returnPath: @ObjectUtils.toBoolean(returnPath!false), // 是否是返回文件路径到输入框(默认false),可将路径直接保存到某个字段里
filePathInputId: filePathInputId!, // 设置文件URL存放的输入框的ID,当returnPath为true的时候,返回文件URL到这个输入框
fileNameInputId: fileNameInputId!, // 设置文件名称存放的输入框的ID,当returnPath为true的时候,返回文件名称到这个输入框
uploadType: uploadType!'', // 上传文件类型:all、file、image、media,若不设置,则自动根据上传文件后缀获取
class: class!'', // 标签框的CSS类名,设置 required 加入必填验证
readonly: @ObjectUtils.toBoolean(readonly!false), // 是否只读模式,只读模式下为查看模式,只允许下载
allowSuffixes: allowSuffixes!'', // 允许上传的后缀,前台的限制,不能超越file.*AllowSuffixes的设置,例如:.jpg,.png,
maxUploadNum: @ObjectUtils.toInteger(maxUploadNum!300), // 多文件下允许最多上传几个,默认300个,设置-1代表不限制
imageMaxWidth: @ObjectUtils.toInteger(imageMaxWidth!1024), // 图片压缩,最大宽度(uploadType为image生效),设置-1代表不做任何处理
imageMaxHeight: @ObjectUtils.toInteger(imageMaxHeight!768), // 图片压缩,最大宽度(uploadType为image生效),设置-1代表不做任何处理
isLazy: @ObjectUtils.toBoolean(isLazy!false), // 设置为ture需要点击上传按钮才上传文件,否则选择后就直接上传
isMini: @ObjectUtils.toBoolean(isMini!false), // 是否是精简上传窗口,无边距,无边框
preview: preview!'', // 是否显示预览按钮,接受参数:weboffice
};
imageclip 图片裁剪
<img id="avatarImg" class="profile-user-img img-responsive img-circle"
src="${@user.getAvatarUrl().replaceFirst('/ctxPath', ctxPath)}">
<#form:imageclip name="imageBase64" btnText="修改头像" btnClass="btn-block"
imageId="avatarImg" imageDefaultSrc="${ctxStatic+'/images/user1.jpg'}"
circle="true"/>
后台代码:
// 如果设置了头像,则保存头像
if (StringUtils.isNotBlank(imageBase64)){
if ("EMPTY".equals(imageBase64)){
user.setAvatar(StringUtils.EMPTY);
}else{
String imageUrl = "avatar/"+user.getUserCode()
+"."+FileUtils.getFileExtensionByImageBase64(imageBase64);
String fileName = Global.getUserfilesBaseDir(imageUrl);
FileUtils.writeToFileByImageBase64(fileName, imageBase64);
user.setAvatar(Global.USERFILES_BASE_URL + imageUrl);
}
}
组件属性:
var p = {
// 标签参数
id: id!, // 元素ID,如果不填写,则与name相同
path: path!, // 绑定form上model中属性的值
name: name!, // 元素名称,不填写
value: value!, // 元素值
class: class!'', // 隐藏域的CSS类名
btnText: btnText!'选择图片', // 按钮的名字
btnClass: btnClass!'', // 按钮的CSS类名
imageId: imageId!'', // 裁剪后base64返回到img的id
imageDefaultSrc: imageDefaultSrc!'', // 图片默认地址,清除后使用地址
circle: circle!'false', // 是否圆形图片
};
ueditor 富文本在线编辑器
<#form:ueditor name="text" maxlength="10000" height="200" class="required"
simpleToolbars="false" readonly="false" outline="false"/>
组件属性:
var p = {
// 标签参数
id: id!, // 元素ID,如果不填写,则与name相同
path: path!, // 绑定form上model中属性的值
name: name!, // 元素名称,不填写
value: value!, // 元素值
class: class!'', // 标签框的CSS类名,设置 required 加入必填验证
maxlength: maxlength!'', // 编辑器最大输入字数,为空代表无限制
height: height!'200', // 编辑器的高度,默认200
simpleToolbars: @ObjectUtils.toBoolean(simpleToolbars!false), // 是否是简单的工具条
readonly: @ObjectUtils.toBoolean(readonly!false), // 是否只读模式
outline: @ObjectUtils.toBoolean(outline!false), // 大纲视图
options: options!'', // UE附加选项,逗号隔开。
};
转载于:https://my.oschina.net/thinkgem/blog/1594326
上一篇: 记事本常用的功能介绍