JeeSite 快速开发平台
官方网站
    • 平台简介
    • 架构特点
    • 技术选型
    • 功能介绍
    • 安装部署
    • 常见问题
    • 目录结构
    • 更新日志
    • Vue 文档
    • BPM 文档
    • Cloud 文档
V4 演示
Vue 演示
💖联系
  • 我要提意见、文档纠错
  • JeeSite 代码库, 请⭐Star关注
  • JeeSite Vue 代码库, 请⭐关注
  • Spring Cloud 微服务架构
  • JeeSite 手机端/移动端
  • Flowable 中国式工作流
  • OAauth2 统一认证服务器
  • 政务内外网环境中间件
  • 访问 ThinkGem 官方博客
  • 点击进入,下拉查看动态
官方网站
    • 平台简介
    • 架构特点
    • 技术选型
    • 功能介绍
    • 安装部署
    • 常见问题
    • 目录结构
    • 更新日志
    • Vue 文档
    • BPM 文档
    • Cloud 文档
V4 演示
Vue 演示
💖联系
  • 我要提意见、文档纠错
  • JeeSite 代码库, 请⭐Star关注
  • JeeSite Vue 代码库, 请⭐关注
  • Spring Cloud 微服务架构
  • JeeSite 手机端/移动端
  • Flowable 中国式工作流
  • OAauth2 统一认证服务器
  • 政务内外网环境中间件
  • 访问 ThinkGem 官方博客
  • 点击进入,下拉查看动态
  • 快速了解

  • 开发手册

    • 快速开始、安装部署
    • 代码生成、表结构 ER 图
    • 持久层、@Table、多数据源
    • 业务层、数据权限、库事务
    • 控制层、功能权限、Shiro
    • 后台常用工具类、Utils
    • Form 表单组件、Beetl
    • Data Grid 表格组件
    • JS 常用工具和组件
      • 引言
      • 全局常用
      • 国际化、字典
      • 加载框、弹窗
      • Ajax 表单
      • 字符串操作
      • 数值类型操作
      • 日期类型操作
      • JS 模板工具
      • Cookie 操作
      • TabPage 页签
    • 修改内置登录页面
    • 国际化、多语言
    • API 接口开发
    • ★ 常见问题 ★
  • Vue 开发手册

  • 扩展功能专题

  • 云服务技术架构

  • 技术服务与支持

JS 常用工具 API、js.*、jeesite.js、Tab 页签、弹窗

# 引言

对前端 js 封装的全局小工具,如日志、弹窗、字符串、数值、日期、标签等操作。

# 全局常用

/**
 * 输出日志
 */
log(msg);

/**
 * 输出错误日志
 */
error(msg);

/**
 * URL 编码
 */
js.encodeUrl(url);

/**
 * URL 解码
 */
js.decodeUrl(url);

/**
 * 得到 IE 版本,如果是IE返回:IE版本号,否则返回:false
 * if (js.ie && js.ie <= 8){ alert('浏览器版本过低') }
 */
js.ie;

/**
 * 安全取值,复杂类型或嵌套类型时,取不到属性中的属性时不抛出异常
 * js.val(jsonObj, 'user.office.name');
 */
js.val(jsonObj, attrName);

/**
 * 返回HashCode唯一值(默认忽略大小写)
 * @param str 要获取的字符串HashCode值
 * @param caseSensitive 是否大小写敏感(默认false)
 * @usage js.hashCode(str);
 */
js.hashCode(str, caseSensitive);

/**
 * 异步加载文件,loadFile v1.0
 * js.loadFile(file文件路径, callback成功回调, error失败回调)
 * js.loadFile('js/test.js',function(){},function(data){});
 * js.loadFile(['js/test.js','css/test.css'],function(){},function(data){});
 */
js.loadFile(file, callback, error);

/**
 * 打开一个Window窗体
 */
js.windowOpen(url, name, width, height);

/**
 * 关闭当前Window窗体
 */
js.windowClose();

/**
 * 给URL地址添加参数,如果原来有参数则用&前缀,如果没有则用?前缀
 */
js.addParam(url, params);

/**
 * 获取URL地址的参数
 */
js.getParam(paramName, url);

/**
 * 移除URL地址里的某个参数
 */
js.removeParam(paramName, url);

/**
 * 查看Object的内容,手机调试用
 * @param obj
 */
js.alertObj(obj);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79

# 国际化、字典


/**
 * 获取国际化译文
 */
js.text(code, params);

/**
 * 获取字典标签
 * js.getDictLabel(${@DictUtils.getDictListJson('sys_menu_type')}, val, '未知', true)
 */
js.getDictLabel(dictListJson, value, defaultValue, inCss);

1
2
3
4
5
6
7
8
9
10
11
12

# 加载框、弹窗


/**
 * 显示加载框
 * @param message 加载框提示信息
 * @param ignoreMessageIfExists 如果已经有加载框现在,则忽略message信息的设置
 * @usage js.loading('正在保存...');
 */
js.loading(message, ignoreMessageIfExists);

/**
 * 关闭加载框
 * @param timeout 关闭延迟时间
 * @param forceClose 是否强制关闭
 * @usage js.closeLoading(1000, true);
 */
js.closeLoading(timeout, forceClose);

/**
 * 得到layer对话框对象
 * js.layer.msg();
 */
js.layer;

/**
 * 显示提示框
 * @param message 提示消息
 * @param title 提示标题
 * @param type 提示类型(success、error、warning、info)
	若不指定,则根据包含文字自动判断,可根据需要自行补充:
	1)jeesite_en.js(英文)
		'error': 'failure,error',
		'warning': 'no,not,Not,already exists',
		'success': 'success,completion'
	2)jeesite_zh_CN.js(中文)
		'error': '失败,错误,未完成',
		'warning': '不能,不允许,必须,已存在,不需要,不正确',
		'success': '成功,完成'
 * @param timeout 自动关闭毫秒(默认4000毫秒)
 */
js.showMessage(message, title, type, timeout);

/**
 * 显示错误提示框
 */
js.showErrorMessage(responseText);

/**
 * 关闭提示框
 */
js.closeMessage();

/**
 * 提示对话框
 * @param message 提示消息
 * @param options 对话框选项
 * @param closed 对话框关闭回调方法
 * @usage js.alert('你好!', function(){})
 * @usage js.alert('你好!', {icon: 2}, function(){})
 */
js.alert(message, options, closed);

/**
 * 确认对话框
 * @param message 确认信息
 * @param urlOrFunOrOpt 确认后的跳转的地址,或调用的方法,或对话框的选项(Opt为4.2.0新增)
 * @param data 如果 urlOrFunOrOpt 是地址,则该参数是调用地址的参数信息
 * @param callback 点击确定或执行 AJAX 后的回调方法
 * @param dataType 返回数据类型(默认JSON)
 * @param async 是否异步(默认true)
 * @param loadingMessage 调用 js.loading(message) 的提示信息。
 * @usage js.confirm('确认删除吗?', '/js/a/index?id=123', 
            function(data){alert('删除成功')}, 'json', true, '正在删除...');
 * @usage js.confirm('确认删除吗?', '/js/a/index', {id: '123'}, 
            function(data){alert('删除成功')}, 'json', true, '正在删除...');
 * @usage js.confirm('确认删除吗?', function(){alert('删除成功')});
 * @usage js.confirm('确认删除吗?', {
			url: '/js/a/index', data: {id: '123'}, 
			callback: function(data){alert('删除成功')}, dataType: 'json',
			async: false, message: '正在删除...', shadeClose: true });
 */
js.confirm(message, urlOrFunOrOpt, data, callback, dataType, async, loadingMessage);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82

# Ajax 表单


/**
 * AJAX 提交
 * @param urlOrOpt 请求地址,或 AJAX 的选项(Opt为4.2.0新增)
 * @param data 请求参数
 * @param callback 请求 AJAX 后的回调方法
 * @param dataType 返回数据类型(默认JSON)
 * @param async 是否异步(默认true)
 * @param message 调用 js.loading(message) 的提示信息。
 * @usage js.ajaxSubmit('/js/a/index', function(data){ log(data) })
 * @usage js.ajaxSubmit('/js/a/index', {param: 1}, function(data){ log(data) })
 * @usage js.ajaxSubmit('/js/a/index', {param: 1}, function(data){ log(data) },
            'json', true, '正在获取数据...')
 * @usage js.ajaxSubmit({
			url: '/js/a/index', data: {id: '123', name: '456'}, 
			callback: function(data){ log(data) }, dataType: 'json',
			async: true, message: '正在获取数据...'});
 */
js.ajaxSubmit(urlOrOpt, data, callback, dataType, async, message);

/**
 * AJAX 提交表单(支持文件上传)
 * @param form 表单 jQuery 对象,例如:$(form)
 * @param callbackOrOpt 请求 AJAX 后的回调方法,或 AJAX 的选项(Opt为4.2.0新增)
 * @param dataType 返回数据类型(默认JSON)
 * @param async 是否异步(默认true)
 * @param message 调用 js.loading(message) 的提示信息。
 * @usage js.ajaxSubmitForm($('#inputForm'), function(data){ log(data) })
 * @usage js.ajaxSubmitForm($('#inputForm'), function(data){ log(data) }, 'json', true, '正在获取数据...')
 * @usage js.ajaxSubmitForm($('#inputForm'), {
			callback: function(data){ log(data) }, dataType: 'json',
			async: true, message: '正在获取数据...'});
 */
js.ajaxSubmitForm(form, callbackOrOpt, dataType, async, message);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

# 字符串操作


/**
 * String两边去空格
 */
js.trim(str);

/**
 * String的startWith(正则表达式方式)
 */
js.startWith(str, start);

/**
 * String的startWith(slice方式)
 */
js.startsWith(str, prefix);

/**
 * String的endWith(正则表达式方式)
 */
js.endWith(str, end);

/**
 * String的endWith(indexOf方式)
 */
js.endsWith(str, suffix);

/**
 * 截取字符串,区别汉字和英文
 */
js.abbr(name, maxLength);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

# 数值类型操作


/**
 * 格式化数值
 * @param num 待格式化的数
 * @param cent 保留小数位数
 * @param isThousand 是否进行千分位格式化
 */
js.formatNumber(num, cent, isThousand);

/**
 * 金额格式化(千位符,小数四舍五入)金额每隔三位加一个逗号
 * @param s 要格式化的数值
 * @param n 小数位数
 */
js.formatMoney(s, n);

/**
 * 数值前补零
 */
js.numberPad(num, n);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

# 日期类型操作


/**
 * 日期格式化
 * @param date 日期 new Date()
 * @param f 格式化字符串 yyyy-MM-dd HH:mm:ss
 */
js.formatDate(date, f);

/**
 * 字符串转为日期
 * @param date
 */
js.parseDate(date);

/**
 * 日期加减
 * @param date
 * @param dadd 天数
 */
js.addDate(date, dadd);

/**
 * 快速选择日期方法
 * @param type 1今日,2本周,3本月,4本季度,5上月
 * @param beginDateId 开始日期控件的ID
 * @param endDateId	 结束日期控件的ID
 */
js.quickSelectDate(type, beginDateId, endDateId);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

# JS 模板工具


/**
 * 根据js模板生成代码,使用laytpl引擎
 * @param id 模板ID
 * @param data 模板数据(可选)
 * @param callback 如果填写,则为异步渲染
 * @usage 
 * 		模板格式: <sc ript id="dempTpl" type="text/template">//<!--
 * 					 这里写模块内容...
 * 				//--></sc ript>
 * 		调用方法: js.template('dempTpl', data);
 * 		模版语法:
 * 			输出一个普通字段,不转义html:   { { d.field } }
 * 			输出一个普通字段,并转义html:   { {= d.field } }
 * 			JavaScript脚本: { {# JavaScript statement } }
 */
js.template(id, data, callback);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# Cookie 操作


/**
 * cookie 操作
 * @param name Cookie名称
 * @param value Cookie值,填写表示设置,不填写表示获取
 * @parma options:{expires:7} 如果是数字,则expires单位为天。
 */
js.cookie(name, value, options);

1
2
3
4
5
6
7
8
9

# TabPage 页签


/**
 * 得到TabPage对象
 */
js.tabPage;

/**
 * 初始化TAB页面( 参考:demoFormTabPage.html )
 * @param id
 */
js.initTabPage(id, options);

/**
 * 添加TAB页面( 普通页面加 class="addTabPage",DataGrid加 class="btnList"
 	您可以给 tab 设定一个 id 如:data-tab-id="tab-123"
 	若强制弹出模式,设置:data-layer="true",弹窗其它选项如下:
	弹出对话框宽度:data-layer-width="500"
	弹出对话框高度:data-layer-height="400"
	弹窗后直接最大化:data-layer-full="false"
	不显示弹窗的标题:data-title="false"  v4.2.3
	弹窗遮罩层点击关闭:data-shade-close="false"  v4.2.3
	弹窗遮罩层点击关闭:data-shade-close="true"  v4.3.3
	不显示弹窗的标题:data-auto-height="true"  v4.3.3
	)
 * @param $this 		点击的 HTML 元素 jQuery 对象,例如:$('<a class="btnTool"></a>')
 * @param title 		提示标题
 * @param url	 		访问的路径
 * @param closeable	 	是否有关闭按钮,关闭页面回调方法:
 *                          v4.0.3+:function onTablePageClose(tabId, title){}
 *                          v4.2.0+:function onTabPageClose(tabId, title){}
 * @param refresh 		打开后是否刷新重新加载
 */
js.addTabPage($this, title, url, closeable, refresh);

/**
 * 获取当前TAB页面
 * @param currentTabCallback 获取之后回调方法,传入当前tab页面的contentWindow,例如:function(contentWindow){}
 */
js.getCurrentTabPage(currentTabCallback);

/**
 * 获取当前页面的上一个TAB页面,并激活上级页面
 * @param preTabCallback 获取之后回调方法,传入上一个tab页面的contentWindow,例如:function(contentWindow){}
 * @param isCloseCurrentTab 是否关闭当前页签
 */
js.getPrevTabPage(preTabCallback, isCloseCurrentTab);

/**
 * 关闭当前TAB页面,并激活上级页面
 * @param preTabCallback 关闭前的回调方法,传入上一个tab页面的contentWindow,例如:function(contentWindow){}
 */
js.closeCurrentTabPage(preTabCallback);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
进入 JeeSite 源码仓库页面,点击右上角 ⭐ Star 加星关注。

← Data Grid 表格组件 修改内置登录页面→

联系我们:s.jeesite.com  |  微信号:jeesitex  |  邮箱:jeesite@163.com
© 2013-2023 济南卓源软件有限公司 版权所有 | Theme Vdoing

关注 JeeSite 公众号,了解最新动态

  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式