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
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
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
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 提交 By JSON v5.6.1
* @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.ajaxSubmitJson('/js/a/save', {param: 1}, function(data){ log(data) })
* @usage js.ajaxSubmitJson('/js/a/save', {param: 1}, function(data){ log(data) }, 'json', true, '正在获取数据...')
* @usage js.ajaxSubmitJson({
url: '/js/a/index', data: {id: '123', name: '456'},
callback: function(data){ log(data) }, dataType: 'json',
async: true, message: '正在获取数据...'});
*/
js.ajaxSubmitJson: function(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: '正在获取数据...'});
* @usage v5.6.1+ 以 application/json 方式提交表单
1、form 元素增加属性：enctype="application/json" 或者 enctype="json"
2、将某个 json 属性，转换为 url 参数：data-params="isNewRecord,id"
3、表单外扩展：$('form').data('extend', { ext1: 123 });
* @usage v5.7.1+ 以 application/json 方式提交表单
1、form 元素增加属性：enctype="application/json" 或者 enctype="json"
2、将某个 json 属性，转换为 url 参数：data-url-params="isNewRecord,id"
3、表单外扩展：$('form').data('jsonExtend', { ext1: 123 });
4、忽略某些参数：data-json-ignore="field1,field2"
*/
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
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
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
# 字符串操作
/**
* 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
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
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
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
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
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 打开后是否刷新重新加载
* @param lazyload 是否懒加载 v5.3.2+
*/
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
54
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
