文档章节

JeeSite 4.0 说说前端的那些事(组件补充)

ThinkGem
 ThinkGem
发布于 2017/12/24 22:27
字数 1286
阅读 2816
收藏 0

表单组件封装

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

ThinkGem

粉丝 1025
博文 138
码字总数 24109
作品 2
济南
架构师
私信 提问
加载中

评论(7)

啊_伟
啊_伟
能不能说下这个beetl封装的和springmvc相似的功能是怎么做到的?给个思路什么的可以吗
ThinkGem
ThinkGem

引用来自“fei0825”的评论

什么时候出前后端分离的文章呢
出移动端的时候就会写,前后分离,pc端就类似于写一个移动端,处理好会话状态
时刻在奔跑
时刻在奔跑
什么时候出前后端分离的文章呢
重庆的笨笨
重庆的笨笨
什么时候发布呀
ThinkGem
ThinkGem

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

项目在使用Jeesite框架,有个问题:登录系统后长时间(>=30分钟)不操作系统(停留在某功能数据列表页),点击查询后,数据加载完毕,但是(正在处理,请稍后...)加载条一直存在很长时间,这个需要怎么处理?
监控下请求,一般情况下先验证会话是否超期,超期后自动跳转到登录页,你加qq群交流,jeesite.com
CH竹叶青
CH竹叶青
项目在使用Jeesite框架,有个问题:登录系统后长时间(>=30分钟)不操作系统(停留在某功能数据列表页),点击查询后,数据加载完毕,但是(正在处理,请稍后...)加载条一直存在很长时间,这个需要怎么处理?
xusheng1987
xusheng1987
期待4.0发布
ThinkGem/JeeSite 4.0

引言 JeeSite 是一个 Java EE 企业级快速开发平台,基于经典技术组合(Spring Boot、Spring MVC、Apache Shiro、MyBatis、Beetl、Bootstrap、AdminLTE),在线代码生成功能,包括核心模块如:...

ThinkGem
02/25
0
0
jeesite 快速开发平台 初体验

http://www.jeesite.com/ GitHub:https://github.com/thinkgem/jeesite 开源中国:http://git.oschina.net/thinkgem/jeesite 更多文档 https://github.com/thinkgem/jeesite/tree/master/do......

晨猫
05/21
0
0
分布式系统套件的整合 - JeeSite Spring Cloud

引言 JeeSite Spring Cloud 是基于 Spring Cloud Finchley 的一个分布式系统套件的整合。 特点:用经典开发模式,开发分布式应用,两个字【简单】,一个字【快】。 技术选型 分布式系统主框架...

ThinkGem
前天
0
0
jeesite配置指南(官方文档有坑,我把坑填了!)

版权声明:欢迎转载,请注明沉默王二原创。 https://blog.csdn.net/qing_gee/article/details/72871340 昨天,远在苏州的朋友找我一起做个私活,主要用到jeesite。 说实话,开发了这么多年的...

qing_gee
2017/06/05
0
0
JeeSite环境搭建及运行和打包(master20161117)

涉及的软件: 1、phpStudy(主要用MySql) 2、maven3(用于依赖包,下面我将上传已经下载好所有依赖包的版本,保证运行正常) 具体操作: 0、前言 由于GitHub上的Release版本没有及时更新,所...

easonjim
2016/11/18
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Java 源代码和 C 源代码的运行区别

与其他程序的执行方式和编译方式不同。 Java 源代码需要进行编译成字节码后在 Java 虚拟机上运行,这样 Java 程序能够保持独立性和跨平台功特性。 请参考下图。 https://www.cwiki.us/pages...

honeymose
今天
3
0
Apache限定目录解析PHP,限制user_agent,PHP相关的配置

Apache限定目录解析PHP 配置前访问upload/index.php [root@test-a ~]# curl -x192.168.77.139:80 'www.test.com/upload/index.php'This is upload diretory 配置,/usr/local/apache2.4/......

野雪球
今天
5
0
java.util.Concurrent.Exchanger源码

类图 源码: package java.util.concurrent;import java.util.concurrent.atomic.AtomicInteger;import java.util.concurrent.atomic.AtomicReference;import java.util.concurrent......

狼王黄师傅
今天
6
0
Kubernetes里的secret最基本的用法

Secret解决了密码、token、密钥等敏感数据的配置问题,使用Secret可以避免把这些敏感数据以明文的形式暴露到镜像或者Pod Spec中。 Secret可以以Volume或者环境变量的方式使用。 使用如下命令...

JerryWang_SAP
昨天
5
0
2018-11-20学习笔记

1. python数据类型: 给变量赋值什么样的值,变量就是什么样的类型 给变量赋值整数,变量就是整数类型 给变量赋值字符串,变量就是字符串类型 123 和“123”一样吗? 在python中 单引号 与双...

laoba
昨天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部