-数据格式解析的回调函数,用于将返回的任意数据格式解析成 transfer 组件规定的
data 格式
+
+数据格式解析的回调函数,用于将返回的任意数据格式解析成 transfer 组件规定的
data 格式
```
diff --git a/docs/transfer/index.md b/docs/transfer/index.md
index 4a76178d..41fe33c0 100644
--- a/docs/transfer/index.md
+++ b/docs/transfer/index.md
@@ -10,7 +10,7 @@ toc: true
示例
-{{- d.include("docs/transfer/detail/demo.md") }}
+{{- d.include("/transfer/detail/demo.md") }}
API
@@ -32,13 +32,13 @@ toc: true
属性
-{{- d.include("docs/transfer/detail/options.md") }}
+{{- d.include("/transfer/detail/options.md") }}
data 格式
-{{- d.include("docs/transfer/detail/options.data.md") }}
+{{- d.include("/transfer/detail/options.data.md") }}
重载
diff --git a/docs/tree/detail/demo.md b/docs/tree/detail/demo.md
index 84a3ec1e..4d92bac2 100644
--- a/docs/tree/detail/demo.md
+++ b/docs/tree/detail/demo.md
@@ -19,7 +19,7 @@ layui.use(function(){
var util = layui.util;
// 模拟数据
- var data = [{title:'一级1',id:1,field:'name1',checked:true,spread:true,children:[{title:'二级1-1 可允许跳转',id:3,field:'name11',href:'{{d.root}}/',children:[{title:'三级1-1-3',id:23,field:'',children:[{title:'四级1-1-3-1',id:24,field:'',children:[{title:'五级1-1-3-1-1',id:30,field:''},{title:'五级1-1-3-1-2',id:31,field:''}]}]},{title:'三级1-1-1',id:7,field:'',children:[{title:'四级1-1-1-1 可允许跳转',id:15,field:'',href:'{{d.root}}/docs/'}]},{title:'三级1-1-2',id:8,field:'',children:[{title:'四级1-1-2-1',id:32,field:''}]}]},{title:'二级1-2',id:4,spread:true,children:[{title:'三级1-2-1',id:9,field:'',disabled:true},{title:'三级1-2-2',id:10,field:''}]},{title:'二级1-3',id:20,field:'',children:[{title:'三级1-3-1',id:21,field:''},{title:'三级1-3-2',id:22,field:''}]}]},{title:'一级2',id:2,field:'',spread:true,children:[{title:'二级2-1',id:5,field:'',spread:true,children:[{title:'三级2-1-1',id:11,field:''},{title:'三级2-1-2',id:12,field:''}]},{title:'二级2-2',id:6,field:'',children:[{title:'三级2-2-1',id:13,field:''},{title:'三级2-2-2',id:14,field:'',disabled:true}]}]},{title:'一级3',id:16,field:'',children:[{title:'二级3-1',id:17,field:'',fixed:true,children:[{title:'三级3-1-1',id:18,field:''},{title:'三级3-1-2',id:19,field:''}]},{title:'二级3-2',id:27,field:'',children:[{title:'三级3-2-1',id:28,field:''},{title:'三级3-2-2',id:29,field:''}]}]}];
+ var data = [{title:'一级1',id:1,field:'name1',checked:true,spread:true,children:[{title:'二级1-1 可允许跳转',id:3,field:'name11',href:'',children:[{title:'三级1-1-3',id:23,field:'',children:[{title:'四级1-1-3-1',id:24,field:'',children:[{title:'五级1-1-3-1-1',id:30,field:''},{title:'五级1-1-3-1-2',id:31,field:''}]}]},{title:'三级1-1-1',id:7,field:'',children:[{title:'四级1-1-1-1 可允许跳转',id:15,field:'',href:''}]},{title:'三级1-1-2',id:8,field:'',children:[{title:'四级1-1-2-1',id:32,field:''}]}]},{title:'二级1-2',id:4,spread:true,children:[{title:'三级1-2-1',id:9,field:'',disabled:true},{title:'三级1-2-2',id:10,field:''}]},{title:'二级1-3',id:20,field:'',children:[{title:'三级1-3-1',id:21,field:''},{title:'三级1-3-2',id:22,field:''}]}]},{title:'一级2',id:2,field:'',spread:true,children:[{title:'二级2-1',id:5,field:'',spread:true,children:[{title:'三级2-1-1',id:11,field:''},{title:'三级2-1-2',id:12,field:''}]},{title:'二级2-2',id:6,field:'',children:[{title:'三级2-2-1',id:13,field:''},{title:'三级2-2-2',id:14,field:'',disabled:true}]}]},{title:'一级3',id:16,field:'',children:[{title:'二级3-1',id:17,field:'',fixed:true,children:[{title:'三级3-1-1',id:18,field:''},{title:'三级3-1-2',id:19,field:''}]},{title:'二级3-2',id:27,field:'',children:[{title:'三级3-2-1',id:28,field:''},{title:'三级3-2-2',id:29,field:''}]}]}];
// 渲染
tree.render({
diff --git a/docs/tree/detail/options.md b/docs/tree/detail/options.md
index 6c1cbc1a..6388963f 100644
--- a/docs/tree/detail/options.md
+++ b/docs/tree/detail/options.md
@@ -153,7 +153,7 @@ text: {
-
+
[回调函数](#options.callback)
@@ -165,7 +165,7 @@ text: {
click |
-
+
节点被点击的回调函数。返回的参数如下:
@@ -185,7 +185,7 @@ click: function(obj){
oncheck |
-
+
点击复选框时的回调函数,返回的参数如下:
@@ -203,7 +203,7 @@ oncheck: function(obj){
operate |
-
+
点击节点的右侧操作图标的回调函数,返回的参数如下:
diff --git a/docs/tree/index.md b/docs/tree/index.md
index bd8b8a41..a6831057 100644
--- a/docs/tree/index.md
+++ b/docs/tree/index.md
@@ -10,7 +10,7 @@ toc: true
示例
-{{- d.include("docs/tree/detail/demo.md") }}
+{{- d.include("/tree/detail/demo.md") }}
API
@@ -32,13 +32,13 @@ toc: true
属性
-{{- d.include("docs/tree/detail/options.md") }}
+{{- d.include("/tree/detail/options.md") }}
data 格式
-{{- d.include("docs/tree/detail/options.data.md") }}
+{{- d.include("/tree/detail/options.data.md") }}
diff --git a/docs/treeTable/detail/demo.md b/docs/treeTable/detail/demo.md
index 564a954e..5f794e78 100644
--- a/docs/treeTable/detail/demo.md
+++ b/docs/treeTable/detail/demo.md
@@ -8,7 +8,7 @@
}
}}">
diff --git a/docs/treeTable/detail/options.md b/docs/treeTable/detail/options.md
index 4c4e1b4b..df2b58ac 100644
--- a/docs/treeTable/detail/options.md
+++ b/docs/treeTable/detail/options.md
@@ -46,7 +46,7 @@ treeTable.render({
tree.customName |
-
+
自定义属性名的集合,包含以下成员:
@@ -66,7 +66,7 @@ treeTable.render({
tree.view |
-
+
视图相关的属性集合,包含以下成员:
@@ -91,7 +91,7 @@ treeTable.render({
tree.data |
-
+
数据相关的属性集合,包含以下成员:
@@ -108,7 +108,7 @@ treeTable.render({
tree.async |
-
+
异步相关的属性集合,包含以下成员:
@@ -130,7 +130,7 @@ treeTable.render({
tree.callback |
-
+
事件回调相关的属性集合,包含以下成员:
diff --git a/docs/treeTable/examples/demo.md b/docs/treeTable/examples/demo.md
index 770b2969..b8b542b2 100644
--- a/docs/treeTable/examples/demo.md
+++ b/docs/treeTable/examples/demo.md
@@ -24,13 +24,13 @@ layui.use(function(){
// 渲染
var inst = treeTable.render({
elem: '#ID-treeTable-demo',
- url: '{{d.root}}/static/json/treeTable/demo-1.json', // 此处为静态模拟数据,实际使用时需换成真实接口
+ url: '/static/2.8/json/treeTable/demo-1.json', // 此处为静态模拟数据,实际使用时需换成真实接口
tree: {
/*
// 异步加载子节点
async: {
enable: true,
- url: '{{d.root}}/static/json/treeTable/demo-async.json', // 此处为静态模拟数据,实际使用时需换成真实接口
+ url: '/static/2.8/json/treeTable/demo-async.json', // 此处为静态模拟数据,实际使用时需换成真实接口
autoParam: ["parentId=id"]
}
*/
diff --git a/docs/treeTable/index.md b/docs/treeTable/index.md
index 1deaade6..49a8bc3f 100644
--- a/docs/treeTable/index.md
+++ b/docs/treeTable/index.md
@@ -12,7 +12,7 @@ toc: true
以下所有示例中演示的数据均为「静态模拟数据」,实际使用时换成您的真实接口即可。
-{{- d.include("docs/treeTable/detail/demo.md") }}
+{{- d.include("/treeTable/detail/demo.md") }}
@@ -51,7 +51,7 @@ toc: true
`table` 组件的所有基础属性均适用于 `treeTable` 组件。在此基础上,`treeTable` 还专门提供了 `tree` 属性集:
-{{- d.include("docs/treeTable/detail/options.md") }}
+{{- d.include("/treeTable/detail/options.md") }}
重载
diff --git a/docs/upload/detail/demo.md b/docs/upload/detail/demo.md
index 681ed60f..43ae2680 100644
--- a/docs/upload/detail/demo.md
+++ b/docs/upload/detail/demo.md
@@ -4,7 +4,7 @@
obj.render();
}}">
@@ -13,7 +13,7 @@
@@ -22,7 +22,7 @@
@@ -31,7 +31,7 @@
@@ -39,7 +39,7 @@
@@ -48,7 +48,7 @@
@@ -57,6 +57,6 @@
\ No newline at end of file
diff --git a/docs/upload/detail/options.md b/docs/upload/detail/options.md
index 3098e2fa..2eec9368 100644
--- a/docs/upload/detail/options.md
+++ b/docs/upload/detail/options.md
@@ -56,7 +56,7 @@
|
-
+
传递给上传接口的额外参数,支持静态赋值和动态赋值两种写法。
@@ -100,7 +100,7 @@ data: {
|
-
+
指定允许上传时校验的文件类型。可选值有:
@@ -142,7 +142,7 @@ acceptMime: 'image/jpeg, image/png` // 只筛选 jpg,png 格式图片
|
-
+
允许上传的文件后缀。一般结合 `accept` 属性来设定。
@@ -257,7 +257,7 @@ acceptMime: 'image/jpeg, image/png` // 只筛选 jpg,png 格式图片
-
+
[回调函数](#options.callback)
@@ -273,7 +273,7 @@ acceptMime: 'image/jpeg, image/png` // 只筛选 jpg,png 格式图片
|
-
+
选择文件后的回调函数。返回的参数如下
@@ -310,7 +310,7 @@ choose: function(obj){
|
-
+
文件提交上传前的回调函数。返回的参数同 choose
@@ -332,12 +332,12 @@ before: function(obj){ // obj 参数同 choose
-[progress](#option.progress)
+[progress](#options.progress)
|
-
+
执行上传请求后的回调函数。返回的参数如下:
@@ -361,12 +361,12 @@ progress: progress: function(n, elem, res, index){
-[done](#option.done)
+[done](#options.done)
|
-
+
执行单次文件上传请求后的回调函数。返回的参数如下:
@@ -392,12 +392,12 @@ done: function(res, index, upload){
-[allDone](#option.allDone)
+[allDone](#options.allDone)
|
-
+
当开启多文件 (`multiple: true` ) 且所有文件均上传完毕后的状态回调函数。
diff --git a/docs/upload/index.md b/docs/upload/index.md
index 0e22f263..95f8f7bc 100644
--- a/docs/upload/index.md
+++ b/docs/upload/index.md
@@ -12,7 +12,7 @@ toc: true
以下示例的部分上传接口由第三方网站 `https://httpbin.org` 提供,它可以模拟各类 HTTP 请求。若未配置上传接口的,每次上传都会报「请求上传接口出现异常」的提示,这属于正常现象。
-{{- d.include("docs/upload/detail/demo.md") }}
+{{- d.include("/upload/detail/demo.md") }}
@@ -88,7 +88,7 @@ var inst = upload.render({
});
```
- 重载
+ 重载
`inst.reload(options);`
@@ -113,10 +113,10 @@ inst.reload({
属性
-{{- d.include("docs/upload/detail/options.md") }}
+{{- d.include("/upload/detail/options.md") }}
- 跨域方案
+ 跨域方案
`upload` 组件支持跨域上传,一般有以下两种场景
diff --git a/docs/util/index.md b/docs/util/index.md
index 32feb70a..a71c7db0 100644
--- a/docs/util/index.md
+++ b/docs/util/index.md
@@ -10,7 +10,7 @@ toc: true
示例
-{{- d.include("docs/util/detail/demo.md") }}
+{{- d.include("/util/detail/demo.md") }}
diff --git a/docs/versions.md b/docs/versions.md
index 4b6c75f5..ca60220f 100644
--- a/docs/versions.md
+++ b/docs/versions.md
@@ -5,7 +5,7 @@ toc: true
# 更新日志
-> 导读:📑 [Layui 2.8 《升级指南》](./@note/2.8/upgrade-guide.html) · 📑 [Layui 新版文档站上线初衷](./@note/2.8/news.html)
+> 导读:📑 [Layui 2.8 《升级指南》](/notes/2.8/upgrade-guide.html) · 📑 [Layui 新版文档站上线初衷](/notes/2.8/news.html)
diff --git a/examples/layer.html b/examples/layer.html
index 3305852d..78ee296e 100644
--- a/examples/layer.html
+++ b/examples/layer.html
@@ -145,8 +145,8 @@ layui.use(['layer', 'util'], function(layer, util){
content: $('#test11111'),
maxmin: true,
shade: false,
- minStack: false, //最小化不堆叠在左下角
- id: 'page1', //定义 ID,防止重复弹出
+ minStack: false, // 最小化不堆叠在左下角
+ id: 'page-1', // 定义 ID,防止重复弹出
min: function(layero, index){
layer.msg('阻止了默认的最小化');
layer.style(index, {top: 'auto', bottom: 0});
@@ -156,10 +156,12 @@ layui.use(['layer', 'util'], function(layer, util){
}
,test6: function(){
layer.open({
- type: 2
- ,content: 'https://www.aliyun.com/activity?userCode=ap0255is'
- ,area: ['375px', '500px']
- ,maxmin: true
+ type: 2,
+ content: 'https://www.aliyun.com/activity?userCode=ap0255is',
+ area: ['375px', '500px'],
+ id: 'iframe-1',
+ hideOnClose: true, // 关闭时是否隐藏弹层容器,下次打开时直接显示原来的弹层
+ maxmin: true
});
}
,testLoading: function(){
diff --git a/examples/xingzuo.html b/examples/xingzuo.html
deleted file mode 100644
index 5fd2783e..00000000
--- a/examples/xingzuo.html
+++ /dev/null
@@ -1,104 +0,0 @@
-
-
-
-
-
-星座配对
-
-
-
-
-
-
-
-
-
-
-
- 你
-
- - 天秤座
- - 处女座
- - 水瓶座
- - 双子座
- - 双鱼座
- - 白羊座
-
-
-
-
-
-
-
\ No newline at end of file
diff --git a/package.json b/package.json
index 81b6820f..8c54400e 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "layui",
- "version": "2.8.2",
+ "version": "2.8.3",
"description": "Classic modular Front-End UI library",
"main": "dist/layui.js",
"license": "MIT",
@@ -9,7 +9,7 @@
"type": "git",
"url": "git+ssh://git@github.com/layui/layui.git"
},
- "homepage": "https://github.com/layui/layui/",
+ "homepage": "https://layui.dev",
"devDependencies": {
"gulp": "^4.0.2",
"gulp-uglify": "^3.0.2",
diff --git a/src/css/layui.css b/src/css/layui.css
index 44f6f8cc..64cf0b43 100644
--- a/src/css/layui.css
+++ b/src/css/layui.css
@@ -817,55 +817,63 @@ a cite{font-style: normal; *cursor:pointer;}
.layui-select-disabled .layui-disabled{border-color: #eee !important;}
.layui-select-disabled .layui-edge{border-top-color: #d2d2d2}
-/* 复选框 */.layui-form-checkbox{position: relative; display: inline-block; vertical-align: middle; height: 30px; line-height: 30px; margin-right: 10px; padding-right: 30px; background-color: #fff; cursor: pointer; font-size: 0; -webkit-transition: .1s linear; transition: .1s linear; box-sizing: border-box;}
+/* 复选框 */
+.layui-form-checkbox{position: relative; display: inline-block; vertical-align: middle; height: 30px; line-height: 30px; margin-right: 10px; padding-right: 30px; background-color: #fff; cursor: pointer; font-size: 0; -webkit-transition: .1s linear; transition: .1s linear; box-sizing: border-box;}
.layui-form-checkbox:hover{}
-.layui-form-checkbox *{display: inline-block; vertical-align: middle;}
-.layui-form-checkbox span{padding: 0 10px; height: 100%; font-size: 14px; border-radius: 2px 0 0 2px; background-color: #d2d2d2; color: #fff; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
-.layui-form-checkbox:hover span{background-color: #c2c2c2;}
-.layui-form-checkbox i{position: absolute; right: 0; top: 0; width: 30px; height: 28px; border: 1px solid #d2d2d2; border-left: none; border-radius: 0 2px 2px 0; color: #fff; color: rgba(255,255,255,0); font-size: 20px; text-align: center;}
-.layui-form-checkbox:hover i{border-color: #c2c2c2; color: #c2c2c2;}
-.layui-form-checked, .layui-form-checked:hover{border-color: #16b777;}
-.layui-form-checked span, .layui-form-checked:hover span{background-color: #16b777;}
-.layui-form-checked i, .layui-form-checked:hover i{color: #16b777;}
+.layui-form-checkbox > *{display: inline-block; vertical-align: middle;}
+.layui-form-checkbox > div{padding: 0 11px; height: 100%; font-size: 14px; border-radius: 2px 0 0 2px; background-color: #d2d2d2; color: #fff; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
+.layui-form-checkbox:hover > div{background-color: #c2c2c2;}
+.layui-form-checkbox > i{position: absolute; right: 0; top: 0; width: 30px; height: 100%; border: 1px solid #d2d2d2; border-left: none; border-radius: 0 2px 2px 0; color: #fff; color: rgba(255,255,255,0); font-size: 20px; text-align: center; box-sizing: border-box;}
+.layui-form-checkbox:hover > i{border-color: #c2c2c2; color: #c2c2c2;}
+.layui-form-checked,
+.layui-form-checked:hover{border-color: #16b777;}
+.layui-form-checked > div,
+.layui-form-checked:hover > div{background-color: #16b777;}
+.layui-form-checked > i,
+.layui-form-checked:hover > i{color: #16b777;}
.layui-form-item .layui-form-checkbox{margin-top: 4px;}
+.layui-form-checkbox.layui-checkbox-disabled > div{background-color: #eee !important;}
+.layui-form *[lay-checkbox]{display: none;}
-/* 复选框-默认风格 */.layui-form-checkbox[lay-skin="primary"]{height: auto!important; line-height: normal!important; min-width: 18px; min-height: 18px; border: none!important; margin-right: 0; padding-left: 28px; padding-right: 0; background: none;}
-.layui-form-checkbox[lay-skin="primary"] span{padding-left: 0; padding-right: 15px; line-height: 18px; background: none; color: #5F5F5F;}
-.layui-form-checkbox[lay-skin="primary"] i{right: auto; left: 0; width: 16px; height: 16px; line-height: 16px; border: 1px solid #d2d2d2; font-size: 12px; border-radius: 2px; background-color: #fff; -webkit-transition: .1s linear; transition: .1s linear;}
-.layui-form-checkbox[lay-skin="primary"]:hover i{border-color: #16b777; color: #fff;}
-.layui-form-checked[lay-skin="primary"] i{border-color: #16b777 !important; background-color: #16b777; color: #fff;}
-.layui-checkbox-disabled[lay-skin="primary"] span{background: none!important; color: #c2c2c2!important;}
-.layui-form-checked.layui-checkbox-disabled[lay-skin="primary"] i{background: #eee!important; border-color: #eee!important;}
-.layui-checkbox-disabled[lay-skin="primary"]:hover i{border-color: #d2d2d2;}
+/* 复选框-默认风格 */
+.layui-form-checkbox[lay-skin="primary"]{height: auto!important; line-height: normal!important; min-width: 18px; min-height: 18px; border: none!important; margin-right: 0; padding-left: 24px; padding-right: 0; background: none;}
+.layui-form-checkbox[lay-skin="primary"] > div{margin-top: -1px; padding-left: 0; padding-right: 15px; line-height: 18px; background: none; color: #5F5F5F;}
+.layui-form-checkbox[lay-skin="primary"] > i{right: auto; left: 0; width: 16px; height: 16px; line-height: 16px; border: 1px solid #d2d2d2; font-size: 12px; border-radius: 2px; background-color: #fff; -webkit-transition: .1s linear; transition: .1s linear;}
+.layui-form-checkbox[lay-skin="primary"]:hover > i{border-color: #16b777; color: #fff;}
+.layui-form-checked[lay-skin="primary"] > i{border-color: #16b777 !important; background-color: #16b777; color: #fff;}
+.layui-checkbox-disabled[lay-skin="primary"] > div{background: none!important;}
+.layui-form-checked.layui-checkbox-disabled[lay-skin="primary"] > i{background: #eee!important; border-color: #eee!important;}
+.layui-checkbox-disabled[lay-skin="primary"]:hover > i{border-color: #d2d2d2;}
.layui-form-item .layui-form-checkbox[lay-skin="primary"]{margin-top: 10px;}
-.layui-form-checkbox[lay-skin="primary"] .layui-icon-indeterminate{border-color: #16b777;}
-.layui-form-checkbox[lay-skin="primary"] .layui-icon-indeterminate:before{content: ''; display: inline-block; vertical-align: middle; position: relative; width: 50%; height: 1px; margin: -1px auto 0; background-color: #16b777;}
+.layui-form-checkbox[lay-skin="primary"] > .layui-icon-indeterminate{border-color: #16b777;}
+.layui-form-checkbox[lay-skin="primary"] > .layui-icon-indeterminate:before{content: ''; display: inline-block; vertical-align: middle; position: relative; width: 50%; height: 1px; margin: -1px auto 0; background-color: #16b777;}
-/* 复选框-开关风格 */.layui-form-switch{position: relative; display: inline-block; vertical-align: middle; height: 22px; line-height: 22px; min-width: 35px; padding: 0 5px; margin-top: 8px; border: 1px solid #d2d2d2; border-radius: 20px; cursor: pointer; background-color: #fff; -webkit-transition: .1s linear; transition: .1s linear;}
-.layui-form-switch i{position: absolute; left: 5px; top: 3px; width: 16px; height: 16px; border-radius: 20px; background-color: #d2d2d2; -webkit-transition: .1s linear; transition: .1s linear;}
-.layui-form-switch em{position: relative; top: 0; width: 25px; margin-left: 21px; padding: 0!important; text-align: center!important; color: #999!important; font-style: normal!important; font-size: 12px;}
+/* 复选框-开关风格 */
+.layui-form-switch{position: relative; display: inline-block; vertical-align: middle; height: 22px; line-height: 22px; min-width: 35px; padding: 0 5px; margin-top: 8px; border: 1px solid #d2d2d2; border-radius: 20px; cursor: pointer; background-color: #fff; -webkit-transition: .1s linear; transition: .1s linear;}
+.layui-form-switch > i{position: absolute; left: 5px; top: 3px; width: 16px; height: 16px; border-radius: 20px; background-color: #d2d2d2; -webkit-transition: .1s linear; transition: .1s linear;}
+.layui-form-switch > div{position: relative; top: 0; margin-left: 21px; padding: 0!important; text-align: center!important; color: #999!important; font-style: normal!important; font-size: 12px;}
.layui-form-onswitch{border-color: #16b777; background-color: #16b777;}
-.layui-form-onswitch i{left: 100%; margin-left: -21px; background-color: #fff;}
-.layui-form-onswitch em{margin-left: 0; margin-right: 21px; color: #fff!important;}
+.layui-form-onswitch > i{left: 100%; margin-left: -21px; background-color: #fff;}
+.layui-form-onswitch > div{margin-left: 0; margin-right: 21px; color: #fff!important;}
.layui-checkbox-disabled{border-color: #eee !important;}
-.layui-checkbox-disabled span{background-color: #eee !important;}
-.layui-checkbox-disabled i{border-color: #eee !important;}
-.layui-checkbox-disabled em{color: #d2d2d2 !important;}
-.layui-checkbox-disabled:hover i{color: #fff !important;}
+.layui-checkbox-disabled > div{color: #c2c2c2!important;}
+.layui-checkbox-disabled > i{border-color: #eee !important;}
+.layui-checkbox-disabled:hover > i{color: #fff !important;}
/* 单选框 */
-*[lay-radio]{display: none;}
.layui-form-radio{display: inline-block; vertical-align: middle; line-height: 28px; margin: 6px 10px 0 0; padding-right: 10px; cursor: pointer; font-size: 0;}
-.layui-form-radio *{display: inline-block; vertical-align: middle; font-size: 14px;}
-.layui-form-radio>i{margin-right: 8px; font-size: 22px; color: #c2c2c2;}
+.layui-form-radio > *{display: inline-block; vertical-align: middle; font-size: 14px;}
+.layui-form-radio > i{margin-right: 8px; font-size: 22px; color: #c2c2c2;}
.layui-form-radioed,
-.layui-form-radioed>i,
-.layui-form-radio:hover *{color: #16b777;}
-.layui-radio-disabled>i{color: #eee !important;}
-.layui-radio-disabled *{color: #c2c2c2!important;}
+.layui-form-radioed > i,
+.layui-form-radio:hover > *{color: #16b777;}
+.layui-radio-disabled > i{color: #eee !important;}
+.layui-radio-disabled > *{color: #c2c2c2!important;}
+.layui-form *[lay-radio]{display: none;}
-/* 表单方框风格 */.layui-form-pane .layui-form-label{width: 110px; padding: 8px 15px; height: 38px; line-height: 20px; border-width: 1px; border-style: solid; border-radius: 2px 0 0 2px; text-align: center; background-color: #fafafa; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; box-sizing: border-box;}
+/* 表单方框风格 */
+.layui-form-pane .layui-form-label{width: 110px; padding: 8px 15px; height: 38px; line-height: 20px; border-width: 1px; border-style: solid; border-radius: 2px 0 0 2px; text-align: center; background-color: #fafafa; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; box-sizing: border-box;}
.layui-form-pane .layui-input-inline{margin-left: -1px;}
.layui-form-pane .layui-input-block{margin-left: 110px; left: -1px;}
.layui-form-pane .layui-input{border-radius: 0 2px 2px 0;}
diff --git a/src/css/modules/code.css b/src/css/modules/code.css
index 0ae944fd..348a8e61 100644
--- a/src/css/modules/code.css
+++ b/src/css/modules/code.css
@@ -50,7 +50,7 @@ html #layuicss-skincodecss{display:none; position: absolute; width:1989px;}
.layui-code-copy:hover .layui-icon{color: #16b777;}
.layui-code-view:hover > .layui-code-copy{display: block;}
.layui-code-copy-offset{margin-right: 17px;}
-.layui-code-preview .layui-code-copy{display: none !important;}
+.layui-code-preview > .layui-code-view > .layui-code-copy{display: none !important;}
/* 全屏风格 */
.layui-code-full{position: fixed; left: 0; top: 0; z-index: 1111111; width: 100%; height: 100%; background-color: #fff;}
diff --git a/src/layui.js b/src/layui.js
index 9b676cc4..f6507b24 100644
--- a/src/layui.js
+++ b/src/layui.js
@@ -16,7 +16,7 @@
};
var Layui = function(){
- this.v = '2.8.2'; // Layui 版本号
+ this.v = '2.8.3'; // Layui 版本号
};
// 识别预先可能定义的指定全局对象
@@ -787,9 +787,38 @@
var that = this;
return that.event.call(that, modName, events, EV_REMOVE);
};
-
+
+ // 防抖
+ Layui.prototype.debounce = function (func, wait) {
+ var timeout;
+ return function () {
+ var context = this;
+ var args = arguments;
+ clearTimeout(timeout);
+ timeout = setTimeout(function () {
+ func.apply(context, args);
+ }, wait);
+ }
+ };
+
+ // 节流
+ Layui.prototype.throttle = function (func, wait) {
+ var cooldown = false;
+ return function () {
+ var context = this;
+ var args = arguments;
+ if (!cooldown) {
+ func.apply(context, args);
+ cooldown = true;
+ setTimeout(function () {
+ cooldown = false;
+ }, wait);
+ }
+ }
+ };
+
// exports layui
win.layui = new Layui();
-
+
}(window); // gulp build: layui-footer
diff --git a/src/modules/code.js b/src/modules/code.js
index 92b8dd2b..3db86394 100644
--- a/src/modules/code.js
+++ b/src/modules/code.js
@@ -98,7 +98,7 @@ layui.define(['lay', 'util', 'element', 'form'], function(exports){
event: function(el, type){
typeof options.onCopy === 'function' ? options.onCopy(finalCode) : function(){
try {
- navigator.clipboard.writeText(finalCode).then(function(){
+ navigator.clipboard.writeText(util.unescape(finalCode)).then(function(){
layer.msg('已复制', {
icon: 1
});
diff --git a/src/modules/form.js b/src/modules/form.js
index 1ce93847..41428288 100644
--- a/src/modules/form.js
+++ b/src/modules/form.js
@@ -16,36 +16,37 @@ layui.define(['lay', 'layer', 'util'], function(exports){
var Form = function(){
this.config = {
+ // 内置的验证规则
verify: {
required: [
- /[\S]+/
- ,'必填项不能为空'
+ /[\S]+/,
+ '必填项不能为空'
+ ],
+ phone: [
+ /^1\d{10}$/,
+ '请输入正确的手机号'
+ ],
+ email: [
+ /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/,
+ '邮箱格式不正确'
+ ],
+ url: [
+ /^(#|(http(s?)):\/\/|\/\/)[^\s]+\.[^\s]+$/,
+ '链接格式不正确'
+ ],
+ number: function(value){
+ if(isNaN(value)) return '只能填写数字';
+ },
+ date: [
+ /^(\d{4})[-\/](\d{1}|0\d{1}|1[0-2])([-\/](\d{1}|0\d{1}|[1-2][0-9]|3[0-1]))*$/,
+ '日期格式不正确'
+ ],
+ identity: [
+ /(^\d{15}$)|(^\d{17}(x|X|\d)$)/,
+ '请输入正确的身份证号'
]
- ,phone: [
- /^1\d{10}$/
- ,'请输入正确的手机号'
- ]
- ,email: [
- /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/
- ,'邮箱格式不正确'
- ]
- ,url: [
- /^(#|(http(s?)):\/\/|\/\/)[^\s]+\.[^\s]+$/
- ,'链接格式不正确'
- ]
- ,number: function(value){
- if(!value || isNaN(value)) return '只能填写数字'
- }
- ,date: [
- /^(\d{4})[-\/](\d{1}|0\d{1}|1[0-2])([-\/](\d{1}|0\d{1}|[1-2][0-9]|3[0-1]))*$/
- ,'日期格式不正确'
- ]
- ,identity: [
- /(^\d{15}$)|(^\d{17}(x|X|\d)$)/
- ,'请输入正确的身份证号'
- ]
- }
- ,autocomplete: null // 全局 autocomplete 状态。null 表示不干预
+ },
+ autocomplete: null // 全局 autocomplete 状态。 null 表示不干预
};
};
@@ -639,29 +640,43 @@ layui.define(['lay', 'layer', 'util'], function(exports){
// 勾选
reElem.on('click', function(){
+ var othis = $(this);
var filter = check.attr('lay-filter') // 获取过滤器
- var title = (check.attr('title')||'').split('|');
+ var title = (
+ othis.next('*[lay-checkbox]')[0]
+ ? othis.next().html()
+ : check.attr('title') || ''
+ );
+ var skin = check.attr('lay-skin') || 'primary';
+ // 开关
+ title = skin === 'switch' ? title.split('|') : [title];
+
+ // 禁用
if(check[0].disabled) return;
+ // 半选
if (check[0].indeterminate) {
check[0].indeterminate = false;
reElem.find(CLASS.SUBTRA).removeClass(CLASS.SUBTRA).addClass('layui-icon-ok')
}
-
+ // 开关
check[0].checked ? (
- check[0].checked = false
- ,reElem.removeClass(RE_CLASS[1]).find('em').text(title[1])
+ check[0].checked = false,
+ reElem.removeClass(RE_CLASS[1]),
+ skin === 'switch' && reElem.children('div').html(title[1])
) : (
- check[0].checked = true
- ,reElem.addClass(RE_CLASS[1]).find('em').text(title[0])
+ check[0].checked = true,
+ reElem.addClass(RE_CLASS[1]),
+ skin === 'switch' && reElem.children('div').html(title[0])
);
+ // 事件
layui.event.call(check[0], MOD_NAME, RE_CLASS[2]+'('+ filter +')', {
- elem: check[0]
- ,value: check[0].value
- ,othis: reElem
+ elem: check[0],
+ value: check[0].value,
+ othis: reElem
});
});
};
@@ -670,11 +685,16 @@ layui.define(['lay', 'layer', 'util'], function(exports){
checks.each(function(index, check){
var othis = $(this);
var skin = othis.attr('lay-skin') || 'primary';
- var title = $.trim(check.title || function(){ // 向下兼容 lay-text 属性
+ var title = util.escape($.trim(check.title || function(){ // 向下兼容 lay-text 属性
return check.title = othis.attr('lay-text') || '';
- }());
+ }()));
var disabled = this.disabled;
+ // 若存在标题模板,则优先读取标题模板
+ if(othis.next('[lay-checkbox]')[0]){
+ title = othis.next().html() || '';
+ }
+
// 若为开关,则对 title 进行分隔解析
title = skin === 'switch' ? title.split('|') : [title];
@@ -684,27 +704,26 @@ layui.define(['lay', 'layer', 'util'], function(exports){
if(typeof othis.attr('lay-ignore') === 'string') return othis.show();
// 替代元素
- var hasRender = othis.next('.' + RE_CLASS[0])
- ,reElem = $([''
- ,function(){ // 不同风格的内容
+ var hasRender = othis.next('.' + RE_CLASS[0]);
+ var reElem = $([' ',
+ function(){ // 不同风格的内容
var type = {
// 复选框
"checkbox": [
- (title[0] ? (' '+ util.escape(title[0]) +'') : '')
- ,' '
+ (title[0] ? (' '+ title[0] +' ') : (skin === 'primary' ? '' : ' ')),
+ ' '
].join(''),
-
// 开关
- "switch": ' '+ ((check.checked ? title[0] : title[1]) || '') +''
+ "switch": ' '+ ((check.checked ? title[0] : title[1]) || '') +' '
};
return type[skin] || type['checkbox'];
- }()
- ,' '].join(''));
+ }(),
+ ' '].join(''));
hasRender[0] && hasRender.remove(); // 如果已经渲染,则Rerender
othis.after(reElem);
@@ -714,11 +733,14 @@ layui.define(['lay', 'layer', 'util'], function(exports){
// 单选框
,radio: function(elem){
- var CLASS = 'layui-form-radio', ICON = ['', '']
- ,radios = elem || elemForm.find('input[type=radio]')
+ var CLASS = 'layui-form-radio';
+ var ICON = ['layui-icon-radio', 'layui-icon-circle'];
+ var radios = elem || elemForm.find('input[type=radio]');
- ,events = function(reElem){
- var radio = $(this), ANIM = 'layui-anim-scaleSpring';
+ // 事件
+ var events = function(reElem){
+ var radio = $(this);
+ var ANIM = 'layui-anim-scaleSpring';
reElem.on('click', function(){
var name = radio[0].name, forms = radio.parents(ELEM);
@@ -728,44 +750,45 @@ layui.define(['lay', 'layer', 'util'], function(exports){
if(radio[0].disabled) return;
layui.each(sameRadio, function(){
- var next = $(this).next('.'+CLASS);
+ var next = $(this).next('.' + CLASS);
this.checked = false;
- next.removeClass(CLASS+'ed');
- next.find('.layui-icon').removeClass(ANIM).html(ICON[1]);
+ next.removeClass(CLASS + 'ed');
+ next.find('.layui-icon').removeClass(ANIM + ' ' + ICON[0]).addClass(ICON[1]);
});
radio[0].checked = true;
- reElem.addClass(CLASS+'ed');
- reElem.find('.layui-icon').addClass(ANIM).html(ICON[0]);
+ reElem.addClass(CLASS + 'ed');
+ reElem.find('.layui-icon').addClass(ANIM + ' ' + ICON[0]);
layui.event.call(radio[0], MOD_NAME, 'radio('+ filter +')', {
- elem: radio[0]
- ,value: radio[0].value
- ,othis: reElem
+ elem: radio[0],
+ value: radio[0].value,
+ othis: reElem
});
});
};
+ // 初始渲染
radios.each(function(index, radio){
- var othis = $(this), hasRender = othis.next('.' + CLASS), disabled = this.disabled;
+ var othis = $(this), hasRender = othis.next('.' + CLASS);
+ var disabled = this.disabled;
if(typeof othis.attr('lay-ignore') === 'string') return othis.show();
hasRender[0] && hasRender.remove(); // 如果已经渲染,则Rerender
// 替代元素
- var reElem = $(['' // 禁用状态
- ,' '+ ICON[radio.checked ? 0 : 1] +''
- ,' '+ function(){
+ var reElem = $([' ', // 禁用状态
+ ' ',
+ ' '+ function(){
var title = util.escape(radio.title || '');
- if(typeof othis.next().attr('lay-radio') === 'string'){
+ if(othis.next('[lay-radio]')[0]){
title = othis.next().html();
- // othis.next().remove();
}
- return title
- }() +' '
- ,' '].join(''));
+ return title;
+ }() +' ',
+ ' '].join(''));
othis.after(reElem);
events.call(this, reElem);
@@ -838,7 +861,7 @@ layui.define(['lay', 'layer', 'util'], function(exports){
var verifyStr = othis.attr('lay-verify') || '';
var vers = verifyStr.split('|');
var verType = othis.attr('lay-vertype'); // 提示方式
- var value = othis.val();
+ var value = $.trim(othis.val());
othis.removeClass(DANGER); // 移除警示样式
@@ -861,12 +884,13 @@ layui.define(['lay', 'layer', 'util'], function(exports){
errorText = errorText || rule[1];
+ // 获取自定义必填项提示文本
if(thisVer === 'required'){
errorText = othis.attr('lay-reqtext') || errorText;
}
// 若为必填项或者非空命中校验,则阻止提交,弹出提示
- if(isTrue){
+ if(isTrue && (thisVer === 'required' || (value && thisVer !== 'required'))){
// 提示层风格
if(verType === 'tips'){
layer.tips(errorText, function(){
@@ -881,7 +905,7 @@ layui.define(['lay', 'layer', 'util'], function(exports){
layer.alert(errorText, {title: '提示', shadeClose: true});
}
// 若返回的为字符或数字,则自动弹出默认提示框;否则由 verify 方法中处理提示
- else if(/\bstring|number\b/.test(typeof errorText)){
+ else if(/\b(string|number)\b/.test(typeof errorText)){
layer.msg(errorText, {icon: 5, shift: 6});
}
diff --git a/src/modules/lay.js b/src/modules/lay.js
index f597a6c2..09f87f6d 100644
--- a/src/modules/lay.js
+++ b/src/modules/lay.js
@@ -4,51 +4,52 @@
;!function(window){ // gulp build: lay-header
"use strict";
- var MOD_NAME = 'lay' //模块名
- ,document = window.document
+ var MOD_NAME = 'lay'; // 模块名
+ var document = window.document;
- //DOM查找
- ,lay = function(selector){
- return new LAY(selector);
- }
+ // 元素查找
+ var lay = function(selector){
+ return new Class(selector);
+ };
- // DOM 构造器
- ,LAY = function(selector){
- var index = 0;
- var nativeDOM = typeof selector === 'object' ? function(){
+ // 构造器
+ var Class = function(selector){
+ var that = this;
+ var elem = typeof selector === 'object' ? function(){
// 仅适配简单元素对象
return layui.isArray(selector) ? selector : [selector];
}() : (
this.selector = selector,
document.querySelectorAll(selector || null)
);
- for(; index < nativeDOM.length; index++){
- this.push(nativeDOM[index]);
- }
+
+ lay.each(elem, function(index, item){
+ that.push(elem[index]);
+ });
};
/*
lay 对象操作
*/
- LAY.prototype = [];
- LAY.prototype.constructor = LAY;
+ Class.fn = Class.prototype = [];
+ Class.fn.constructor = Class;
- //普通对象深度扩展
+ // 普通对象深度扩展
lay.extend = function(){
- var ai = 1
- ,length
- ,args = arguments
- ,clone = function(target, obj){
- target = target || (layui.type(obj) === 'array' ? [] : {}); //目标对象
+ var ai = 1;
+ var length;
+ var args = arguments;
+ var clone = function(target, obj){
+ target = target || (layui.type(obj) === 'array' ? [] : {}); // 目标对象
for(var i in obj){
- //如果值为普通对象,则进入递归,继续深度合并
+ // 若值为普通对象,则进入递归,继续深度合并
target[i] = (obj[i] && obj[i].constructor === Object)
? clone(target[i], obj[i])
: obj[i];
}
return target;
- }
+ };
args[0] = typeof args[0] === 'object' ? args[0] : {};
length = args.length
@@ -61,39 +62,29 @@
return args[0];
};
- //lay 模块版本
- lay.v = '1.0.8';
-
- //ie版本
+ // ie 版本
lay.ie = function(){
var agent = navigator.userAgent.toLowerCase();
return (!!window.ActiveXObject || "ActiveXObject" in window) ? (
- (agent.match(/msie\s(\d+)/) || [])[1] || '11' //由于 ie11 并没有 msie 的标识
+ (agent.match(/msie\s(\d+)/) || [])[1] || '11' // 由于 ie11 并没有 msie 的标识
) : false;
}();
-
-
-
-
/**
* 获取 layui 常见方法,以便用于组件单独版
*/
lay.layui = layui || {};
- lay.getPath = layui.cache.dir; //获取当前 JS 所在目录
- lay.stope = layui.stope; //中止冒泡
- lay.each = function(){ //遍历
+ lay.getPath = layui.cache.dir; // 获取当前 JS 所在目录
+ lay.stope = layui.stope; // 中止冒泡
+ lay.each = function(){ // 遍历
layui.each.apply(layui, arguments);
return this;
};
+
-
-
-
-
- //数字前置补零
+ // 数字前置补零
lay.digit = function(num, length){
if(!(typeof num === 'string' || typeof num === 'number')) return '';
@@ -106,7 +97,7 @@
return num < Math.pow(10, length) ? str + num : num;
};
- //创建元素
+ // 创建元素
lay.elem = function(elemName, attr){
var elem = document.createElement(elemName);
lay.each(attr || {}, function(key, value){
@@ -115,22 +106,22 @@
return elem;
};
- //当前页面是否存在滚动条
+ // 当前页面是否存在滚动条
lay.hasScrollbar = function(){
return document.body.scrollHeight > (window.innerHeight || document.documentElement.clientHeight);
};
- //元素定位
+ // 元素定位
lay.position = function(elem, elemView, obj){
if(!elemView) return;
obj = obj || {};
- //如果绑定的是 document 或 body 元素,则直接获取鼠标坐标
+ // 如果绑定的是 document 或 body 元素,则直接获取鼠标坐标
if(elem === document || elem === lay('body')[0]){
obj.clickType = 'right';
}
- //绑定绑定元素的坐标
+ // 绑定绑定元素的坐标
var rect = obj.clickType === 'right' ? function(){
var e = obj.e || window.event || {};
return {
@@ -140,62 +131,62 @@
,bottom: e.clientY
}
}() : elem.getBoundingClientRect()
- ,elemWidth = elemView.offsetWidth //控件的宽度
- ,elemHeight = elemView.offsetHeight //控件的高度
+ ,elemWidth = elemView.offsetWidth // 控件的宽度
+ ,elemHeight = elemView.offsetHeight // 控件的高度
- //滚动条高度
+ // 滚动条高度
,scrollArea = function(type){
type = type ? 'scrollLeft' : 'scrollTop';
return document.body[type] | document.documentElement[type];
}
- //窗口宽高
+ // 窗口宽高
,winArea = function(type){
return document.documentElement[type ? 'clientWidth' : 'clientHeight']
}, margin = 5, left = rect.left, top = rect.bottom;
- //相对元素居中
+ // 相对元素居中
if(obj.align === 'center'){
left = left - (elemWidth - elem.offsetWidth)/2;
} else if(obj.align === 'right'){
left = left - elemWidth + elem.offsetWidth;
}
- //判断右侧是否超出边界
+ // 判断右侧是否超出边界
if(left + elemWidth + margin > winArea('width')){
- left = winArea('width') - elemWidth - margin; //如果超出右侧,则将面板向右靠齐
+ left = winArea('width') - elemWidth - margin; // 如果超出右侧,则将面板向右靠齐
}
- //左侧是否超出边界
+ // 左侧是否超出边界
if(left < margin) left = margin;
- //判断底部和顶部是否超出边界
+ // 判断底部和顶部是否超出边界
if(top + elemHeight + margin > winArea()){
- //优先顶部是否有足够区域显示完全
+ // 优先顶部是否有足够区域显示完全
if(rect.top > elemHeight + margin){
- top = rect.top - elemHeight - margin*2; //顶部有足够的区域显示
+ top = rect.top - elemHeight - margin*2; // 顶部有足够的区域显示
} else {
- //如果面板是鼠标右键弹出,且顶部没有足够区域显示,则将面板向底部靠齐
+ // 如果面板是鼠标右键弹出,且顶部没有足够区域显示,则将面板向底部靠齐
if(obj.clickType === 'right'){
top = winArea() - elemHeight - margin*2;
- if(top < 0) top = 0; //不能溢出窗口顶部
+ if(top < 0) top = 0; // 不能溢出窗口顶部
} else {
top = margin; // 位置计算逻辑完备性处理
}
}
}
- //定位类型
+ // 定位类型
var position = obj.position;
if(position) elemView.style.position = position;
- //设置坐标
+ // 设置坐标
elemView.style.left = left + (position === 'fixed' ? 0 : scrollArea(1)) + 'px';
elemView.style.top = top + (position === 'fixed' ? 0 : scrollArea()) + 'px';
- //防止页面无滚动条时,又因为弹出面板而出现滚动条导致的坐标计算偏差
+ // 防止页面无滚动条时,又因为弹出面板而出现滚动条导致的坐标计算偏差
if(!lay.hasScrollbar()){
var rect1 = elemView.getBoundingClientRect();
- //如果弹出面板的溢出窗口底部,则表示将出现滚动条,此时需要重新计算坐标
+ // 如果弹出面板的溢出窗口底部,则表示将出现滚动条,此时需要重新计算坐标
if(!obj.SYSTEM_RELOAD && (rect1.bottom + margin) > winArea()){
obj.SYSTEM_RELOAD = true;
setTimeout(function(){
@@ -226,7 +217,7 @@
}
};
- //元素是否属于顶级元素(document 或 body)
+ // 元素是否属于顶级元素(document 或 body)
lay.isTopElem = function(elem){
var topElems = [document, lay('body')[0]]
,matched = false;
@@ -237,9 +228,15 @@
});
return matched;
};
+
+
+ /*
+ * lay 元素操作
+ */
- //追加字符
- LAY.addStr = function(str, new_str){
+
+ // 追加字符
+ Class.addStr = function(str, new_str){
str = str.replace(/\s+/, ' ');
new_str = new_str.replace(/\s+/, ' ').split(' ');
lay.each(new_str, function(ii, item){
@@ -250,8 +247,8 @@
return str.replace(/^\s|\s$/, '');
};
- //移除值
- LAY.removeStr = function(str, new_str){
+ // 移除值
+ Class.removeStr = function(str, new_str){
str = str.replace(/\s+/, ' ');
new_str = new_str.replace(/\s+/, ' ').split(' ');
lay.each(new_str, function(ii, item){
@@ -263,50 +260,44 @@
return str.replace(/\s+/, ' ').replace(/^\s|\s$/, '');
};
- //查找子元素
- LAY.prototype.find = function(selector){
+ // 查找子元素
+ Class.fn.find = function(selector){
var that = this;
- var index = 0, arr = []
- ,isObject = typeof selector === 'object';
-
+ var elem = [];
+ var isObject = typeof selector === 'object';
+
this.each(function(i, item){
- var nativeDOM = isObject ? item.contains(selector) : item.querySelectorAll(selector || null);
- for(; index < nativeDOM.length; index++){
- arr.push(nativeDOM[index]);
- }
- that.shift();
+ var children = isObject && item.contains(selector)
+ ? selector
+ : item.querySelectorAll(selector || null);
+
+ lay.each(children, function(index, child){
+ elem.push(child);
+ });
});
-
- if(!isObject){
- that.selector = (that.selector ? that.selector + ' ' : '') + selector
- }
-
- lay.each(arr, function(i, item){
- that.push(item);
- });
-
- return that;
+
+ return lay(elem);
};
- //DOM遍历
- LAY.prototype.each = function(fn){
+ // 元素遍历
+ Class.fn.each = function(fn){
return lay.each.call(this, this, fn);
};
- //添加css类
- LAY.prototype.addClass = function(className, type){
+ // 添加 className
+ Class.fn.addClass = function(className, type){
return this.each(function(index, item){
- item.className = LAY[type ? 'removeStr' : 'addStr'](item.className, className)
+ item.className = Class[type ? 'removeStr' : 'addStr'](item.className, className)
});
};
- //移除 css 类
- LAY.prototype.removeClass = function(className){
+ // 移除 className
+ Class.fn.removeClass = function(className){
return this.addClass(className, true);
};
- //是否包含 css 类
- LAY.prototype.hasClass = function(className){
+ // 是否包含 css 类
+ Class.fn.hasClass = function(className){
var has = false;
this.each(function(index, item){
if(new RegExp('\\b'+ className +'\\b').test(item.className)){
@@ -316,10 +307,10 @@
return has;
};
- //添加或获取 css style
- LAY.prototype.css = function(key, value){
- var that = this
- ,parseValue = function(v){
+ // 添加或获取 css style
+ Class.fn.css = function(key, value){
+ var that = this;
+ var parseValue = function(v){
return isNaN(v) ? v : (v +'px');
};
return (typeof key === 'string' && value === undefined) ? function(){
@@ -331,28 +322,28 @@
});
};
- //添加或获取宽度
- LAY.prototype.width = function(value){
+ // 添加或获取宽度
+ Class.fn.width = function(value){
var that = this;
return value === undefined ? function(){
- if(that.length > 0) return that[0].offsetWidth; //此处还需做兼容
+ if(that.length > 0) return that[0].offsetWidth; // 此处还需做兼容
}() : that.each(function(index, item){
that.css('width', value);
});
};
- //添加或获取高度
- LAY.prototype.height = function(value){
+ // 添加或获取高度
+ Class.fn.height = function(value){
var that = this;
return value === undefined ? function(){
- if(that.length > 0) return that[0].offsetHeight; //此处还需做兼容
+ if(that.length > 0) return that[0].offsetHeight; // 此处还需做兼容
}() : that.each(function(index, item){
that.css('height', value);
});
};
- //添加或获取属性
- LAY.prototype.attr = function(key, value){
+ // 添加或获取属性
+ Class.fn.attr = function(key, value){
var that = this;
return value === undefined ? function(){
if(that.length > 0) return that[0].getAttribute(key);
@@ -361,15 +352,15 @@
});
};
- //移除属性
- LAY.prototype.removeAttr = function(key){
+ // 移除属性
+ Class.fn.removeAttr = function(key){
return this.each(function(index, item){
item.removeAttribute(key);
});
};
- //设置或获取 HTML 内容
- LAY.prototype.html = function(html){
+ // 设置或获取 HTML 内容
+ Class.fn.html = function(html){
var that = this;
return html === undefined ? function(){
if(that.length > 0) return that[0].innerHTML;
@@ -378,8 +369,8 @@
});
};
- //设置或获取值
- LAY.prototype.val = function(value){
+ // 设置或获取值
+ Class.fn.val = function(value){
var that = this;
return value === undefined ? function(){
if(that.length > 0) return that[0].value;
@@ -388,8 +379,8 @@
});
};
- //追加内容
- LAY.prototype.append = function(elem){
+ // 追加内容
+ Class.fn.append = function(elem){
return this.each(function(index, item){
typeof elem === 'object'
? item.appendChild(elem)
@@ -397,15 +388,15 @@
});
};
- //移除内容
- LAY.prototype.remove = function(elem){
+ // 移除内容
+ Class.fn.remove = function(elem){
return this.each(function(index, item){
elem ? item.removeChild(elem) : item.parentNode.removeChild(item);
});
};
- //事件绑定
- LAY.prototype.on = function(eventName, fn){
+ // 事件绑定
+ Class.fn.on = function(eventName, fn){
return this.each(function(index, item){
item.attachEvent ? item.attachEvent('on' + eventName, function(e){
e.target = e.srcElement;
@@ -414,8 +405,8 @@
});
};
- //解除事件
- LAY.prototype.off = function(eventName, fn){
+ // 解除事件
+ Class.fn.off = function(eventName, fn){
return this.each(function(index, item){
item.detachEvent
? item.detachEvent('on'+ eventName, fn)
@@ -423,12 +414,12 @@
});
};
- //暴露 lay 到全局作用域
+ // export
window.lay = lay;
- //如果在 layui 体系中
+ // 输出为 layui 模块
if(window.layui && layui.define){
- layui.define(function(exports){ //layui 加载
+ layui.define(function(exports){
exports(MOD_NAME, lay);
});
}
diff --git a/src/modules/layer.js b/src/modules/layer.js
index 5c93b853..1acb6934 100644
--- a/src/modules/layer.js
+++ b/src/modules/layer.js
@@ -255,7 +255,7 @@ doms.anim = {
doms.SHADE = 'layui-layer-shade';
doms.MOVE = 'layui-layer-move';
-//默认配置
+// 默认配置
Class.pt.config = {
type: 0,
shade: 0.3,
@@ -265,16 +265,16 @@ Class.pt.config = {
offset: 'auto',
area: 'auto',
closeBtn: 1,
- time: 0, //0表示不自动关闭
+ icon: -1,
+ time: 0, // 0 表示不自动关闭
zIndex: 19891014,
maxWidth: 360,
anim: 0,
- isOutAnim: true, //退出动画
- minStack: true, //最小化堆叠
- icon: -1,
+ isOutAnim: true, // 退出动画
+ minStack: true, // 最小化堆叠
moveType: 1,
resize: true,
- scrollbar: true, //是否允许浏览器滚动条
+ scrollbar: true, // 是否允许浏览器滚动条
tips: 2
};
@@ -382,25 +382,45 @@ Class.pt.vessel = function(conType, callback){
return that;
};
-//创建骨架
+// 创建骨架
Class.pt.creat = function(){
- var that = this
- ,config = that.config
- ,times = that.index, nodeIndex
- ,content = config.content
- ,conType = typeof content === 'object'
- ,body = $('body');
+ var that = this;
+ var config = that.config;
+ var times = that.index, nodeIndex;
+ var content = config.content;
+ var conType = typeof content === 'object';
+ var body = $('body');
- if(config.id && $('.'+ doms[0]).find('#'+ config.id)[0]) return;
+ // 若 id 对应的弹层已经存在,则不重新创建
+ if(config.id && $('.'+ doms[0]).find('#'+ config.id)[0]){
+ return (function(){
+ var layero = $('#'+ config.id).closest('.'+ doms[0]);
+ var index = layero.attr('times');
+ var options = layero.data('config');
+ var elemShade = $('#'+ doms.SHADE + index);
+
+ var maxminStatus = layero.data('maxminStatus') || {};
+ // 若弹层为最小化状态,则点击目标元素时,自动还原
+ if(maxminStatus === 'min'){
+ layer.restore(index);
+ } else if(options.hideOnClose){
+ elemShade.show();
+ layero.show();
+ };
+ })();
+ };
+
+ // 是否移除活动元素的焦点
if(config.removeFocus) {
document.activeElement.blur(); // 将原始的聚焦节点失焦
}
+ // 初始化 area 属性
if(typeof config.area === 'string'){
config.area = config.area === 'auto' ? ['', ''] : [config.area, ''];
}
- //anim兼容旧版shift
+ // anim 兼容旧版 shift
if(config.shift){
config.anim = config.shift;
}
@@ -500,13 +520,8 @@ Class.pt.creat = function(){
});
};
- // 记录关闭动画
- if(config.isOutAnim){
- that.layero.data({
- isOutAnim: true,
- anim: config.anim
- });
- }
+ // 记录配置信息
+ that.layero.data('config', config);
};
// 当前实例的 resize 事件
@@ -1025,8 +1040,6 @@ layer.style = function(index, options, limit){
// 最小化
layer.min = function(index, options){
- options = options || {};
-
var layero = $('#'+ doms[0] + index);
var maxminStatus = layero.data('maxminStatus');
@@ -1034,8 +1047,10 @@ layer.min = function(index, options){
if(maxminStatus === 'max') layer.restore(index); // 若当前为最大化,则先还原后再最小化
layero.data('maxminStatus', 'min');
+ options = options || layero.data('config') || {};
var shadeo = $('#'+ doms.SHADE + index);
+ var elemMin = layero.find('.layui-layer-min');
var titHeight = layero.find(doms[1]).outerHeight() || 0;
var minLeft = layero.attr('minLeft'); // 最小化时的横坐标
var hasMinLeft = typeof minLeft === 'string'; // 是否已经赋值过最小化坐标
@@ -1077,7 +1092,7 @@ layer.min = function(index, options){
layero.attr('position', position);
layer.style(index, settings, true);
- layero.find('.layui-layer-min').hide();
+ elemMin.hide();
layero.attr('type') === 'page' && layero.find(doms[4]).hide();
ready.rescollbar(index);
@@ -1157,7 +1172,10 @@ layer.close = function(index, callback){
) : $('#'+ doms[0] + index)
}();
var type = layero.attr('type');
- var data = layero.data() || {};
+ var options = layero.data('config') || {};
+ var hideOnClose = options.id && options.hideOnClose; // 是否关闭时移除弹层容器
+
+ if(!layero[0]) return;
// 关闭动画
var closeAnim = ({
@@ -1165,11 +1183,19 @@ layer.close = function(index, callback){
slideLeft: 'layer-anim-slide-left-out',
slideUp: 'layer-anim-slide-up-out',
slideRight: 'layer-anim-slide-right-out'
- })[data.anim] || 'layer-anim-close';
-
- if(!layero[0]) return;
-
- var WRAP = 'layui-layer-wrap', remove = function(){
+ })[options.anim] || 'layer-anim-close';
+
+ // 移除主容器
+ var remove = function(){
+ var WRAP = 'layui-layer-wrap';
+
+ // 是否关闭时隐藏弹层容器
+ if(hideOnClose){
+ layero.removeClass('layer-anim '+ closeAnim);
+ return layero.hide();
+ }
+
+ // 是否为页面捕获层
if(type === ready.type[1] && layero.attr('conType') === 'object'){
layero.children(':not(.'+ doms[5] +')').remove();
var wrap = layero.find('.'+WRAP);
@@ -1178,7 +1204,7 @@ layer.close = function(index, callback){
}
wrap.css('display', wrap.data('display')).removeClass(WRAP);
} else {
- //低版本IE 回收 iframe
+ // 低版本 IE 回收 iframe
if(type === ready.type[2]){
try {
var iframe = $('#'+ doms[4] + index)[0];
@@ -1201,13 +1227,18 @@ layer.close = function(index, callback){
delete ready.events.resize[index];
}
};
+ // 移除遮罩
+ var removeShade = (function fn(){
+ $('#'+ doms.SHADE + index)[
+ hideOnClose ? 'hide' : 'remove'
+ ]();
+ })();
// 是否允许关闭动画
- if(data.isOutAnim){
+ if(options.isOutAnim){
layero.addClass('layer-anim '+ closeAnim);
}
- $('#layui-layer-moves, #'+ doms.SHADE + index).remove();
layer.ie == 6 && ready.reselect();
ready.rescollbar(index);
@@ -1217,7 +1248,7 @@ layer.close = function(index, callback){
ready.minStackArr.push(layero.attr('minLeft'));
}
- if((layer.ie && layer.ie < 10) || !layero.data('isOutAnim')){
+ if((layer.ie && layer.ie < 10) || !options.isOutAnim){
remove()
} else {
setTimeout(function(){
diff --git a/src/modules/table.js b/src/modules/table.js
index 1c8e42f1..1712f5d7 100644
--- a/src/modules/table.js
+++ b/src/modules/table.js
@@ -1674,22 +1674,22 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
if(!height) return;
- //减去列头区域的高度
- bodyHeight = parseFloat(height) - (that.layHeader.outerHeight() || 38) - 1; //此处的数字常量是为了防止容器处在隐藏区域无法获得高度的问题,暂时只对默认尺寸的表格做支持。
+ // 减去列头区域的高度 --- 此处的数字常量是为了防止容器处在隐藏区域无法获得高度的问题,暂时只对默认尺寸表格做支持
+ bodyHeight = parseFloat(height) - (that.layHeader.outerHeight() || 39) - 1;
- //减去工具栏的高度
+ // 减去工具栏的高度
if(options.toolbar){
bodyHeight -= (that.layTool.outerHeight() || 50);
}
- //减去统计栏的高度
+ // 减去统计栏的高度
if(options.totalRow){
- bodyHeight -= (that.layTotal.outerHeight() || 40);
+ bodyHeight -= (that.layTotal.outerHeight() || 40) - 1; // 减掉一个共用的 border width
}
- //减去分页栏的高度
+ // 减去分页栏的高度
if(options.page || options.pagebar){
- bodyHeight -= (that.layPage.outerHeight() || 43);
+ bodyHeight -= (that.layPage.outerHeight() || 43) - 1;
}
if (options.maxHeight) {
@@ -2140,11 +2140,13 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
// 复选框选择(替代元素的 click 事件)
that.elem.on('click', 'input[name="layTableCheckbox"]+', function(){
- var checkbox = $(this).prev()
- ,children = that.layBody.find('input[name="layTableCheckbox"]')
- ,index = checkbox.parents('tr').eq(0).data('index')
- ,checked = checkbox[0].checked
- ,isAll = checkbox.attr('lay-filter') === 'layTableAllChoose';
+ var othis = $(this);
+ var td = othis.closest('td');
+ var checkbox = othis.prev();
+ var children = that.layBody.find('input[name="layTableCheckbox"]');
+ var index = checkbox.parents('tr').eq(0).data('index');
+ var checked = checkbox[0].checked;
+ var isAll = checkbox.attr('lay-filter') === 'layTableAllChoose';
if(checkbox[0].disabled) return;
@@ -2167,14 +2169,19 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
MOD_NAME, 'checkbox('+ filter +')',
commonMember.call(checkbox[0], {
checked: checked,
- type: isAll ? 'all' : 'one'
+ type: isAll ? 'all' : 'one',
+ getCol: function(){ // 获取当前列的表头配置信息
+ return that.col(td.data('key'));
+ }
})
);
});
// 单选框选择
that.elem.on('click', 'input[lay-type="layTableRadio"]+', function(){
- var radio = $(this).prev();
+ var othis = $(this);
+ var td = othis.closest('td');
+ var radio = othis.prev();
var checked = radio[0].checked;
var index = radio.parents('tr').eq(0).data('index');
@@ -2191,30 +2198,33 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
radio[0],
MOD_NAME, 'radio('+ filter +')',
commonMember.call(radio[0], {
- checked: checked
+ checked: checked,
+ getCol: function(){ // 获取当前列的表头配置信息
+ return that.col(td.data('key'));
+ }
})
);
});
// 行事件
- that.layBody.on('mouseenter', 'tr', function(){ //鼠标移入行
+ that.layBody.on('mouseenter', 'tr', function(){ // 鼠标移入行
var othis = $(this);
var index = othis.index();
- if(othis.data('off')) return; //不触发事件
+ if(othis.data('off')) return; // 不触发事件
that.layBody.find('tr:eq('+ index +')').addClass(ELEM_HOVER)
- }).on('mouseleave', 'tr', function(){ //鼠标移出行
+ }).on('mouseleave', 'tr', function(){ // 鼠标移出行
var othis = $(this);
var index = othis.index();
- if(othis.data('off')) return; //不触发事件
+ if(othis.data('off')) return; // 不触发事件
that.layBody.find('tr:eq('+ index +')').removeClass(ELEM_HOVER)
- }).on('click', 'tr', function(){ //单击行
+ }).on('click', 'tr', function(){ // 单击行
setRowEvent.call(this, 'row');
- }).on('dblclick', 'tr', function(){ //双击行
+ }).on('dblclick', 'tr', function(){ // 双击行
setRowEvent.call(this, 'rowDouble');
- }).on('contextmenu', 'tr', function(e){ //菜单
+ }).on('contextmenu', 'tr', function(e){ // 菜单
if (!options.defaultContextmenu) e.preventDefault();
setRowEvent.call(this, 'rowContextmenu');
- });;
+ });
// 创建行单击、双击、菜单事件
var setRowEvent = function(eventType){
@@ -2304,20 +2314,29 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
$(this).remove(); // 移除编辑状态
});
- // 单元格触发编辑的事件
+ // 表格主体单元格触发编辑的事件
that.layBody.on(options.editTrigger, 'td', function(e){
renderGridEdit(this, e)
}).on('mouseenter', 'td', function(){
- gridExpand.call(this)
+ showGridExpandIcon.call(this)
}).on('mouseleave', 'td', function(){
- gridExpand.call(this, 'hide');
+ showGridExpandIcon.call(this, 'hide');
});
- //单元格展开图标
- var ELEM_GRID = 'layui-table-grid', ELEM_GRID_DOWN = 'layui-table-grid-down', ELEM_GRID_PANEL = 'layui-table-grid-panel'
- ,gridExpand = function(hide){
- var othis = $(this)
- ,elemCell = othis.children(ELEM_CELL);
+ // 表格合计栏单元格 hover 显示展开图标
+ that.layTotal.on('mouseenter', 'td', function(){
+ showGridExpandIcon.call(this)
+ }).on('mouseleave', 'td', function(){
+ showGridExpandIcon.call(this, 'hide');
+ });
+
+ // 显示单元格展开图标
+ var ELEM_GRID = 'layui-table-grid';
+ var ELEM_GRID_DOWN = 'layui-table-grid-down';
+ var ELEM_GRID_PANEL = 'layui-table-grid-panel';
+ var showGridExpandIcon = function(hide){
+ var othis = $(this);
+ var elemCell = othis.children(ELEM_CELL);
if(othis.data('off')) return; //不触发事件
@@ -2331,12 +2350,11 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
othis.append(' ');
}
};
-
- //单元格展开事件
- that.layBody.on('click', '.'+ ELEM_GRID_DOWN, function(e){
- var othis = $(this)
- ,td = othis.parent()
- ,elemCell = td.children(ELEM_CELL);
+ // 单元格内容展开
+ var gridExpand = function(e){
+ var othis = $(this);
+ var td = othis.parent();
+ var elemCell = td.children(ELEM_CELL);
that.tipsIndex = layer.tips([
''
- ,elemCell.html()
- ,' '
- ,''
+ }() +'">',
+ elemCell.html(),
+ '',
+ ' '
].join(''), elemCell[0], {
- tips: [3, '']
- ,time: -1
- ,anim: -1
- ,maxWidth: (device.ios || device.android) ? 300 : that.elem.width()/2
- ,isOutAnim: false
- ,skin: 'layui-table-tips'
- ,success: function(layero, index){
+ tips: [3, ''],
+ time: -1,
+ anim: -1,
+ maxWidth: (device.ios || device.android) ? 300 : that.elem.width()/2,
+ isOutAnim: false,
+ skin: 'layui-table-tips',
+ success: function(layero, index){
layero.find('.layui-table-tips-c').on('click', function(){
layer.close(index);
});
@@ -2366,11 +2384,21 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
});
layui.stope(e);
+ };
+
+ // 表格主体单元格展开事件
+ that.layBody.on('click', '.'+ ELEM_GRID_DOWN, function(e){
+ gridExpand.call(this, e);
+ });
+ // 表格合计栏单元格展开事件
+ that.layTotal.on('click', '.'+ ELEM_GRID_DOWN, function(e){
+ gridExpand.call(this, e);
});
// 行工具条操作事件
var toolFn = function(type){
var othis = $(this);
+ var td = othis.closest('td');
var index = othis.parents('tr').eq(0).data('index');
layui.event.call(
@@ -2378,7 +2406,10 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
MOD_NAME,
(type || 'tool') + '('+ filter +')',
commonMember.call(this, {
- event: othis.attr('lay-event')
+ event: othis.attr('lay-event'),
+ getCol: function(){ // 获取当前列的表头配置信息
+ return that.col(td.data('key'));
+ }
})
);
// 设置当前行选中样式
@@ -2672,7 +2703,7 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
table.eachCols(id, function(i3, item3){
if(item3.field && item3.type == 'normal'){
// 不导出隐藏列
- if(item3.hide){
+ if(item3.hide || item3.ignoreExport){
if(i1 == 0) fieldsIsHide[item3.field] = true; // 记录隐藏列
return;
}
diff --git a/src/modules/treeTable.js b/src/modules/treeTable.js
index 40cf0f9d..c3bd6958 100644
--- a/src/modules/treeTable.js
+++ b/src/modules/treeTable.js
@@ -142,6 +142,10 @@ layui.define(['table'], function (exports) {
retData[dataName] = that.flatToTree(retData[dataName]);
}
+ if (parseDataThat.autoSort && parseDataThat.initSort && parseDataThat.initSort.type) {
+ layui.sort(retData[dataName], parseDataThat.initSort.field, parseDataThat.initSort.type === 'desc', true)
+ }
+
that.initData(retData[dataName]);
return retData;
@@ -155,7 +159,7 @@ layui.define(['table'], function (exports) {
options.data = that.flatToTree(options.data);
}
if (options.initSort && options.initSort.type) {
- options.data = layui.sort(options.data, options.initSort.field, options.initSort.type === 'desc')
+ layui.sort(options.data, options.initSort.field, options.initSort.type === 'desc', true)
}
that.initData(options.data);
}
@@ -224,8 +228,8 @@ layui.define(['table'], function (exports) {
flexIconOpen: ' ', // 打开时候的折叠图标
showIcon: true, // 是否显示图标(节点类型图标)
icon: '', // 节点图标,如果设置了这个属性或者数据中有这个字段信息,不管打开还是关闭都以这个图标的值为准
- iconClose: ' ', // 打开时候的图标
- iconOpen: ' ', // 关闭时候的图标
+ iconClose: ' ', // 关闭时候的图标
+ iconOpen: ' ', // 打开时候的图标
iconLeaf: ' ', // 叶子节点的图标
showFlexIconIfNotParent: false, // 当节点不是父节点的时候是否显示折叠图标
dblClickExpand: true, // 双击节点时,是否自动展开父节点的标识
@@ -401,34 +405,43 @@ layui.define(['table'], function (exports) {
that.initData(item1[childrenKey] || [], dataIndex);
});
- parentIndex || updateCache(tableId, childrenKey);
+ updateCache(tableId, childrenKey, data);
return data;
}
+ // 与 tableId 有关带防抖的方法
+ var debounceFn = (function () {
+ var fn = {};
+ return function (tableId, func, wait) {
+ fn[tableId] = fn[tableId] || layui.debounce(func, wait);
+ return fn[tableId];
+ }
+ })()
+
+ // 优化参数,添加一个 getNodeByIndex 方法 只传 表格id 和行 dataIndex 分几步优化 todo
var expandNode = function (treeNode, expandFlag, sonSign, focus, callbackFlag) {
// treeNode // 需要展开的节点
var trElem = treeNode.trElem;
- var tableViewElem = trElem.closest(ELEM_VIEW);
- var tableViewFilterId = tableViewElem.attr('lay-filter');
- var tableId = tableViewElem.attr('lay-id');
- var options = table.getOptions(tableId);
+ var tableViewElem = treeNode.tableViewElem || trElem.closest(ELEM_VIEW);
+ var tableId = treeNode.tableId || tableViewElem.attr('lay-id');
+ var options = treeNode.options || table.getOptions(tableId);
+ var dataIndex = treeNode.dataIndex || trElem.attr('lay-data-index'); // 可能出现多层
+ var treeTableThat = getThisTable(tableId);
+
var treeOptions = options.tree || {};
var customName = treeOptions.customName || {};
var isParentKey = customName.isParent;
- var trIndex = trElem.attr('lay-data-index'); // 可能出现多层
- var treeTableThat = getThisTable(tableId);
- var tableData = treeTableThat.getTableData();
- var trData = treeTableThat.getNodeDataByIndex(trIndex);
-
- var dataLevel = trElem.data('level');
- var dataLevelNew = (dataLevel || 0) + 1;
+ var trData = treeTableThat.getNodeDataByIndex(dataIndex);
// 后续调优:对已经展开的节点进行展开和已经关闭的节点进行关闭应该做优化减少不必要的代码执行 todo
var isToggle = layui.type(expandFlag) !== 'boolean';
var trExpand = isToggle ? !trData[LAY_EXPAND] : expandFlag;
var retValue = trData[isParentKey] ? trExpand : null;
+ if (retValue === null) {
+ return retValue;
+ }
if (callbackFlag && trExpand != trData[LAY_EXPAND] && (!trData[LAY_ASYNC_STATUS] || trData[LAY_ASYNC_STATUS] === 'local')) {
var beforeExpand = treeOptions.callback.beforeExpand;
@@ -442,33 +455,46 @@ layui.define(['table'], function (exports) {
var trExpanded = trData[LAY_HAS_EXPANDED]; // 展开过,包括异步加载
// 找到表格中的同类节点(需要找到lay-data-index一致的所有行)
- var trsElem = tableViewElem.find('tr[lay-data-index="' + trIndex + '"]');
+ var trsElem = tableViewElem.find('tr[lay-data-index="' + dataIndex + '"]');
// 处理折叠按钮图标
var flexIconElem = trsElem.find('.layui-table-tree-flexIcon');
flexIconElem.html(trExpand ? treeOptions.view.flexIconOpen : treeOptions.view.flexIconClose)
trData[isParentKey] && flexIconElem.css('visibility', 'visible');
// 处理节点图标
- if (treeOptions.view.showIcon && trData[isParentKey] && !trData.icon && !treeOptions.view.icon) {
- var nodeIconElem = trsElem.find('.layui-table-tree-nodeIcon');
- nodeIconElem.html(trExpand ? treeOptions.view.iconOpen : treeOptions.view.iconClose);
- }
+ treeOptions.view.showIcon && trsElem.find('.layui-table-tree-nodeIcon:not(.layui-table-tree-iconCustom,.layui-table-tree-iconLeaf)')
+ .html(trExpand ? treeOptions.view.iconOpen : treeOptions.view.iconClose);
- var childNodes = trData[customName.children] || []; // 测试用后续需要改成子节点的字段名称
+ var childNodes = trData[customName.children] || [];
// 处理子节点展示与否
if (trExpand) {
// 展开
if (trExpanded) { // 已经展开过
- trData[LAY_EXPAND] = trExpand;
- tableViewElem.find(childNodes.map(function (value, index, array) {
+ trsElem.nextAll(childNodes.map(function (value, index, array) {
return 'tr[lay-data-index="' + value[LAY_DATA_INDEX] + '"]'
}).join(',')).removeClass(HIDE);
+ trData[LAY_EXPAND] = trExpand;
layui.each(childNodes, function (i1, item1) {
- if (sonSign && !isToggle) { // 非状态切换的情况下
+ if (!item1[isParentKey]) {
+ return;
+ }
+
+ if (sonSign && !isToggle && !item1[LAY_EXPAND]) { // 非状态切换的情况下
// 级联展开子节点
- expandNode({trElem: tableViewElem.find('tr[lay-data-index="' + item1[LAY_DATA_INDEX] + '"]').first()}, expandFlag, sonSign, focus, callbackFlag);
- } else if (item1[LAY_EXPAND]) {
- // 级联展开
- expandNode({trElem: tableViewElem.find('tr[lay-data-index="' + item1[LAY_DATA_INDEX] + '"]').first()}, true);
+ expandNode({
+ dataIndex: item1[LAY_DATA_INDEX],
+ trElem: tableViewElem.find('tr[lay-data-index="' + item1[LAY_DATA_INDEX] + '"]').first(),
+ tableViewElem: tableViewElem,
+ tableId: tableId,
+ options: options,
+ }, expandFlag, sonSign, focus, callbackFlag);
+ } else if (item1[LAY_EXPAND]) { // 初始化级联展开
+ expandNode({
+ dataIndex: item1[LAY_DATA_INDEX],
+ trElem: tableViewElem.find('tr[lay-data-index="' + item1[LAY_DATA_INDEX] + '"]').first(),
+ tableViewElem: tableViewElem,
+ tableId: tableId,
+ options: options,
+ }, true);
}
})
} else {
@@ -539,24 +565,26 @@ layui.define(['table'], function (exports) {
trExpanded = trData[LAY_HAS_EXPANDED] = true;
if (childNodes.length) {
// 判断是否需要排序
- if (options.initSort && !options.url) {
+ if (options.initSort && (!options.url || options.autoSort)) {
var initSort = options.initSort;
if (initSort.type) {
- childNodes = trData[customName.children] = layui.sort(childNodes, initSort.field, initSort.type === 'desc');
+ layui.sort(childNodes, initSort.field, initSort.type === 'desc', true);
} else {
// 恢复默认
- childNodes = trData[customName.children] = layui.sort(childNodes, table.config.indexName);
+ layui.sort(childNodes, table.config.indexName, null, true);
}
}
treeTableThat.initData(trData[customName.children], trData[LAY_DATA_INDEX]);
// 将数据通过模板得出节点的html代码
- var str2 = table.getTrHtml(tableId, childNodes, null, null, trIndex);
+ var str2 = table.getTrHtml(tableId, childNodes, null, null, dataIndex);
var str2Obj = {
trs: $(str2.trs.join('')),
trs_fixed: $(str2.trs_fixed.join('')),
trs_fixed_r: $(str2.trs_fixed_r.join(''))
}
+ var dataLevel = dataIndex.split('-').length - 1;
+ var dataLevelNew = (dataLevel || 0) + 1;
layui.each(childNodes, function (childIndex, childItem) {
str2Obj.trs.eq(childIndex).attr({
'data-index': childItem[LAY_DATA_INDEX],
@@ -575,9 +603,9 @@ layui.define(['table'], function (exports) {
})
})
- tableViewElem.find(ELEM_MAIN).find('tbody tr[lay-data-index="' + trIndex + '"]').after(str2Obj.trs);
- tableViewElem.find(ELEM_FIXL).find('tbody tr[lay-data-index="' + trIndex + '"]').after(str2Obj.trs_fixed);
- tableViewElem.find(ELEM_FIXR).find('tbody tr[lay-data-index="' + trIndex + '"]').after(str2Obj.trs_fixed_r);
+ tableViewElem.find(ELEM_MAIN).find('tbody tr[lay-data-index="' + dataIndex + '"]').after(str2Obj.trs);
+ tableViewElem.find(ELEM_FIXL).find('tbody tr[lay-data-index="' + dataIndex + '"]').after(str2Obj.trs_fixed);
+ tableViewElem.find(ELEM_FIXR).find('tbody tr[lay-data-index="' + dataIndex + '"]').after(str2Obj.trs_fixed_r);
// 初始化新增的节点中的内容
layui.each(str2Obj, function (key, item) {
@@ -587,30 +615,43 @@ layui.define(['table'], function (exports) {
if (sonSign && !isToggle) { // 非状态切换的情况下
// 级联展开/关闭子节点
layui.each(childNodes, function (i1, item1) {
- expandNode({trElem: tableViewElem.find('tr[lay-data-index="' + item1[LAY_DATA_INDEX] + '"]').first()}, expandFlag, sonSign, focus, callbackFlag);
+ expandNode({
+ dataIndex: item1[LAY_DATA_INDEX],
+ trElem: tableViewElem.find('tr[lay-data-index="' + item1[LAY_DATA_INDEX] + '"]').first(),
+ tableViewElem: tableViewElem,
+ tableId: tableId,
+ options: options,
+ }, expandFlag, sonSign, focus, callbackFlag);
})
}
}
}
} else {
trData[LAY_EXPAND] = trExpand;
- // 折叠
+ // 关闭
if (sonSign && !isToggle) { // 非状态切换的情况下
layui.each(childNodes, function (i1, item1) {
- expandNode({trElem: tableViewElem.find('tr[lay-data-index="' + item1[LAY_DATA_INDEX] + '"]').first()}, expandFlag, sonSign, focus, callbackFlag);
+ expandNode({
+ dataIndex: item1[LAY_DATA_INDEX],
+ trElem: tableViewElem.find('tr[lay-data-index="' + item1[LAY_DATA_INDEX] + '"]').first(),
+ tableViewElem: tableViewElem,
+ tableId: tableId,
+ options: options,
+ }, expandFlag, sonSign, focus, callbackFlag);
});
tableViewElem.find(childNodes.map(function (value, index, array) { // 只隐藏直接子节点,其他由递归的处理
return 'tr[lay-data-index="' + value[LAY_DATA_INDEX] + '"]'
}).join(',')).addClass(HIDE);
} else {
- var childNodesFlat = treeTableThat.treeToFlat(childNodes, trData[customName.id], trIndex);
+ var childNodesFlat = treeTableThat.treeToFlat(childNodes, trData[customName.id], dataIndex);
tableViewElem.find(childNodesFlat.map(function (value, index, array) {
return 'tr[lay-data-index="' + value[LAY_DATA_INDEX] + '"]'
}).join(',')).addClass(HIDE);
}
-
}
- table.resize(tableId);
+ debounceFn(tableId, function () {
+ treeTable.resize(tableId);
+ }, 25)();
if (callbackFlag && trData[LAY_ASYNC_STATUS] !== 'loading') {
var onExpand = treeOptions.callback.onExpand;
@@ -643,7 +684,9 @@ layui.define(['table'], function (exports) {
var options = that.getOptions();
var tableViewElem = options.elem.next();
- return expandNode({trElem: tableViewElem.find('tr[lay-data-index="' + index + '"]').first()}, expandFlag, sonSign, null, callbackFlag)
+ return expandNode({
+ trElem: tableViewElem.find('tr[lay-data-index="' + index + '"]').first()
+ }, expandFlag, sonSign, null, callbackFlag)
};
/**
@@ -662,18 +705,21 @@ layui.define(['table'], function (exports) {
var options = that.getOptions();
var treeOptions = options.tree;
var tableView = options.elem.next();
+ var isParentKey = treeOptions.customName.isParent;
if (!expandFlag) {
// 关闭所有
// 将所有已经打开的节点的状态设置为关闭,
- that.updateStatus(null, {LAY_EXPAND: false}); // 只处理当前页,如果需要处理全部表格,需要用treeTable.updateStatus
+ that.updateStatus(null, function (d) {
+ if (d[isParentKey]) {
+ d[LAY_EXPAND] = false;
+ }
+ }) // {LAY_EXPAND: false}); // 只处理当前页,如果需要处理全部表格,需要用treeTable.updateStatus
// 隐藏所有非顶层的节点
tableView.find('.layui-table-box tbody tr[data-level!="0"]').addClass(HIDE);
- // 处理顶层节点的图标
- var trLevel0 = tableView.find('tbody tr[data-level="0"]');
- trLevel0.find('.layui-table-tree-flexIcon').html(treeOptions.view.flexIconClose);
- treeOptions.view.showIcon && trLevel0.find('.layui-table-tree-nodeIcon').html(treeOptions.view.iconClose);
+ tableView.find('.layui-table-tree-flexIcon').html(treeOptions.view.flexIconClose);
+ treeOptions.view.showIcon && tableView.find('.layui-table-tree-nodeIcon:not(.layui-table-tree-iconCustom,.layui-table-tree-iconLeaf)').html(treeOptions.view.iconClose);
} else {
var tableDataFlat = treeTable.getData(id, true);
// 展开所有
@@ -681,7 +727,6 @@ layui.define(['table'], function (exports) {
if (treeOptions.async.enable) {
// 判断是否有未加载过的节点
var isAllAsyncDone = true;
- var isParentKey = treeOptions.customName.isParent;
layui.each(tableDataFlat, function (i1, item1) {
if (item1[isParentKey] && !item1[LAY_ASYNC_STATUS]) {
isAllAsyncDone = false;
@@ -712,16 +757,24 @@ layui.define(['table'], function (exports) {
})
// 如果全部节点已经都打开过,就可以简单处理跟隐藏所有节点反操作
if (isAllExpanded) {
- that.updateStatus(null, {LAY_EXPAND: true});
- // 隐藏所有非顶层的节点
+ that.updateStatus(null, function (d) {
+ if (d[isParentKey]) {
+ d[LAY_EXPAND] = true;
+ }
+ });
+ // 显示所有子节点
tableView.find('tbody tr[data-level!="0"]').removeClass(HIDE);
- // 处理顶层节点的图标
- // var trLevel0 = tableView.find('tbody tr[data-level="0"]');
+ // 处理节点的图标
tableView.find('.layui-table-tree-flexIcon').html(treeOptions.view.flexIconOpen);
- tableView.find('.layui-table-tree-nodeIcon').html(treeOptions.view.iconOpen);
+ treeOptions.view.showIcon && tableView.find('.layui-table-tree-nodeIcon:not(.layui-table-tree-iconCustom,.layui-table-tree-iconLeaf)').html(treeOptions.view.iconOpen);
} else {
// 如果有未打开过的父节点,将内容全部生成
- that.updateStatus(null, {LAY_EXPAND: true, LAY_HAS_EXPANDED: true});
+ that.updateStatus(null, function (d) {
+ if (d[isParentKey]) {
+ d[LAY_EXPAND] = true;
+ d[LAY_HAS_EXPANDED] = true;
+ }
+ }); // {LAY_EXPAND: true, LAY_HAS_EXPANDED: true});
var trAll = table.getTrHtml(id, tableDataFlat);
var trAllObj = {
@@ -730,7 +783,6 @@ layui.define(['table'], function (exports) {
trs_fixed_r: $(trAll.trs_fixed_r.join(''))
}
layui.each(tableDataFlat, function (dataIndex, dataItem) {
- // debugger;
var dataLevel = dataItem[LAY_DATA_INDEX].split('-').length - 1;
trAllObj.trs.eq(dataIndex).attr({
'data-index': dataItem[LAY_DATA_INDEX],
@@ -786,7 +838,7 @@ layui.define(['table'], function (exports) {
var dataExpand = {}; // 记录需要展开的数据
var nameKey = customName.name;
- var indent = treeOptions.view.indent || 14;
+ var indent = treeOptionsView.indent || 14;
layui.each(tableView.find('td[data-field="' + nameKey + '"]'), function (index, item) {
item = $(item);
var trElem = item.closest('tr');
@@ -814,11 +866,17 @@ layui.define(['table'], function (exports) {
'margin-left: ' + (indent * trElem.attr('data-level')) + 'px;',
(trData[isParentKey] || treeOptionsView.showFlexIconIfNotParent) ? '' : ' visibility: hidden;',
'">',
- trData[LAY_EXPAND] ? treeOptions.view.flexIconOpen : treeOptions.view.flexIconClose, // 折叠图标
+ trData[LAY_EXPAND] ? treeOptionsView.flexIconOpen : treeOptionsView.flexIconClose, // 折叠图标
' ',
- '',
- treeOptions.view.showIcon ? (trData.icon || treeOptions.view.icon || (trData[isParentKey] ? treeOptions.view.iconClose : treeOptions.view.iconLeaf) || '') : '',
- ' ', // 区分父子节点
+ treeOptionsView.showIcon ? '' +
+ (trData.icon || treeOptionsView.icon ||
+ (trData[isParentKey] ?
+ (trData[LAY_EXPAND] ? treeOptionsView.iconOpen : treeOptionsView.iconClose) :
+ treeOptionsView.iconLeaf) ||
+ '') + ' ' : '', // 区分父子节点
htmlTemp].join('')) // 图标要可定制
.find('.layui-table-tree-flexIcon');
@@ -834,7 +892,7 @@ layui.define(['table'], function (exports) {
// 当前层的数据看看是否需要展开
sonSign !== false && layui.each(dataExpand, function (index, item) {
var trDefaultExpand = tableViewElem.find('tr[lay-data-index="' + index + '"]');
- trDefaultExpand.find('.layui-table-tree-flexIcon').html(treeOptions.view.flexIconOpen);
+ trDefaultExpand.find('.layui-table-tree-flexIcon').html(treeOptionsView.flexIconOpen);
expandNode({trElem: trDefaultExpand.first()}, true);
});
@@ -953,9 +1011,9 @@ layui.define(['table'], function (exports) {
if (!options.url) {
if (initSort.type) {
- options.data = layui.sort(options.data, initSort.field, initSort.type === 'desc');
+ layui.sort(options.data, initSort.field, initSort.type === 'desc', true);
} else {
- options.data = layui.sort(options.data, table.config.indexName);
+ layui.sort(options.data, table.config.indexName, null, true);
}
that.initData(options.data);
treeTable.reloadData(id);
@@ -987,7 +1045,8 @@ layui.define(['table'], function (exports) {
var args = arguments;
$.extend(tableThat.getNodeDataByIndex(trIndex), args[0]);
var ret = updateFn.apply(updateThat, args); // 主要负责更新节点内容
- obj.tr.find('td[data-field="' + obj.config.tree.customName.name + '"]').children('div.layui-table-cell').removeClass('layui-table-tree-item');
+ var nameKey = obj.config.tree.customName.name;
+ nameKey in args[0] && obj.tr.find('td[data-field="' + nameKey + '"]').children('div.layui-table-cell').removeClass('layui-table-tree-item');
tableThat.renderTreeTable(obj.tr, obj.tr.attr('data-level'), false);
return ret;
}
@@ -1311,7 +1370,9 @@ layui.define(['table'], function (exports) {
if (tableView.hasClass(TABLE_TREE)) {
updateObjParams(obj);
if (obj.field === options.tree.customName.name) {
- obj.update({}); // 通过update调用执行tr节点的更新
+ var updateData = {};
+ updateData[obj.field] = obj.value;
+ obj.update(updateData); // 通过update调用执行tr节点的更新
}
}
});
| | | | | | | | | | | | |