文档章节

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

ThinkGem
 ThinkGem
发布于 2017/12/24 22:27
字数 1286
阅读 2270
收藏 0
点赞 3
评论 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

ThinkGem

粉丝 883
博文 136
码字总数 21994
作品 1
济南
架构师
加载中

评论(6)

ThinkGem
ThinkGem

引用来自“fei0825”的评论

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

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

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

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

easonjim
2016/11/18
0
0
JeeSite4.0,一直报这个问题,求解释

DEBUG [com.jeesite.common.io.PropertiesUtils] - Loading jeesite config: [classpath:/config/jeesite-core.yml, classpath:config/jeesite.yml, classpath:config/application.yml, clas......

陈豫
05/08
0
0
JeeSite 4.0.3 发布,企业级快速开发平台

新增 新增:core项目增加单元测试支持类 ApplicationTest.java 新增:代码生成config.xml支持自定义,放同目录下config-custom.xml文件即可覆盖 新增:shiro.allowRequestMethods 参数,可指...

ThinkGem
05/30
0
0
[急]缓存报错,内测也溢出问题

使用jeesite开发的,然后报出内存溢出还有这个缓存 ,看不太懂了 求大佬指教一下

微晨灬晨
06/28
0
0
jeesite部署时,竟然浪费了1个小时!

在家里部署jeesite,跑起来以后打开浏览器去访问可是怎么都访问不了。工程也没报错。各种尝试之后发现在家将TOMCAT 的端口改成80了 ,一直访问的是8080 所以才访问不了的。之前也想过可能是t...

无敌小学僧
2017/10/29
0
0
JeeSite 4.0 说说前端的那些事

引言 一个不得不说的话题,经过近几年的发展,Web前端开发已经不是一个新有的岗位了,前端技术发展非常迅速,技术更新换代也很快,对于前端工程师来说是一个很大的挑战“挣扎期”。 从统计来...

ThinkGem
2017/11/05
0
41
jeesite shiro+redis实现cache和session共享

jeesite这个开源框架本身集成的有shiro+redis来实现cache和session共享,但是需要修改一下文件配置即可 首先找到spring-context-shiro.xml文件 找到bean id为sessionDAO,将其修改为如下 <!...

wangxujun59
06/21
0
0
整理出一些使用比较广或者个人觉得比较好的java开源项目和资料供参考

1.整理出一些使用比较广或者个人觉得比较好的java开源项目和资料供参考。 2. 如果你觉得好但是我没有列出的开源项目请告诉我,方便我添加到列表里。 3. 如果你发现信息描述有误请联系我,我会及...

写代码的奥特曼
2017/10/23
0
0
【OSChina-MoPaaS应用开发大赛】JeeSite(JES)

应用的名称:JES 应用URL地址:http://jeesite.sturgeon.mopaas.com/index.html 应用说明及使用场景: 基于JavaEE的CMS系统,可根据企业或个人需要,在不改变服务端的前提下,搭建个性化的C...

徐林
2014/01/07
0
19

没有更多内容

加载失败,请刷新页面

加载更多

下一页

【面试题】盲人坐飞机

有100位乘客乘坐飞机,其中有一位是盲人,每位乘客都按自己的座位号就坐。由于盲人看不见自己的座位号,所以他可能会坐错位置,而自己的座位被占的乘客会随便找个座位就坐。问所有乘客都坐对...

garkey
41分钟前
0
0
谈谈神秘的ES6——(二)ES6的变量

谈谈神秘的ES6——(二)ES6的变量 我们在《零基础入门JavaScript》的时候就说过,在ES5里,变量是有弊端的,我们先来回顾一下。 首先,在ES5中,我们所有的变量都是通过关键字var来定义的。...

JandenMa
今天
1
0
arts-week1

Algorithm 594. Longest Harmonious Subsequence - LeetCode 274. H-Index - LeetCode 219. Contains Duplicate II - LeetCode 217. Contains Duplicate - LeetCode 438. Find All Anagrams ......

yysue
今天
0
0
NNS拍卖合约

前言 关于NNS的介绍,这里就不多做描述,相关的信息可以查看NNS的白皮书http://doc.neons.name/zh_CN/latest/nns_background.html。 首先nns中使用的竞价货币是sgas,关于sgas介绍可以戳htt...

红烧飞鱼
今天
1
0
Java IO类库之管道流PipeInputStream与PipeOutputStream

一、java管道流介绍 在java多线程通信中管道通信是一种重要的通信方式,在java中我们通过配套使用管道输出流PipedOutputStream和管道输入流PipedInputStream完成线程间通信。多线程管道通信的...

老韭菜
今天
0
0
用Python绘制红楼梦词云图,竟然发现了这个!

Python在数据分析中越来越受欢迎,已经达到了统计学家对R的喜爱程度,Python的拥护者们当然不会落后于R,开发了一个个好玩的数据分析工具,下面我们来看看如何使用Python,来读红楼梦,绘制小...

猫咪编程
今天
1
0
Java中 发出请求获取别人的数据(阿里云 查询IP归属地)

1.效果 调用阿里云的接口 去定位IP地址 2. 代码 /** * 1. Java中远程调用方法 * http://localhost:8080/mavenssm20180519/invokingUrl.action * @Title: invokingUrl * @Description: * @ret......

Lucky_Me
今天
1
0
protobuf学习笔记

相关文档 Protocol buffers(protobuf)入门简介及性能分析 Protobuf学习 - 入门

OSC_fly
昨天
0
0
Mybaties入门介绍

Mybaties和Hibernate是我们在Java开发中应用的比较多的两个ORM框架。当然,目前Mybaties正在慢慢取代Hibernate,这是因为相比较Hibernate而言Mybaties性能更好,响应更快,更加灵活。我们在开...

王子城
昨天
2
0
编程学习笔记之python深入之装饰器案例及说明文档[图]

编程学习笔记之python深入之装饰器案例及说明文档[图] 装饰器即在不对一个函数体进行任何修改,以及不改变整体的原本意思的情况下,增加函数功能的新函数,因为这个新函数对旧函数进行了装饰...

原创小博客
昨天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部