diff --git a/README.md b/README.md index ad7663f9..477dcd03 100644 --- a/README.md +++ b/README.md @@ -25,7 +25,7 @@ --- -Layui 是一套开源的 Web UI 组件库，采用自身轻量级模块化规范，遵循原生态的 HTML/CSS/JavaScript 开发模式，极易上手，拿来即用。其风格简约，而内在丰盈，利于实现网页界面的快速构建。Layui 区别于一众主流的前端框架，却并非逆道而行，而是信奉返璞归真之道。确切地说，它更多是面向于追求简单的务实主义者，他们无需涉足各类构建工具，只需面向浏览器本身，即可轻松掌握页面所需的元素与交互，进而信手拈来。 +Layui 是一套开源的 Web UI 组件库，采用自身轻量级模块化规范，遵循原生态的 HTML/CSS/JavaScript 开发模式，极易上手，拿来即用。其风格简约轻盈，而内在雅致丰盈，甚至包括文档在内的每一处细节都经过精心雕琢，非常适合网页界面的快速构建。Layui 区别于一众主流的前端框架，却并非逆道而行，而是信奉返璞归真之道。确切地说，它更多是面向于追求简单的务实主义者，即无需涉足各类构建工具，只需面向浏览器本身，便可将页面所需呈现的元素与交互信手拈来。 ## 快速上手 diff --git a/examples/form.html b/examples/form.html index 5935ec69..69d4f899 100644 --- a/examples/form.html +++ b/examples/form.html @@ -17,17 +17,19 @@
-
-
-
- 前置信息 -
- -
- 后置信息 +
+
+
+
+ 前置信息 +
+ +
+ 后置信息 +
-
+
@@ -35,75 +37,87 @@
-
- -
-
-
- +
+
+
+ +
+
-
-
-
- +
+
+
+ +
+
-
-
- -
-
-
- +
+
+
-
-
- +
+
+
+ +
+ +
-
- +
+
+ +
-
- -
-
-
+
+
+ +
+
+
+
- +
-
+
- +
-
-
- +
+
+
+ +
+
-
-
- -
- -
+
+
+ +
+
+
+ +
+
@@ -282,25 +296,25 @@
- +
- - - + + +
- +
- - + +
@@ -406,6 +420,11 @@ ,xxxxxxxxx: 123 }); + // 自定义动态点缀事件 + form.on('input-affix(set)', function(data){ + var elem = data.elem; + elem.value = '通过自定义事件设置的值'; + }); //事件 form.on('select(quiz111)', function(data){ diff --git a/examples/table-test.html b/examples/table-test.html index fe82c525..ceb448b3 100644 --- a/examples/table-test.html +++ b/examples/table-test.html @@ -156,12 +156,13 @@ layui.use(['table', 'dropdown'], function(){ ,{field:'username', title:'用户名', width:120, edit: function(d){ return !d.LAY_DISABLED; }, templet: '#usernameTpl'} - ,{field:'email', minWidth: 160, maxWidth: 320, title:'邮箱 ', hide: 0, edit: 'text', templet: function(d){ + ,{field:'email', minWidth: 160, maxWidth: 320, title:'邮箱 ', fieldTitle: '邮箱', hide: 0, edit: 'text', templet: function(d){ return ''+ layui.util.escape(d.email) +'' }} ,{field:'sex', title:'性别', width:80, edit: 'text', sort: true, escape: false} ,{field:'city', title:'城市', width:120, templet: '#cityTpl', exportTemplet: function(d, obj){ - //console.log(obj) + // return '=HYPERLINK("https://abc.com/a.jpg","截图")'; // 测试内容存在特殊符 + // console.log(obj) var td = obj.td(this.field); //获取当前 td return td.find('select').val(); }} @@ -450,11 +451,12 @@ layui.use(['table', 'dropdown'], function(){ var value = obj.value // 得到修改后的值 var oldValue = obj.oldValue // 得到修改前的值 -- v2.8.0 新增 var data = obj.data; // 得到当前编辑所在行的数据 + var col = obj.getCol(); // 得到当前列的表头配置属性 // 值的校验 if(field === 'email'){ if(!/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/.test(obj.value)){ - layer.tips('输入的邮箱格式不正确，请重新编辑', this, {tips: 1}); + layer.tips('输入的'+ col.fieldTitle +'格式不正确，请重新编辑', this, {tips: 1}); return obj.reedit(); // 重新编辑 -- v2.8.0 新增 } } diff --git a/package.json b/package.json index 3aeb4e32..308fd42d 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "layui", - "version": "2.8.0-rc.5", + "version": "2.8.0-rc.6", "description": "Classic modular Front-End UI library", "main": "dist/layui.js", "license": "MIT", diff --git a/src/css/layui.css b/src/css/layui.css index 4f54683b..8290e64e 100644 --- a/src/css/layui.css +++ b/src/css/layui.css @@ -505,7 +505,7 @@ a cite{font-style: normal; *cursor:pointer;} /** 页面元素 **/ .layui-btn, .layui-input, .layui-textarea, .layui-upload-button, .layui-select{outline: none; -webkit-appearance: none; transition: all .3s; -webkit-transition: all .3s; box-sizing: border-box;} -/* 引用 */.layui-elem-quote{margin-bottom: 10px; padding: 15px; line-height: 1.6; border-left: 5px solid #5FB878; border-radius: 0 2px 2px 0; background-color: #FAFAFA;} +/* 引用 */.layui-elem-quote{margin-bottom: 10px; padding: 15px; line-height: 1.8; border-left: 5px solid #5FB878; border-radius: 0 2px 2px 0; background-color: #FAFAFA;} .layui-quote-nm{border-style: solid; border-width: 1px; border-left-width: 5px; background: none;} /* 字段集合 */.layui-elem-field{margin-bottom: 10px; padding: 0; border-width: 1px; border-style: solid;} .layui-elem-field legend{margin-left: 20px; padding: 0 10px; font-size: 20px; font-weight: 300;} @@ -556,13 +556,12 @@ a cite{font-style: normal; *cursor:pointer;} /* 其它辅助 */ .layui-auxiliar-moving{position: fixed; left: 0; right: 0; top: 0; bottom: 0; width: 100%; height: 100%; background: none; z-index: 9999999999;} +.layui-scollbar-hide{overflow: hidden !important;} /* - - 默认主题 - -*/ + * 默认主题 + */ /* 背景颜色 */ @@ -605,13 +604,13 @@ a cite{font-style: normal; *cursor:pointer;} .layui-timeline-item:before{background-color: #eee;} /* 文本区域 */ -.layui-text{line-height: 1.6; font-size: 14px; color: #5F5F5F;} +.layui-text{line-height: 1.8; font-size: 14px;} .layui-text h1, .layui-text h2, .layui-text h3, .layui-text h4, .layui-text h5, -.layui-text h6{font-weight: 500; color: #333;} +.layui-text h6{font-weight: 500; color: #3A3A3A;} .layui-text h1{font-size: 32px;} .layui-text h2{font-size: 24px;} .layui-text h3{font-size: 18px;} @@ -621,23 +620,30 @@ a cite{font-style: normal; *cursor:pointer;} .layui-text a:not(.layui-btn){color: #01AAED;} .layui-text a:not(.layui-btn):hover{text-decoration: underline;} .layui-text ul, -.layui-text ol{padding: 5px 0 5px 15px;} +.layui-text ol{padding-left: 15px;} .layui-text ul li{margin-top: 5px; list-style-type: disc;} .layui-text ol li{margin-top: 5px; list-style-type: decimal;} -.layui-text em, +.layui-text-em, .layui-word-aux{color: #999 !important; padding-left: 5px !important; padding-right: 5px !important;} .layui-text p{margin: 15px 0;} .layui-text p:first-child{margin-top: 0;} .layui-text p:last-child{margin-bottom: 0;} .layui-text blockquote:not(.layui-elem-quote){padding: 5px 15px; border-left: 5px solid #eee;} -.layui-text pre:not(.layui-code){padding: 15px; font-family: Lucida Console,Consolas,Courier New; background-color: #FAFAFA;} +.layui-text pre > code:not(.layui-code){padding: 15px; font-family: Lucida Console,Consolas,Courier New; background-color: #FAFAFA;} /* 字体大小及颜色 */ -.layui-font-12{font-size: 12px !important;;} +.layui-font-12{font-size: 12px !important;} +.layui-font-13{font-size: 13px !important;} .layui-font-14{font-size: 14px !important;} .layui-font-16{font-size: 16px !important;} .layui-font-18{font-size: 18px !important;} .layui-font-20{font-size: 20px !important;} +.layui-font-22{font-size: 22px !important;} +.layui-font-24{font-size: 24px !important;} +.layui-font-26{font-size: 26px !important;} +.layui-font-28{font-size: 28px !important;} +.layui-font-30{font-size: 30px !important;} +.layui-font-32{font-size: 32px !important;} .layui-font-red{color: #FF5722 !important;} /*赤*/ .layui-font-orange{color: #FFB800!important;} /*橙*/ @@ -661,7 +667,7 @@ a cite{font-style: normal; *cursor:pointer;} .layui-btn+.layui-btn{margin-left: 10px;} /* 按钮容器 */ -.layui-btn-container{font-size: 0;} +.layui-btn-container{word-spacing: -5px;} .layui-btn-container .layui-btn{margin-right: 10px; margin-bottom: 10px;} .layui-btn-container .layui-btn+.layui-btn{margin-left: 0;} .layui-table .layui-btn-container .layui-btn{margin-bottom: 9px;} @@ -708,7 +714,7 @@ a cite{font-style: normal; *cursor:pointer;} .layui-form input[type=radio]{display: none;} .layui-form *[lay-ignore]{display: initial;} -.layui-form-item{margin-bottom: 15px; clear: both; *zoom: 1;} +.layui-form-item{position: relative; margin-bottom: 15px; clear: both; *zoom: 1;} .layui-form-item:after{content:'\20'; clear: both; *zoom: 1; display: block; height:0;} .layui-form-label{position: relative; float: left; display: block; padding: 9px 15px; width: 80px; font-weight: 400; line-height: 20px; text-align: right;} .layui-form-label-col{display: block; float: none; padding: 9px 0; line-height: 20px; text-align: left;} @@ -726,40 +732,51 @@ a cite{font-style: normal; *cursor:pointer;} .layui-form-danger:focus, .layui-form-danger+.layui-form-select .layui-input{border-color: #FF5722 !important;} -/* 输入框套件 */ -.layui-input-wrap{position: relative; height: 38px; line-height: 38px;} -.layui-input-wrap .layui-input{padding-right: 35px;;} -.layui-input-wrap .layui-input::-ms-clear, -.layui-input-wrap .layui-input::-ms-reveal{display: none;} -.layui-input-wrap-prefix .layui-input{padding-left:35px;} +/* 输入框点缀 */ .layui-input-prefix, .layui-input-suffix, -.layui-input-split{position: absolute; right: 0; top: 0; padding: 0 10px; width: 35px; height: 100%; text-align: center; transition: all .3s; cursor: pointer; pointer-events: none; box-sizing: border-box;} +.layui-input-split, +.layui-input-suffix .layui-input-affix{position: absolute; right: 0; top: 0; padding: 0 10px; width: 35px; height: 100%; text-align: center; transition: all .3s; box-sizing: border-box;} .layui-input-prefix{left: 0; border-radius: 2px 0 0 2px;} .layui-input-suffix{right: 0; border-radius: 0 2px 2px 0;} - -.layui-input-wrap .layui-input:focus + .layui-input-split{border-color: #d2d2d2;} +.layui-input-split{border-width: 1px; border-style: solid;} .layui-input-prefix .layui-icon, .layui-input-suffix .layui-icon, .layui-input-split .layui-icon{position: relative; font-size: 16px; color: #5F5F5F; transition: all .3s;} -.layui-input-wrap .layui-input-prefix.layui-input-split{border-width: 0; border-right-width: 1px;} - -.layui-input-wrap-prefix .layui-form-select{position: static;} - -.layui-input-affix-event .layui-icon{color: rgba(0,0,0,.8);} -.layui-input-affix-event .layui-icon-clear{color: rgba(0,0,0,.3);} -.layui-input-affix-event .layui-icon:hover{color: rgba(0,0,0,.6);} -.layui-input-split{border-width: 1px; border-style: solid;} -.layui-input-affix-event{pointer-events: auto;} - -/* 输入框组 */ -.layui-input-group{position: relative; display: inline-table;} +/* 输入框前后置容器 */ +.layui-input-group{position: relative; display: table; box-sizing: border-box;} .layui-input-group>*{display: table-cell; vertical-align: middle; position: relative;} .layui-input-group .layui-input{padding-right: 15px;} .layui-input-group .layui-input-prefix{width: auto; border-right: 0;} .layui-input-group .layui-input-suffix{width: auto; border-left: 0;} +.layui-input-group .layui-input-split{white-space: nowrap;} + +/* 输入框前后缀容器 */ +.layui-input-wrap{position: relative; line-height: 38px;} +.layui-input-wrap .layui-input{padding-right: 35px;;} +.layui-input-wrap .layui-input::-ms-clear, +.layui-input-wrap .layui-input::-ms-reveal{display: none;} +.layui-input-wrap .layui-input-prefix + .layui-input, +.layui-input-wrap .layui-input-prefix ~ * .layui-input{padding-left: 35px;} +.layui-input-wrap .layui-input-split + .layui-input, +.layui-input-wrap .layui-input-split ~ * .layui-input{padding-left: 45px;} +.layui-input-wrap .layui-input-prefix ~ .layui-form-select{position: static;} +.layui-input-wrap .layui-input-prefix, +.layui-input-wrap .layui-input-suffix, +.layui-input-wrap .layui-input-split{pointer-events: none;} +.layui-input-wrap .layui-input:focus + .layui-input-split{border-color: #d2d2d2;} +.layui-input-wrap .layui-input-prefix.layui-input-split{border-width: 0; border-right-width: 1px;} + +/* 输入框动态点缀 */ +.layui-input-affix{line-height: 38px;} +.layui-input-suffix .layui-input-affix{right: auto; left: -35px;} +.layui-input-affix .layui-icon{color: rgba(0,0,0,.8); pointer-events: auto!important; cursor: pointer;} +.layui-input-affix .layui-icon-clear{color: rgba(0,0,0,.3);} +.layui-input-affix .layui-icon:hover{color: rgba(0,0,0,.6);} + + /* 下拉选择 */ .layui-form-select{position: relative; color: #5F5F5F;} @@ -798,7 +815,7 @@ a cite{font-style: normal; *cursor:pointer;} .layui-form-checked i, .layui-form-checked:hover i{color: #5FB878;} .layui-form-item .layui-form-checkbox{margin-top: 4px;} -/* 复选框-原始风格 */.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"]{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: #5FB878; color: #fff;} @@ -872,10 +889,10 @@ a cite{font-style: normal; *cursor:pointer;} .layui-laypage select{border: 1px solid #eee;} .layui-laypage a, .layui-laypage span{display: inline-block; *display: inline; *zoom: 1; vertical-align: middle; padding: 0 15px; height: 28px; line-height: 28px; margin: 0 -1px 5px 0; background-color: #fff; color: #333; font-size: 12px;} -.layui-laypage a:hover{color: #009688;} +.layui-laypage a{color: #333 !important; text-decoration: none !important;} +.layui-laypage a:hover{color: #009688 !important;} .layui-laypage em{font-style: normal;} .layui-laypage .layui-laypage-spr{color:#999; font-weight: 700;} -.layui-laypage a{ text-decoration: none;} .layui-laypage .layui-laypage-curr{position: relative;} .layui-laypage .layui-laypage-curr em{position: relative; color: #fff;} .layui-laypage .layui-laypage-curr .layui-laypage-em{position: absolute; left: -1px; top: -1px; padding: 1px; width: 100%; height: 100%; background-color: #009688; } @@ -909,19 +926,19 @@ a cite{font-style: normal; *cursor:pointer;} /** 表格 **/ .layui-table{width: 100%; margin: 10px 0; background-color: #fff; color: #5F5F5F;} .layui-table tr{transition: all .3s; -webkit-transition: all .3s;} -.layui-table th{text-align: left; font-weight: 400;} +.layui-table th{text-align: left; font-weight: 600;} .layui-table thead tr, .layui-table-header, .layui-table-tool, .layui-table-total, .layui-table-total tr, -.layui-table-patch, -.layui-table-mend, -.layui-table tbody tr:hover, +.layui-table-patch{} +.layui-table-mend{background-color: #fff;} .layui-table-hover, .layui-table-click{background-color: #FAFAFA;} +.layui-table[lay-even] tr:nth-child(even){background-color: #f2f2f2;} .layui-table th, .layui-table td, @@ -934,6 +951,7 @@ a cite{font-style: normal; *cursor:pointer;} .layui-table-total, .layui-table-page, .layui-table-fixed-r, +.layui-table-mend, .layui-table-tips-main, .layui-table-grid-down{border-width: 1px; border-style: solid; border-color: #eee;} @@ -959,7 +977,7 @@ a cite{font-style: normal; *cursor:pointer;} .layui-table[lay-data], .layui-table[lay-options]{display: none;} .layui-table-box{position: relative; overflow: hidden;} -.layui-table-view{margin: 10px 0;} +.layui-table-view{clear: both;} .layui-table-view .layui-table{position: relative; width: auto; margin: 0; border: 0; border-collapse: separate;} .layui-table-view .layui-table[lay-skin="line"]{border-width: 0; border-right-width: 1px;} .layui-table-view .layui-table[lay-skin="row"]{border-width: 0; border-bottom-width: 1px;} @@ -967,7 +985,9 @@ a cite{font-style: normal; *cursor:pointer;} .layui-table-view .layui-table td{padding: 0; border-top: none; border-left: none;} .layui-table-view .layui-table th.layui-unselect .layui-table-cell span{cursor: pointer;} .layui-table-view .layui-table td{cursor: default;} -.layui-table-view .layui-table td[data-edit="text"]{cursor: text;} +.layui-table-view .layui-table td[data-edit]{cursor: text;} +.layui-table-view .layui-table td[data-edit]:hover:after{position: absolute; left: 0; top: 0; width: 100%; height: 100%; box-sizing: border-box; border: 1px solid #16B777; pointer-events: none; content: "";} + .layui-table-view .layui-form-checkbox[lay-skin="primary"] i{width: 18px; height: 18px;} .layui-table-view .layui-form-radio{line-height: 0; padding: 0;} .layui-table-view .layui-form-radio>i{margin: 0; font-size: 20px;} @@ -985,8 +1005,8 @@ a cite{font-style: normal; *cursor:pointer;} .layui-table-tool-temp{padding-right: 120px;} .layui-table-tool-self{position: absolute; right: 17px; top: 10px;} .layui-table-tool .layui-table-tool-self .layui-inline[lay-event]{margin: 0 0 0 10px;} -.layui-table-tool-panel{position: absolute; top: 29px; left: -1px; z-index: 399; padding: 5px 0; min-width: 150px; min-height: 40px; border: 1px solid #d2d2d2; text-align: left; overflow-y: auto; background-color: #fff; box-shadow: 0 2px 4px rgba(0,0,0,.12);} -.layui-table-tool-panel li{padding: 0 10px; line-height: 30px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -webkit-transition: .5s all; transition: .5s all;} +.layui-table-tool-panel{position: absolute; top: 29px; left: -1px; z-index: 399; padding: 5px 0 !important; min-width: 150px; min-height: 40px; border: 1px solid #d2d2d2; text-align: left; overflow-y: auto; background-color: #fff; box-shadow: 0 2px 4px rgba(0,0,0,.12);} +.layui-table-tool-panel li{padding: 0 10px; margin: 0 !important; line-height: 30px; list-style-type: none !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -webkit-transition: .5s all; transition: .5s all;} .layui-table-tool-panel li .layui-form-checkbox[lay-skin="primary"]{width: 100%;} .layui-table-tool-panel li:hover{background-color: #F6F6F6;} .layui-table-tool-panel li .layui-form-checkbox[lay-skin="primary"]{padding-left: 28px;} @@ -994,6 +1014,7 @@ a cite{font-style: normal; *cursor:pointer;} .layui-table-tool-panel li .layui-form-checkbox[lay-skin="primary"] span{padding: 0;} .layui-table-tool .layui-table-tool-self .layui-table-tool-panel{left: auto; right: -1px;} +.layui-table-col-special{word-spacing: -5px;} .layui-table-col-set{position: absolute; right: 0; top: 0; width: 20px; height: 100%; border-width: 0; border-left-width: 1px; background-color: #fff;} .layui-table-sort{width: 10px; height: 20px; margin-left: 5px; cursor: pointer!important;} @@ -1025,7 +1046,7 @@ a cite{font-style: normal; *cursor:pointer;} .layui-table-fixed-l{box-shadow: 1px 0 8px rgba(0,0,0,.08);} .layui-table-fixed-r{left: auto; right: -1px; border-width: 0; border-left-width: 1px; box-shadow: -1px 0 8px rgba(0,0,0,.08);} .layui-table-fixed-r .layui-table-header{position: relative; overflow: visible;} -.layui-table-mend{position: absolute; right: -49px; top: 0; height: 100%; width: 50px;} +.layui-table-mend{position: absolute; right: -49px; top: 0; height: 100%; width: 50px; border-width: 0; border-left-width: 1px;} .layui-table-tool{position: relative; width: 100%; min-height: 50px; line-height: 30px; padding: 10px 15px; border-width: 0; border-bottom-width: 1px; /*box-shadow: 0 1px 8px 0 rgb(0 0 0 / 8%);*/} .layui-table-tool .layui-btn-container{margin-bottom: -10px;} @@ -1095,7 +1116,7 @@ body .layui-table-tips .layui-layer-content{background: none; padding: 0; box-sh .layui-menu{position: relative; margin: 5px 0; background-color: #fff; box-sizing: border-box;} .layui-menu *{box-sizing: border-box;} .layui-menu li, -.layui-menu-body-title a{padding: 5px 15px;} +.layui-menu-body-title a{padding: 5px 15px; color: initial} .layui-menu li{position: relative; margin: 1px 0; width: calc(100% + 1px); line-height: 26px; color: rgba(0,0,0,.8); font-size: 14px; white-space: nowrap; cursor: pointer; transition: all .3s;} .layui-menu li:hover{background-color: #F6F6F6; } @@ -1357,7 +1378,7 @@ body .layui-table-tips .layui-layer-content{background: none; padding: 0; box-sh .layui-carousel[lay-anim="fade"]>*[carousel-item]>.layui-this.layui-carousel-right{opacity: 0} /** fixbar **/ -.layui-fixbar{position: fixed; right: 15px; bottom: 15px; z-index: 999999;} +.layui-fixbar{position: fixed; right: 16px; bottom: 16px; z-index: 999999;} .layui-fixbar li{width: 50px; height: 50px; line-height: 50px; margin-bottom: 1px; text-align:center; cursor: pointer; font-size:30px; background-color: #9F9F9F; color:#fff; border-radius: 2px; opacity: 0.95;} .layui-fixbar li:hover{opacity: 0.85;} .layui-fixbar li:active{opacity: 1;} diff --git a/src/css/modules/code.css b/src/css/modules/code.css index 56e8c6a6..a0188666 100644 --- a/src/css/modules/code.css +++ b/src/css/modules/code.css @@ -6,18 +6,18 @@ html #layuicss-skincodecss{display:none; position: absolute; width:1989px;} /* 默认风格 */ -.layui-code-view{display: block; position: relative; margin: 10px 0; padding: 0; border: 1px solid #eee; border-left-width: 6px; background-color: #FAFAFA; color: #333; font-family: Courier New; font-size: 13px;} +.layui-code-view{display: block; position: relative; margin: 11px 0; padding: 0; border: 1px solid #eee; border-left-width: 6px; background-color: #FAFAFA; color: #333; font-family: Courier New; font-size: 13px;} .layui-code-title{position: relative; padding: 0 10px; height: 40px; line-height: 40px; border-bottom: 1px solid #eee; font-size: 12px;} .layui-code-title > .layui-code-about{position: absolute; right: 10px; top: 0; color: #B7B7B7;} .layui-code-about > a{padding-left: 10px;} .layui-code-view > .layui-code-ol, -.layui-code-view > .layui-code-ul{position: relative; overflow: auto;} -.layui-code-view > .layui-code-ol > li{position: relative; margin-left: 45px; line-height: 20px; padding: 0 10px; border-left: 1px solid #e2e2e2; list-style-type: decimal-leading-zero; *list-style-type: decimal; background-color: #fff;} +.layui-code-view > .layui-code-ul{max-height: 100%; padding: 0 !important; position: relative; overflow: auto;} +.layui-code-view > .layui-code-ol > li{position: relative; margin-top: 0 !important; margin-left: 45px !important; line-height: 20px; padding: 0 10px !important; border-left: 1px solid #e2e2e2; list-style-type: decimal-leading-zero; *list-style-type: decimal; background-color: #fff;} .layui-code-view > .layui-code-ol > li:first-child, -.layui-code-view > .layui-code-ul > li:first-child{padding-top: 10px;} +.layui-code-view > .layui-code-ul > li:first-child{padding-top: 10px !important;} .layui-code-view > .layui-code-ol > li:last-child, -.layui-code-view > .layui-code-ul > li:last-child{padding-bottom: 10px;} -.layui-code-view > .layui-code-ul > li{position: relative; line-height: 20px; padding: 0 10px; list-style-type: none; *list-style-type: none; background-color: #fff;} +.layui-code-view > .layui-code-ul > li:last-child{padding-bottom: 10px !important;} +.layui-code-view > .layui-code-ul > li{position: relative; line-height: 20px; padding: 0 10px !important; list-style-type: none; *list-style-type: none; background-color: #fff;} .layui-code-view pre{margin: 0;} /* 深色风格 */ @@ -28,5 +28,23 @@ html #layuicss-skincodecss{display:none; position: absolute; width:1989px;} .layui-code-dark > .layui-code-ul > li{margin-left: 6px;} /* 代码预览 */ -.layui-code-demo .layui-code{visibility: visible !important; margin: -15px; border-top: none; border-right: none; border-bottom: none;} -.layui-code-demo .layui-tab-content{padding: 15px; border-top: none} \ No newline at end of file +.layui-code textarea{display: none;} +.layui-code-preview > .layui-code{margin: 0;} +.layui-code-preview > .layui-tab{position: relative; z-index: 1; margin-bottom: 0;} +.layui-code-preview > .layui-tab > .layui-tab-title{border-bottom: none;} +.layui-code-preview > .layui-code > .layui-code-title{display: none;} +.layui-code-preview .layui-code-item{display: none;} +.layui-code-preview .layui-code-view > .layui-code-ol > li{} +.layui-code-item-preview{position: relative; padding: 16px;} +.layui-code-item-preview > iframe{position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none;} + +/* 工具栏 */ +.layui-code-tools{position: absolute; right: 11px; top: 3px;} +.layui-code-tools > i{display: inline-block; margin-left: 6px; padding: 3px; cursor: pointer;} + +/* 全屏风格 */ +.layui-code-full{position: fixed; left: 0; top: 0; z-index: 1111111; width: 100%; height: 100%; background-color: #fff;} +.layui-code-full .layui-code-item{width: 100% !important; border-width: 0 !important; border-top-width: 1px !important;} +.layui-code-full .layui-code-item, +.layui-code-full .layui-code-ol, +.layui-code-full .layui-code-ul{height: calc(100vh - 51px) !important; box-sizing: border-box;} \ No newline at end of file diff --git a/src/layui.js b/src/layui.js index c0de192c..f8f33f2f 100644 --- a/src/layui.js +++ b/src/layui.js @@ -15,7 +15,7 @@ } ,Layui = function(){ - this.v = '2.8.0-rc.5'; // Layui 版本号 + this.v = '2.8.0-rc.6'; // Layui 版本号 } //识别预先可能定义的指定全局对象 diff --git a/src/modules/all.js b/src/modules/all.js index 3e077615..bcfa718a 100644 --- a/src/modules/all.js +++ b/src/modules/all.js @@ -1,4 +1,4 @@ -/*! +/** * 用于加载所有内置模块 * MIT Licensed */ diff --git a/src/modules/code.js b/src/modules/code.js index 47a1fc5d..68da0494 100644 --- a/src/modules/code.js +++ b/src/modules/code.js @@ -1,22 +1,38 @@ /** * code - * 代码块简易修饰 + * Code 预览组件 */ -layui.define(['lay', 'util'], function(exports){ +layui.define(['lay', 'util', 'element', 'form'], function(exports){ "use strict"; var $ = layui.$; var util = layui.util; + var element = layui.element; + var form = layui.form; - var ELEM_TITLE = 'layui-code-title'; + // 常量 + var CONST = { + ELEM_VIEW: 'layui-code-view', + ELEM_TITLE: 'layui-code-title', + ELEM_FULL: 'layui-code-full', + ELEM_PREVIEW: 'layui-code-preview', + ELEM_ITEM: 'layui-code-item', + ELEM_SHOW: 'layui-show' + }; // 默认参数项 var config = { elem: '.layui-code', // 元素选择器 title: '</>', // 标题 about: '', // 右上角信息 - ln: true // 是否显示行号 + ln: true, // 是否显示行号 + header: false, // 是否显示头部区域 + + text: { + code: util.escape(''), + preview: 'Preview' + } }; var trim = function(str){ @@ -25,7 +41,7 @@ layui.define(['lay', 'util'], function(exports){ // export api exports('code', function(options){ - var opts = options = $.extend({}, config, options); + var opts = options = $.extend(true, {}, config, options); // 目标元素是否存在 options.elem = $(options.elem); @@ -37,7 +53,7 @@ layui.define(['lay', 'util'], function(exports){ var html = trim(othis.html()); // 合并属性上的参数，并兼容旧版本属性写法 lay-* - var options = $.extend({}, opts, lay.options(item), function(obj){ + var options = $.extend(true, {}, opts, lay.options(item), function(obj){ var attrs = ['title', 'height', 'encode', 'skin', 'about']; layui.each(attrs, function(i, attr){ var value = othis.attr('lay-'+ attr); @@ -48,12 +64,181 @@ layui.define(['lay', 'util'], function(exports){ return obj; }({})); + // 获得代码 + var codes = function(){ + var arr = []; + var textarea = othis.children('textarea'); + + // 若内容放置在 textarea 中 + textarea.each(function(){ + arr.push(trim(this.value)); + }); + + if(textarea[0]){ + html = util.escape(arr.join('')); + } + + // 内容直接放置在元素外层 + if(arr.length === 0){ + arr.push(trim(othis.html())); + } + + return arr; + }(); + + // 是否开启预览 + if(options.preview){ + var FILTER_VALUE = 'LAY-CODE-DF-'+ index; + var layout = options.layout || ['code', 'preview']; + var isIframePreview = options.preview === 'iframe'; + + // 追加 Tab 组件 + var elemView = $('
'); + var elemTabView = $('
'); + var elemHeaderView = $('
'); + var elemPreviewView = $('
'); + var elemToolbar = $('
'); + var elemViewHas = othis.prev('.' + CONST.ELEM_PREVIEW); + var elemPreviewViewHas = othis.next('.' + CONST.ELEM_ITEM +'-preview'); + + if(options.id) elemView.attr('id', options.id); + elemTabView.attr('lay-filter', FILTER_VALUE); + + // 标签头 + layui.each(layout, function(i, v){ + var li = $('
  • '); + if(i === 0) li.addClass('layui-this'); + li.html(options.text[v]); + elemHeaderView.append(li); + }); + + // 工具栏 + var tools = { + 'full': { + className: 'screen-full', + title: ['最大化显示', '还原显示'], + event: function(el, type){ + var elemView = el.closest('.'+ CONST.ELEM_PREVIEW); + var classNameFull = 'layui-icon-'+ this.className; + var classNameRestore = 'layui-icon-screen-restore'; + var title = this.title; + var html = $('html,body'); + var ELEM_SCOLLBAR_HIDE = 'layui-scollbar-hide'; + + if(el.hasClass(classNameFull)){ + elemView.addClass(CONST.ELEM_FULL); + el.removeClass(classNameFull).addClass(classNameRestore); + el.attr('title', title[1]); + html.addClass(ELEM_SCOLLBAR_HIDE); + } else { + elemView.removeClass(CONST.ELEM_FULL); + el.removeClass(classNameRestore).addClass(classNameFull); + el.attr('title', title[0]); + html.removeClass(ELEM_SCOLLBAR_HIDE); + } + } + }, + 'window': { + className: 'release', + title: ['在新窗口预览'], + event: function(el, type){ + util.openWin({ + content: codes.join('') + }); + } + } + }; + elemToolbar.on('click', '>i', function(){ // 工具栏事件 + var oi = $(this); + var type = oi.data('type'); + typeof tools[type].event === 'function' && tools[type].event(oi, type); + typeof options.toolsEvent === 'function' && options.toolsEvent(oi, type); + }); + layui.each(options.tools, function(i, v){ + var className = (tools[v] && tools[v].className) || v; + var title = tools[v].title || ['']; + elemToolbar.append( + '' + ); + }); + + // 移除旧结构 + if(elemViewHas[0]) elemViewHas.remove(); + if(elemPreviewViewHas[0]) elemPreviewViewHas.remove(); + + elemTabView.append(elemHeaderView); // 追加标签头 + options.tools && elemTabView.append(elemToolbar); // 追加工具栏 + othis.wrap(elemView).addClass(CONST.ELEM_ITEM).before(elemTabView); // 追加标签结构 + + + // 追加预览 + if(isIframePreview){ + elemPreviewView.html(''); + } + + // 执行预览 + var run = function(thisItemBody){ + var iframe = thisItemBody.children('iframe')[0]; + if(isIframePreview && iframe){ + iframe.srcdoc = codes.join(''); + } else { + thisItemBody.html(codes.join('')); + } + // 回调的返回参数 + var params = { + container: thisItemBody, + render: function(){ + form.render(thisItemBody.find('.layui-form')); + element.render(); + } + }; + // 当前实例预览完毕后的回调 + setTimeout(function(){ + typeof options.done === 'function' && options.done(params); + },3); + }; + + if(layout[0] === 'preview'){ + elemPreviewView.addClass(CONST.ELEM_SHOW); + othis.before(elemPreviewView); + run(elemPreviewView); + } else { + othis.addClass(CONST.ELEM_SHOW).after(elemPreviewView); + } + + // 内容项初始化样式 + options.codeStyle = [options.style, options.codeStyle].join(''); + options.previewStyle = [options.style, options.previewStyle].join(''); + // othis.attr('style', options.codeStyle); + elemPreviewView.attr('style', options.previewStyle); + + // tab change + element.on('tab('+ FILTER_VALUE +')', function(data){ + var $this = $(this); + var thisElem = $(data.elem).closest('.'+ CONST.ELEM_PREVIEW); + var elemItemBody = thisElem.find('.'+ CONST.ELEM_ITEM); + var thisItemBody = elemItemBody.eq(data.index); + + elemItemBody.removeClass(CONST.ELEM_SHOW); + thisItemBody.addClass(CONST.ELEM_SHOW); + + if($this.attr('lay-id') === 'preview'){ + run(thisItemBody); + } + }); + }; + + // 有序或无序列表 var listTag = options.ln ? 'ol' : 'ul'; var listElem = $('<'+ listTag +' class="layui-code-'+ listTag +'">'); // header - var headerElem = $('
    '); + var headerElem = $('
    '); // 添加组件 clasName othis.addClass('layui-code-view layui-box'); @@ -72,7 +257,7 @@ layui.define(['lay', 'util'], function(exports){ othis.html(listElem.html('
  • ' + html + '
    • ')); // 创建 header - if(!othis.children('.'+ ELEM_TITLE)[0]){ + if(options.header && !othis.children('.'+ CONST.ELEM_TITLE)[0]){ headerElem.html(options.title + ( options.about ? '
    ' + options.about + '
    ' @@ -81,6 +266,11 @@ layui.define(['lay', 'util'], function(exports){ othis.prepend(headerElem); } + // 所有实例渲染完毕后的回调 + if(options.elem.length === index + 1){ + typeof options.allDone === 'function' && options.allDone(); + } + // 按行数适配左边距 (function(autoIncNums){ if(autoIncNums > 0){ @@ -88,10 +278,12 @@ layui.define(['lay', 'util'], function(exports){ } })(Math.floor(listElem.find('li').length/100)); - // 限制最大高度 - if(options.height){ + // 限制 Code 最大高度 + if(options.height){ // 兼容旧版本 listElem.css('max-height', options.height); } + // Code 内容区域样式 + listElem.attr('style', options.codeStyle); }); diff --git a/src/modules/dropdown.js b/src/modules/dropdown.js index 47460f56..c0ae6148 100644 --- a/src/modules/dropdown.js +++ b/src/modules/dropdown.js @@ -10,7 +10,7 @@ layui.define(['jquery', 'laytpl', 'lay'], function(exports){ ,laytpl = layui.laytpl ,hint = layui.hint() ,device = layui.device() - ,clickOrMousedown = (device.mobile ? 'click' : 'mousedown') + ,clickOrMousedown = (device.mobile ? 'touchstart' : 'mousedown') //模块名 ,MOD_NAME = 'dropdown' diff --git a/src/modules/form.js b/src/modules/form.js index ff5dbeb5..9fa7e87f 100644 --- a/src/modules/form.js +++ b/src/modules/form.js @@ -2,7 +2,7 @@ * form 表单组件 */ -layui.define(['layer', 'util'], function(exports){ +layui.define(['lay', 'layer', 'util'], function(exports){ "use strict"; var $ = layui.$; @@ -158,73 +158,108 @@ layui.define(['layer', 'util'], function(exports){ // 初始化全局的 autocomplete options.autocomplete && inputs.attr('autocomplete', options.autocomplete); - // 初始化 input 套件 + // 初始化输入框动态点缀 elemForm.find('input[lay-affix],textarea[lay-affix]').each(function(){ var othis = $(this); var affix = othis.attr('lay-affix'); var CLASS_SUFFIX = 'layui-input-suffix'; - var elemNext = othis.next('.'+ CLASS_SUFFIX); + var CLASS_AFFIX = 'layui-input-affix'; var disabled = othis.is('[disabled]') || othis.is('[readonly]'); - var hideElem = function(elem, value){ - if(!elem) return; + + // 根据是否空值来显示或隐藏元素 + var showAffix = function(elem, value){ + elem = $(elem); + if(!elem[0]) return; elem[$.trim(value) ? 'removeClass' : 'addClass'](HIDE); }; - var renderSuffix = function(type, _disabled){ - elemNext.remove(); - elemNext = $(['
    ' - ,'' - ,'
    '].join('')); + + // 渲染动态点缀内容 + var renderAffix = function(opts){ + opts = $.extend({}, (affixOptions[affix] || { + value: affix + }), opts, lay.options(othis[0])); + var elemAffix = $('
    '); + var elemIcon = $(''); - othis.after(elemNext); - hideElem(elemNext, othis.val()); + elemAffix.append(elemIcon); + if(opts.split) elemAffix.addClass('layui-input-split'); + + // 移除旧的元素 + var hasElemAffix = othis.next('.'+ CLASS_AFFIX); + if(hasElemAffix[0]) hasElemAffix.remove(); + + // 是否已经存在后缀元素 + var hasElemSuffix = othis.next('.'+ CLASS_SUFFIX); + if(hasElemSuffix[0]){ + hasElemAffix = hasElemSuffix.find('.'+ CLASS_AFFIX); + if(hasElemAffix[0]) hasElemAffix.remove(); + + hasElemSuffix.prepend(elemAffix); + + othis.css('padding-right', function(){ + var paddingRight = othis.closest('.layui-input-group')[0] + ? 0 + : hasElemSuffix.outerWidth(); + return paddingRight + elemAffix.outerWidth() + }); + } else { + elemAffix.addClass(CLASS_SUFFIX); + othis.after(elemAffix); + } + + opts.show === 'auto' && showAffix(elemAffix, othis.val()); // 输入事件 othis.on('input propertychange', function(){ var value = this.value; - hideElem(elemNext, value); + opts.show === 'auto' && showAffix(elemAffix, value); }); - // 点击后缀套件事件 - elemNext.on('click', function(){ - var filter = othis.attr('lay-filter'); - if($(this).is('[disabled]')) return; - obj[affix] && obj[affix][1].call(this); + // 点击动态后缀事件 + elemIcon.on('click', function(){ + var inputFilter = othis.attr('lay-filter'); + if($(this).hasClass(DISABLED)) return; + + typeof opts.click === 'function' && opts.click.call(this, othis, opts); // 对外事件 - layui.event.call(this, MOD_NAME, 'input-affix('+ filter +')', { - elem: othis[0] - ,affix: affix + layui.event.call(this, MOD_NAME, 'input-affix('+ inputFilter +')', { + elem: othis[0], + affix: affix, + options: opts }); }); }; - // 渲染内置套件 - var obj = { - // 清空 - clear: [function(){ // 渲染 - renderSuffix('clear', disabled); - }, function(){ // 事件 - othis.val('').focus(); - hideElem(elemNext, null); - }] - - // 密码显隐 - ,eye: [function(){ // 渲染 - renderSuffix('eye-invisible'); - }, function(){ // 事件 - var SHOW_NAME = 'LAY_FORM_INPUT_AFFIX_SHOW'; - var isShow = othis.data(SHOW_NAME); - - othis.attr('type', isShow ? 'password' : 'text').data(SHOW_NAME, !isShow); - renderSuffix(isShow ? 'eye-invisible' : 'eye'); - }] + // 动态点缀配置项 + var affixOptions = { + eye: { // 密码显隐 + value: 'eye-invisible', + click: function(elem, opts){ // 事件 + var SHOW_NAME = 'LAY_FORM_INPUT_AFFIX_SHOW'; + var isShow = elem.data(SHOW_NAME); + + elem.attr('type', isShow ? 'password' : 'text').data(SHOW_NAME, !isShow); + + renderAffix({ + value: isShow ? 'eye-invisible' : 'eye' + }); + } + }, + clear: { // 内容清除 + value: 'clear', + click: function(elem){ + elem.val('').focus(); + showAffix($(this).parent(), null); + }, + show: 'auto', // 根据输入框值是否来显示或隐藏点缀图标 + disabled: disabled // 跟随输入框禁用状态 + } }; - obj[affix] && obj[affix][0](); + renderAffix(); }); } @@ -594,16 +629,16 @@ layui.define(['layer', 'util'], function(exports){ // 勾选 reElem.on('click', function(){ var filter = check.attr('lay-filter') // 获取过滤器 - ,text = (check.attr('lay-text')||'').split('|'); + var title = (check.attr('title')||'').split('|'); if(check[0].disabled) return; check[0].checked ? ( check[0].checked = false - ,reElem.removeClass(RE_CLASS[1]).find('em').text(text[1]) + ,reElem.removeClass(RE_CLASS[1]).find('em').text(title[1]) ) : ( check[0].checked = true - ,reElem.addClass(RE_CLASS[1]).find('em').text(text[0]) + ,reElem.addClass(RE_CLASS[1]).find('em').text(title[0]) ); layui.event.call(check[0], MOD_NAME, RE_CLASS[2]+'('+ filter +')', { @@ -615,9 +650,12 @@ layui.define(['layer', 'util'], function(exports){ } checks.each(function(index, check){ - var othis = $(this), skin = othis.attr('lay-skin') - ,text = (othis.attr('lay-text') || '').split('|'), disabled = this.disabled; - if(skin === 'switch') skin = '_'+skin; + var othis = $(this); + var skin = othis.attr('lay-skin') || 'primary'; + var title = (check.title.replace(/\s/g, '') || '').split('|'); + var disabled = this.disabled; + + if(skin === 'switch') skin = '_'+ skin; var RE_CLASS = CLASS[skin] || CLASS.checkbox; if(typeof othis.attr('lay-ignore') === 'string') return othis.show(); @@ -631,16 +669,15 @@ layui.define(['layer', 'util'], function(exports){ ,(skin ? ' lay-skin="'+ skin +'"' : '') // 风格 ,'>' ,function(){ // 不同风格的内容 - var title = check.title.replace(/\s/g, '') - ,type = { + var type = { // 复选框 checkbox: [ - (title ? (''+ util.escape(check.title) +'') : '') + (title[0] ? (''+ util.escape(title[0]) +'') : '') ,'' ].join('') // 开关 - ,_switch: ''+ ((check.checked ? text[0] : text[1]) || '') +'' + ,_switch: ''+ ((check.checked ? title[0] : title[1]) || '') +'' }; return type[skin] || type['checkbox']; }() @@ -712,31 +749,42 @@ layui.define(['layer', 'util'], function(exports){ }); } }; + + // 执行所有渲染项 + var renderItem = function(){ + layui.each(items, function(index, item){ + item(); + }); + }; + + // jquery 对象 if (layui.type(type) === 'object') { - // jquery 对象 - type.each(function (index, item) { - var elem = $(item); - if (!elem.closest(ELEM).length) { - // 如果不是存在layui-form中的直接跳过 - return; - } - if (item.tagName === 'SELECT') { - items['select'](elem); - } else if (item.tagName === 'INPUT') { - var itemType = item.type; - if (itemType === 'checkbox' || itemType === 'radio') { - items[itemType](elem); - } else { - items['input'](elem); + // 若对象为表单域容器 + if($(type).is(ELEM)){ + elemForm = $(type); + renderItem(); + } else { // 对象为表单项 + type.each(function (index, item) { + var elem = $(item); + if (!elem.closest(ELEM).length) { + return; // 若不在 layui-form 容器中直接跳过 } - } - }); + if (item.tagName === 'SELECT') { + items['select'](elem); + } else if (item.tagName === 'INPUT') { + var itemType = item.type; + if (itemType === 'checkbox' || itemType === 'radio') { + items[itemType](elem); + } else { + items['input'](elem); + } + } + }); + } } else { type ? ( items[type] ? items[type]() : hint.error('不支持的 "'+ type + '" 表单渲染') - ) : layui.each(items, function(index, item){ - item(); - }); + ) : renderItem(); } return that; }; @@ -766,7 +814,7 @@ layui.define(['layer', 'util'], function(exports){ var othis = $(this); var verifyStr = othis.attr('lay-verify') || ''; var vers = verifyStr.split('|'); - var verType = othis.attr('lay-verType'); // 提示方式 + var verType = othis.attr('lay-vertype'); // 提示方式 var value = othis.val(); othis.removeClass(DANGER); // 移除警示样式 @@ -791,7 +839,7 @@ layui.define(['layer', 'util'], function(exports){ errorText = errorText || rule[1]; if(thisVer === 'required'){ - errorText = othis.attr('lay-reqText') || errorText; + errorText = othis.attr('lay-reqtext') || errorText; } // 若为必填项或者非空命中校验，则阻止提交，弹出提示 @@ -867,16 +915,17 @@ layui.define(['layer', 'util'], function(exports){ // 事件 return layui.event.call(this, MOD_NAME, 'submit('+ layFilter +')', params); }; - - // 自动完成渲染 - var form = new Form() - ,$dom = $(document), $win = $(window); + var form = new Form(); + var $dom = $(document); + var $win = $(window); + + // 初始自动完成渲染 $(function(){ form.render(); }); - // 表单reset重置渲染 + // 表单 reset 重置渲染 $dom.on('reset', ELEM, function(){ var filter = $(this).attr('lay-filter'); setTimeout(function(){ diff --git a/src/modules/lay.js b/src/modules/lay.js index fceff512..aff58385 100644 --- a/src/modules/lay.js +++ b/src/modules/lay.js @@ -1,5 +1,5 @@ -/** lay 基础 DOM 操作 | MIT Licensed */ +/** lay 基础模块 | MIT Licensed */ ;!function(window){ //gulp build: lay-header "use strict"; diff --git a/src/modules/table.js b/src/modules/table.js index 15a00427..cbdddb16 100644 --- a/src/modules/table.js +++ b/src/modules/table.js @@ -19,10 +19,10 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){ // api var table = { config: { // 全局配置项 - checkName: 'LAY_CHECKED' // 是否选中状态的字段名 + checkName: 'LAY_CHECKED' // 是否选中状态的特定字段名 ,indexName: 'LAY_TABLE_INDEX' // 初始下标索引名，用于恢复当前页表格排序 ,numbersName: 'LAY_INDEX' // 序号 - ,disabledName: 'LAY_DISABLED' + ,disabledName: 'LAY_DISABLED' // 禁用状态的特定字段名 } ,cache: {} // 数据缓存 ,index: layui.table ? (layui.table.index + 10000) : 0 @@ -909,7 +909,11 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){ var response = options.response; var sort = function(){ if(typeof options.initSort === 'object'){ - that.sort(options.initSort.field, options.initSort.type); + that.sort({ + field: options.initSort.field, + type: options.initSort.type, + reloadType: opts.type + }); } }; @@ -1049,7 +1053,12 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){ var thisCheckedRowIndex; if(!sort && that.sortKey){ - return that.sort(that.sortKey.field, that.sortKey.sort, true); + return that.sort({ + field: that.sortKey.field, + type: that.sortKey.sort, + pull: true, + reloadType: opts.type + }); } layui.each(data, function(i1, item1){ var tds = [], tds_fixed = [], tds_fixed_r = [] @@ -1082,9 +1091,13 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){ if(item3.colGroup) return; // td 内容 - var td = ['td'); - + var content = item1[item3.field]; if(content === undefined || content === null) content = ''; i1 == 0 && dataTitle.push(item3.fieldTitle || item3.title || item3.field || ''); - vals.push('"'+ parseTempData.call(thatTable, { + + // 解析内容 + content = parseTempData.call(thatTable, { item3: item3 ,content: content ,tplData: item1 ,text: 'text' - ,obj: thatTable.commonMember.call(td.eq(0), { + ,obj: { td: function(field){ + var td = thatTable.layBody.find('tr[data-index="'+ i1 +'"]>td'); return td.filter('[data-field="'+ field +'"]'); } - }) - }) + '"'); + } + }); + + // 异常处理 + content = content.replace(/"/g, '""'); // 避免内容存在「双引号」导致异常分隔 + content += '\t'; // 加「水平制表符」 避免内容被转换格式 + content = '"'+ content +'"'; // 避免内容存在「逗号」导致异常分隔 + + // 插入内容 + vals.push(content); } }); } @@ -2532,7 +2597,7 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){ return dataTitle.join(',') + '\r\n' + dataMain.join('\r\n') + '\r\n' + dataTotal.join(','); }()); - + //return; alink.download = (options.title || config.title || 'table_'+ (config.index || '')) + '.' + type; document.body.appendChild(alink); alink.click(); @@ -2541,14 +2606,14 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){ // 重置表格尺寸结构 table.resize = function(id){ - //如果指定表格唯一 id，则只执行该 id 对应的表格实例 + // 若指定表格唯一 id，则只执行该 id 对应的表格实例 if(id){ - var config = getThisTableConfig(id); //获取当前实例配置项 + var config = getThisTableConfig(id); // 获取当前实例配置项 if(!config) return; getThisTable(id).resize(); - } else { //否则重置所有表格实例尺寸 + } else { // 否则重置所有表格实例尺寸 layui.each(thisTable.that, function(){ this.resize(); }); diff --git a/src/modules/util.js b/src/modules/util.js index 33ce44f4..c8495f34 100644 --- a/src/modules/util.js +++ b/src/modules/util.js @@ -260,6 +260,17 @@ layui.define('jquery', function(exports){ .replace(/\</g, '<').replace(/\>/g, '>') .replace(/\'/g, '\'').replace(/\"/g, '"'); } + + // 打开新窗口 + ,openWin: function(options){ + var win; + options = options || {}; + win = options.window || window.open((options.url || ''), options.target, options.specs); + if(options.url) return; + win.document.open('text/html', 'replace'); + win.document.write(options.content || ''); + win.document.close(); + } //让指定的元素保持在可视区域 ,toVisibleArea: function(options){