JeeSite 4.0 说说前端的那些事(组件补充)
博客专区 > ThinkGem 的博客 > 博客详情
JeeSite 4.0 说说前端的那些事(组件补充)
ThinkGem 发表于5个月前
JeeSite 4.0 说说前端的那些事(组件补充)
  • 发表于 5个月前
  • 阅读 1989
  • 收藏 0
  • 点赞 2
  • 评论 6

移动开发云端新模式探索实践 >>>   

表单组件封装

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附加选项,逗号隔开。
	
};
  • 打赏
  • 点赞
  • 收藏
  • 分享
共有 人打赏支持
ThinkGem
粉丝 818
博文 135
码字总数 20086
作品 1
评论 (6)
xusheng1987
期待4.0发布
CH竹叶青
项目在使用Jeesite框架,有个问题:登录系统后长时间(>=30分钟)不操作系统(停留在某功能数据列表页),点击查询后,数据加载完毕,但是(正在处理,请稍后...)加载条一直存在很长时间,这个需要怎么处理?
ThinkGem

引用来自“CH竹叶青”的评论

项目在使用Jeesite框架,有个问题:登录系统后长时间(>=30分钟)不操作系统(停留在某功能数据列表页),点击查询后,数据加载完毕,但是(正在处理,请稍后...)加载条一直存在很长时间,这个需要怎么处理?
监控下请求,一般情况下先验证会话是否超期,超期后自动跳转到登录页,你加qq群交流,jeesite.com
重庆的笨笨
什么时候发布呀
时刻在奔跑
什么时候出前后端分离的文章呢
ThinkGem

引用来自“fei0825”的评论

什么时候出前后端分离的文章呢
出移动端的时候就会写,前后分离,pc端就类似于写一个移动端,处理好会话状态
×
ThinkGem
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: