floraachy/layui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/main' into main

Browse Source 
# Conflicts:
#	src/modules/table.js
This commit is contained in:
sunxb 2023-01-29 14:07:00 +08:00
commit 4140fbfb7a
15 changed files with 871 additions and 507 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@ -25,7 +25,7 @@
---
Layui 是一套开源的 Web UI 组件库，采用自身轻量级模块化规范，遵循原生态的 HTML/CSS/JavaScript 开发模式，极易上手，拿来即用。其风格简约，而内在丰盈，利于实现网页界面的快速构建。Layui 区别于一众主流的前端框架，却并非逆道而行，而是信奉返璞归真之道。确切地说，它更多是面向于追求简单的务实主义者，他们无需涉足各类构建工具，只需面向浏览器本身，即可轻松掌握页面所需的元素与交互，进而信手拈来。
Layui 是一套开源的 Web UI 组件库，采用自身轻量级模块化规范，遵循原生态的 HTML/CSS/JavaScript 开发模式，极易上手，拿来即用。其风格简约轻盈，而内在雅致丰盈，甚至包括文档在内的每一处细节都经过精心雕琢，非常适合网页界面的快速构建。Layui 区别于一众主流的前端框架，却并非逆道而行，而是信奉返璞归真之道。确切地说，它更多是面向于追求简单的务实主义者，即无需涉足各类构建工具，只需面向浏览器本身，便可将页面所需呈现的元素与交互信手拈来。
## 快速上手

2
dist/css/layui.css vendored
View File

File diff suppressed because one or more lines are too long

2
dist/layui.js vendored
View File

File diff suppressed because one or more lines are too long

141
examples/form.html
View File

@ -17,17 +17,19 @@
</head>
<body>
<form class="layui-form" method="get" lay-filter="top">
<div class="layui-form-item">
<div class="layui-inline layui-input-group">
<div class="layui-input-split layui-input-prefix">
前置信息
</div>
<input type="text" name="arr[]" required lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
<div class="layui-input-split layui-input-suffix">
后置信息
<div class="layui-row layui-col-space16">
<div class="layui-col-md3">
<div class="layui-input-group">
<div class="layui-input-split layui-input-prefix">
前置信息
</div>
<input type="text" name="arr[]" required lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
<div class="layui-input-split layui-input-suffix">
后置信息
</div>
</div>
</div>
<div class="layui-inline">
<div class="layui-col-md3">
<div class="layui-input-wrap">
<input type="text" name="arr[]" required placeholder="请输入" autocomplete="off" class="layui-input">
<div class="layui-input-split">
@ -35,75 +37,87 @@
</div>
</div>
</div>
</div>
<div class="layui-form-item">
<div class="layui-inline layui-input-wrap layui-input-wrap-prefix">
<div class="layui-input-prefix">
<i class="layui-icon layui-icon-username"></i>
<div class="layui-col-md3">
<div class="layui-input-wrap">
<div class="layui-input-prefix">
<i class="layui-icon layui-icon-username"></i>
</div>
<input type="text" name="arr[]" value="" required placeholder="请输入" autocomplete="off" class="layui-input" lay-affix="clear">
</div>
<input type="text" name="arr[]" value="" required placeholder="请输入" autocomplete="off" class="layui-input" lay-affix="clear">
</div>
<div class="layui-inline layui-input-wrap layui-input-wrap-prefix">
<div class="layui-input-prefix">
<i class="layui-icon layui-icon-password"></i>
<div class="layui-col-md3">
<div class="layui-input-wrap">
<div class="layui-input-prefix">
<i class="layui-icon layui-icon-password"></i>
</div>
<input type="password" name="arr[]" value="" required placeholder="请输入" autocomplete="off" class="layui-input" lay-affix="eye">
</div>
<input type="password" name="arr[]" value="" required placeholder="请输入" autocomplete="off" class="layui-input" lay-affix="eye">
</div>
</div>
<div class="layui-form-item">
<div class="layui-inline layui-input-wrap layui-input-wrap-prefix">
<div class="layui-input-prefix layui-input-split">
<i class="layui-icon layui-icon-username"></i>
<div class="layui-col-md3">
<div class="layui-input-wrap">
<input type="text" name="arr[]" value="" required placeholder="自定义动态点缀图标" autocomplete="off" class="layui-input" lay-affix="set" lay-filter="set">
</div>
<input type="text" name="arr[]" value="" required placeholder="请输入" autocomplete="off" class="layui-input" lay-affix="clear" style="padding-left: 45px;">
</div>
<div class="layui-inline layui-input-wrap">
<input type="text" name="arr[]" value="" required placeholder="请输入" autocomplete="off" class="layui-input" lay-affix="clear">
<div class="layui-col-md3">
<div class="layui-input-wrap">
<div class="layui-input-prefix layui-input-split">
<i class="layui-icon layui-icon-username"></i>
</div>
<input type="text" name="arr[]" value="" required placeholder="请输入" autocomplete="off" class="layui-input" lay-affix="clear">
</div>
</div>
<div class="layui-inline layui-input-wrap">
<input type="text" name="arr[]" value="禁用或只读状态" disabled placeholder="请输入" autocomplete="off" class="layui-input" lay-affix="clear">
<div class="layui-col-md3">
<div class="layui-input-wrap">
<input type="text" name="arr[]" value="" required placeholder="请输入" autocomplete="off" class="layui-input" lay-affix="clear">
</div>
</div>
</div>
<div class="layui-form-item">
<div class="layui-inline">
<div class="layui-input-wrap layui-input-wrap-prefix">
<div class="layui-col-md3">
<div class="layui-input-wrap">
<input type="text" name="arr[]" value="禁用或只读状态" disabled placeholder="请输入" autocomplete="off" class="layui-input" lay-affix="clear">
</div>
</div>
<div class="layui-col-md3">
<div class="layui-input-wrap">
<div class="layui-input-prefix">
<i class="layui-icon layui-icon-date"></i>
</div>
<input type="text" name="arr[]" required placeholder="请输入" autocomplete="off" class="layui-input">
<input type="text" name="arr[]" required placeholder="前缀和后缀" autocomplete="off" class="layui-input">
<div class="layui-input-suffix">
<i class="layui-icon layui-icon-down"></i>
</div>
</div>
</div>
<div class="layui-inline">
<div class="layui-col-md3">
<div class="layui-input-wrap">
<input type="text" name="arr[]" required placeholder="请输入" autocomplete="off" class="layui-input">
<input type="text" name="arr[]" required placeholder="后缀+clear" lay-affix="clear" autocomplete="off" class="layui-input">
<div class="layui-input-suffix">
<i class="layui-icon layui-icon-more-vertical"></i>
</div>
</div>
</div>
<div class="layui-inline layui-input-wrap layui-input-wrap-prefix">
<div class="layui-input-prefix">
<i class="layui-icon layui-icon-username"></i>
<div class="layui-col-md3">
<div class="layui-input-wrap">
<div class="layui-input-prefix">
<i class="layui-icon layui-icon-username"></i>
</div>
<select name="selectdemo">
<option value="">在 select 中使用</option>
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="广州">广州</option>
<option value="深圳">深圳</option>
</select>
</div>
<select name="selectdemo">
<option value="">请选择</option>
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="广州">广州</option>
<option value="深圳">深圳</option>
</select>
</div>
</div>
<div class="layui-form-item">
<button class="layui-btn" id="testSubmit">立即提交</button>
</div>
<div class="layui-col-md12">
<div class="layui-input-wrap">
<textarea class="layui-textarea" lay-affix="clear"></textarea>
</div>
</div>
<div class="layui-col-md12">
<button class="layui-btn" id="testSubmit">立即提交</button>
</div>
</div>
</form>
<hr>
@ -282,25 +296,25 @@
</div>
</div>
<div class="layui-form-item" pane>
<label class="layui-form-label">原始复选框</label>
<label class="layui-form-label">标签框</label>
<div class="layui-input-block">
<input type="checkbox" name="like1[write]" lay-skin="primary" title="写作">
<input type="checkbox" name="like1[read]" lay-skin="primary" title="阅读">
<input type="checkbox" name="like1[game]" lay-skin="primary" title="游戏" disabled>
<input type="checkbox" name="like1[write]" lay-skin="tag" title="写作">
<input type="checkbox" name="like1[read]" lay-skin="tag" title="阅读">
<input type="checkbox" name="like1[game]" lay-skin="tag" title="游戏" disabled>
</div>
</div>
<div class="layui-form-item" pane>
<label class="layui-form-label">开关关</label>
<div class="layui-input-block">
<input type="checkbox" name="close" lay-skin="switch" title="开关">
<input type="checkbox" name="close2" lay-skin="switch" title="开关" lay-text="ON|OFF" disabled>
<input type="checkbox" name="close2" lay-skin="switch" title="|OFF" disabled>
</div>
</div>
<div class="layui-form-item" pane>
<label class="layui-form-label">开关开</label>
<div class="layui-input-block">
<input type="checkbox" checked name="open" lay-skin="switch" lay-filter="switchTest" lay-text="ON|OFF">
<input type="checkbox" name="open2" lay-skin="switch" lay-filter="switchTest" lay-text="已绑定|绑定">
<input type="checkbox" checked name="open" lay-skin="switch" lay-filter="switchTest" title="ON|OFF">
<input type="checkbox" name="open2" lay-skin="switch" lay-filter="switchTest" title="已绑定|绑定">
</div>
</div>
<div class="layui-form-item" pane>
@ -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){

8
examples/table-test.html
View File

@ -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:'邮箱 <i class="layui-icon layui-icon-email"></i>', hide: 0, edit: 'text', templet: function(d){
,{field:'email', minWidth: 160, maxWidth: 320, title:'邮箱 <i class="layui-icon layui-icon-email"></i>', fieldTitle: '邮箱', hide: 0, edit: 'text', templet: function(d){
return '<em>'+ layui.util.escape(d.email) +'</em>'
}}
,{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 新增
}
}

2
package.json
View File

@ -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",

117
src/css/layui.css
View File

@ -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;}

34
src/css/modules/code.css
View File

@ -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}
.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;}

2
src/layui.js
View File

@ -15,7 +15,7 @@
}
,Layui = function(){
this.v = '2.8.0-rc.5'; // Layui 版本号
this.v = '2.8.0-rc.6'; // Layui 版本号
}
//识别预先可能定义的指定全局对象

2
src/modules/all.js
View File

@ -1,4 +1,4 @@
/*!
/**
* 用于加载所有内置模块
* MIT Licensed
*/

212
src/modules/code.js
View File

@ -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: '&lt;/&gt;', // 标题
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 = $('<div class="'+ CONST.ELEM_PREVIEW +'">');
var elemTabView = $('<div class="layui-tab layui-tab-brief">');
var elemHeaderView = $('<div class="layui-tab-title">');
var elemPreviewView = $('<div class="'+ [
CONST.ELEM_ITEM,
CONST.ELEM_ITEM +'-preview',
'layui-border'
].join(' ') +'">');
var elemToolbar = $('<div class="layui-code-tools"></div>');
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 = $('<li lay-id="'+ v +'">');
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(
'<i class="layui-icon layui-icon-'+ className +'" data-type="'+ v +'" title="'+ title[0] +'"></i>'
);
});
// 移除旧结构
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('<iframe></iframe>');
}
// 执行预览
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 = $('<div class="'+ ELEM_TITLE +'">');
var headerElem = $('<div class="'+ CONST.ELEM_TITLE +'">');
// 添加组件 clasName
othis.addClass('layui-code-view layui-box');
@ -72,7 +257,7 @@ layui.define(['lay', 'util'], function(exports){
othis.html(listElem.html('<li>' + html + '</li>'));
// 创建 header
if(!othis.children('.'+ ELEM_TITLE)[0]){
if(options.header && !othis.children('.'+ CONST.ELEM_TITLE)[0]){
headerElem.html(options.title + (
options.about
? '<div class="layui-code-about">' + options.about + '</div>'
@ -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);
});

217
src/modules/form.js
View File

@ -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 = $(['<div class="layui-input-suffix layui-input-affix-event"'+ (
_disabled ? ' disabled' : ''
) +'>'
,'<i class="layui-icon layui-icon-'+ type + (
_disabled ? ' layui-disabled' : ''
) +'"></i>'
,'</div>'].join(''));
// 渲染动态点缀内容
var renderAffix = function(opts){
opts = $.extend({}, (affixOptions[affix] || {
value: affix
}), opts, lay.options(othis[0]));
var elemAffix = $('<div class="'+ CLASS_AFFIX +'">');
var elemIcon = $('<i class="layui-icon layui-icon-'+ opts.value + (
opts.disabled ? (' '+ DISABLED) : ''
) +'"></i>');
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 ? ('<span>'+ util.escape(check.title) +'</span>') : '')
(title[0] ? ('<span>'+ util.escape(title[0]) +'</span>') : '')
,'<i class="layui-icon layui-icon-ok"></i>'
].join('')
// 开关
,_switch: '<em>'+ ((check.checked ? text[0] : text[1]) || '') +'</em><i></i>'
,_switch: '<em>'+ ((check.checked ? title[0] : title[1]) || '') +'</em><i></i>'
};
return type[skin] || type['checkbox'];
}()
@ -712,31 +749,42 @@ layui.define(['layer', 'util'], function(exports){
});
}
};
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);
}
}
// 执行所有渲染项
var renderItem = function(){
layui.each(items, function(index, item){
item();
});
};
// jquery 对象
if (layui.type(type) === 'object') {
// 若对象为表单域容器
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(){

2
src/modules/lay.js
View File

@ -1,5 +1,5 @@
/** lay 基础 DOM 操作 | MIT Licensed */
/** lay 基础模块 | MIT Licensed */
;!function(window){ //gulp build: lay-header
"use strict";

624
src/modules/table.js
View File

@ -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
});
}
};
@ -1024,177 +1028,6 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
}
};
// 渲染视图
Class.prototype.renderView = function (sort, type) {
var that = this;
var options = that.config;
var data = table.cache[that.key];
var trs = [];
var trs_fixed = [];
var trs_fixed_r = [];
options.HAS_SET_COLS_PATCH || that.setColsPatch();
options.HAS_SET_COLS_PATCH = true;
var thisCheckedRowIndex;
if(!sort && that.sortKey){
return that.sort(that.sortKey.field, that.sortKey.sort, true, null, type);
}
layui.each(data, function(i1, item1){
var tds = [], tds_fixed = [], tds_fixed_r = []
,numbers = i1 + options.limit*(that.page - 1) + 1; // 序号
// 数组值是否为 object，如果不是，则自动转为 object
if(typeof item1 !== 'object'){
data[i1] = item1 = {LAY_KEY: item1};
try {
table.cache[that.key][i1] = item1;
} catch(e) {}
}
//若数据项为空数组，则不往下执行（因为删除数据时，会将原有数据设置为 []）
if(layui.type(item1) === 'array' && item1.length === 0) return;
// 加入序号保留字段
item1[table.config.numbersName] = numbers;
// 记录下标索引，用于恢复排序
if(!sort) item1[table.config.indexName] = i1;
// 遍历表头
that.eachCols(function(i3, item3){
var field = item3.field || i3;
var key = item3.key;
var content = item1[field];
if(content === undefined || content === null) content = '';
if(item3.colGroup) return;
// td 内容
var td = ['<td data-field="'+ field +'" data-key="'+ key +'" '+ function(){ //追加各种属性
var attr = [];
if(item3.edit) attr.push('data-edit="true"'); // 允许单元格编辑
if(item3.templet) attr.push('data-content="'+ util.escape(content) +'"'); //自定义模板
if(item3.toolbar) attr.push('data-off="true"'); //行工具列关闭单元格事件
if(item3.event) attr.push('lay-event="'+ item3.event +'"'); //自定义事件
if(item3.minWidth) attr.push('data-minwidth="'+ item3.minWidth +'"'); //单元格最小宽度
if(item3.maxWidth) attr.push('data-maxwidth="'+ item3.maxWidth +'"'); //单元格最大宽度
return attr.join(' ');
}() +' class="'+ function(){ //追加样式
var classNames = [];
if(item3.hide) classNames.push(HIDE); //插入隐藏列样式
if(!item3.field) classNames.push(ELEM_COL_SPECIAL); //插入特殊列样式
return classNames.join(' ');
}() +'">'
,'<div class="layui-table-cell laytable-cell-'+ function(){ //返回对应的CSS类标识
return item3.type === 'normal' ? key
: (key + ' laytable-cell-' + item3.type);
}() +'"'
+ (item3.align ? ' align="'+ item3.align +'"' : '')
+ function(){
var attr = [];
if(item3.style) attr.push('style="'+ item3.style +'"'); //自定义单元格样式
return attr.join(' ');
}() +'>'
+ function(){
var tplData = $.extend(true, {
LAY_COL: item3
}, item1);
var checkName = table.config.checkName;
var disabledName = table.config.disabledName;
//渲染不同风格的列
switch(item3.type){
case 'checkbox': // 复选
return '<input type="checkbox" name="layTableCheckbox" lay-skin="primary" '+ function(){
// 其他属性
var arr = [];
//如果是全选
if(item3[checkName]){
item1[checkName] = item3[checkName];
if(item3[checkName]) arr[0] = 'checked';
}
if(tplData[checkName]) arr[0] = 'checked';
// 禁选
if(tplData[disabledName]) arr.push('disabled');
return arr.join(' ');
}() +'>';
break;
case 'radio': // 单选
if(tplData[checkName]){
thisCheckedRowIndex = i1;
}
return '<input type="radio" name="layTableRadio_'+ options.index +'" '
+ function(){
var arr = [];
if(tplData[checkName]) arr[0] = 'checked';
if(tplData[disabledName]) arr.push('disabled');
return arr.join(' ');
}() +' lay-type="layTableRadio">';
break;
case 'numbers':
return numbers;
break;
};
//解析工具列模板
if(item3.toolbar){
return laytpl($(item3.toolbar).html()||'').render(tplData);
}
return parseTempData.call(that, {
item3: item3
,content: content
,tplData: tplData
});
}()
,'</div></td>'].join('');
tds.push(td);
if(item3.fixed && item3.fixed !== 'right') tds_fixed.push(td);
if(item3.fixed === 'right') tds_fixed_r.push(td);
});
trs.push('<tr data-index="'+ i1 +'">'+ tds.join('') + '</tr>');
trs_fixed.push('<tr data-index="'+ i1 +'">'+ tds_fixed.join('') + '</tr>');
trs_fixed_r.push('<tr data-index="'+ i1 +'">'+ tds_fixed_r.join('') + '</tr>');
});
// 容器的滚动条位置
if(!(options.scrollPos === 'fixed' && type === 'reloadData')){
that.layBody.scrollTop(0);
}
if(options.scrollPos === 'reset'){
that.layBody.scrollLeft(0);
}
that.layMain.find('.'+ NONE).remove();
that.layMain.find('tbody').html(trs.join(''));
that.layFixLeft.find('tbody').html(trs_fixed.join(''));
that.layFixRight.find('tbody').html(trs_fixed_r.join(''));
that.renderForm();
typeof thisCheckedRowIndex === 'number' && that.setThisRowChecked(thisCheckedRowIndex);
that.syncCheckAll();
// 因为 page 参数有可能发生变化 先重新铺满
that.fullSize();
// 滚动条补丁
that.haveInit ? that.scrollPatch() : setTimeout(function(){
that.scrollPatch();
}, 50);
that.haveInit = true;
layer.close(that.tipsIndex);
that.renderTotal(data, that.totalRowData); //数据合计
that.layTotal && that.layTotal.removeClass(HIDE);
}
// 数据渲染
Class.prototype.renderData = function(opts){
@ -1207,7 +1040,181 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
var sort = opts.sort;
var data = res[options.response.dataName] || []; //列表数据
that.totalRowData = res[options.response.totalRowName]; //合计行数据
var totalRowData = res[options.response.totalRowName]; //合计行数据
var trs = [];
var trs_fixed = [];
var trs_fixed_r = [];
// 渲染视图
var render = function(){ // 后续性能提升的重点
// 同步表头父列的相关值
options.HAS_SET_COLS_PATCH || that.setColsPatch();
options.HAS_SET_COLS_PATCH = true;
var thisCheckedRowIndex;
if(!sort && that.sortKey){
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 = []
,numbers = i1 + options.limit*(curr - 1) + 1; // 序号
// 数组值是否为 object，如果不是，则自动转为 object
if(typeof item1 !== 'object'){
data[i1] = item1 = {LAY_KEY: item1};
try {
table.cache[that.key][i1] = item1;
} catch(e) {}
}
//若数据项为空数组，则不往下执行（因为删除数据时，会将原有数据设置为 []）
if(layui.type(item1) === 'array' && item1.length === 0) return;
// 加入序号保留字段
item1[table.config.numbersName] = numbers;
// 记录下标索引，用于恢复排序
if(!sort) item1[table.config.indexName] = i1;
// 遍历表头
that.eachCols(function(i3, item3){
var field = item3.field || i3;
var key = item3.key;
var content = item1[field];
if(content === undefined || content === null) content = '';
if(item3.colGroup) return;
// td 内容
var td = ['<td data-field="'+ field +'" data-key="'+ key +'" '+ function(){
//追加各种属性
var attr = [];
// 是否开启编辑。若 edit 传入函数，则根据函数的返回结果判断是否开启编辑
(function(edit){
if(edit) attr.push('data-edit="'+ edit +'"'); // 添加单元格编辑属性标识
})(typeof item3.edit === 'function' ? item3.edit(item1) : item3.edit);
if(item3.templet) attr.push('data-content="'+ util.escape(content) +'"'); //自定义模板
if(item3.toolbar) attr.push('data-off="true"'); //行工具列关闭单元格事件
if(item3.event) attr.push('lay-event="'+ item3.event +'"'); //自定义事件
if(item3.minWidth) attr.push('data-minwidth="'+ item3.minWidth +'"'); //单元格最小宽度
if(item3.maxWidth) attr.push('data-maxwidth="'+ item3.maxWidth +'"'); //单元格最大宽度
return attr.join(' ');
}() +' class="'+ function(){ //追加样式
var classNames = [];
if(item3.hide) classNames.push(HIDE); //插入隐藏列样式
if(!item3.field) classNames.push(ELEM_COL_SPECIAL); //插入特殊列样式
return classNames.join(' ');
}() +'">'
,'<div class="layui-table-cell laytable-cell-'+ function(){ //返回对应的CSS类标识
return item3.type === 'normal' ? key
: (key + ' laytable-cell-' + item3.type);
}() +'"'
+ (item3.align ? ' align="'+ item3.align +'"' : '')
+ function(){
var attr = [];
if(item3.style) attr.push('style="'+ item3.style +'"'); //自定义单元格样式
return attr.join(' ');
}() +'>'
+ function(){
var tplData = $.extend(true, {
LAY_COL: item3
}, item1);
var checkName = table.config.checkName;
var disabledName = table.config.disabledName;
//渲染不同风格的列
switch(item3.type){
case 'checkbox': // 复选
return '<input type="checkbox" name="layTableCheckbox" lay-skin="primary" '+ function(){
// 其他属性
var arr = [];
//如果是全选
if(item3[checkName]){
item1[checkName] = item3[checkName];
if(item3[checkName]) arr[0] = 'checked';
}
if(tplData[checkName]) arr[0] = 'checked';
// 禁选
if(tplData[disabledName]) arr.push('disabled');
return arr.join(' ');
}() +'>';
break;
case 'radio': // 单选
if(tplData[checkName]){
thisCheckedRowIndex = i1;
}
return '<input type="radio" name="layTableRadio_'+ options.index +'" '
+ function(){
var arr = [];
if(tplData[checkName]) arr[0] = 'checked';
if(tplData[disabledName]) arr.push('disabled');
return arr.join(' ');
}() +' lay-type="layTableRadio">';
break;
case 'numbers':
return numbers;
break;
};
//解析工具列模板
if(item3.toolbar){
return laytpl($(item3.toolbar).html()||'').render(tplData);
}
return parseTempData.call(that, {
item3: item3
,content: content
,tplData: tplData
});
}()
,'</div></td>'].join('');
tds.push(td);
if(item3.fixed && item3.fixed !== 'right') tds_fixed.push(td);
if(item3.fixed === 'right') tds_fixed_r.push(td);
});
trs.push('<tr data-index="'+ i1 +'">'+ tds.join('') + '</tr>');
trs_fixed.push('<tr data-index="'+ i1 +'">'+ tds_fixed.join('') + '</tr>');
trs_fixed_r.push('<tr data-index="'+ i1 +'">'+ tds_fixed_r.join('') + '</tr>');
});
// 容器的滚动条位置
if(!(options.scrollPos === 'fixed' && opts.type === 'reloadData')){
that.layBody.scrollTop(0);
}
if(options.scrollPos === 'reset'){
that.layBody.scrollLeft(0);
}
that.layMain.find('.'+ NONE).remove();
that.layMain.find('tbody').html(trs.join(''));
that.layFixLeft.find('tbody').html(trs_fixed.join(''));
that.layFixRight.find('tbody').html(trs_fixed_r.join(''));
that.renderForm();
typeof thisCheckedRowIndex === 'number' && that.setThisRowChecked(thisCheckedRowIndex);
that.syncCheckAll();
// 因为 page 参数有可能发生变化 先重新铺满
that.fullSize();
// 滚动条补丁
that.haveInit ? that.scrollPatch() : setTimeout(function(){
that.scrollPatch();
}, 50);
that.haveInit = true;
layer.close(that.tipsIndex);
};
table.cache[that.key] = data; //记录数据
//显示隐藏合计栏
@ -1229,10 +1236,15 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
that.layFixLeft.removeClass(HIDE);
}
that.renderView(sort, opts.type); //渲染数据
if (sort) {
return;
//如果执行初始排序
if(sort){
return render();
}
//正常初始化数据渲染
render(); //渲染数据
that.renderTotal(data, totalRowData); //数据合计
that.layTotal && that.layTotal.removeClass(HIDE);
//同步分页状态
if(options.page){
@ -1342,6 +1354,7 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
if(typeof totalRow === 'string'){
return laytpl(totalRow).render($.extend({
TOTAL_NUMS: TOTAL_NUMS || totalNums[field],
TOTAL_ROW: totalRowData || {},
LAY_COL: item3
}, item3));
}
@ -1372,33 +1385,54 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
form.render(type, filter);
};
//标记当前行选中状态
Class.prototype.setThisRowChecked = function(index){
var that = this
,options = that.config
,ELEM_CLICK = 'layui-table-click'
,tr = that.layBody.find('tr[data-index="'+ index +'"]');
// 标记当前行选中状态
Class.prototype.setThisRowChecked = function(index, dataChecked){
var that = this;
var options = that.config;
var ELEM_CLICK = 'layui-table-click';
var tr = that.layBody.find('tr[data-index="'+ index +'"]');
// 同步数据选中属性值
if(dataChecked){
var thisData = table.cache[that.key];
// 重置数据单选选中属性
layui.each(thisData, function(i, item){
if(index === i){
item[options.checkName] = true;
} else {
delete item[options.checkName];
}
});
// 若存在单选框，则标注单选框选中样式
tr.find('input[lay-type="layTableRadio"]').prop('checked', true);
that.renderForm('radio');
}
// 选中样式
tr.addClass(ELEM_CLICK).siblings('tr').removeClass(ELEM_CLICK);
};
//数据排序
Class.prototype.sort = function(th, type, pull, formEvent, reloadType){
var that = this
,field
,res = {}
,options = that.config
,filter = options.elem.attr('lay-filter')
,data = table.cache[that.key], thisData;
// 数据排序
Class.prototype.sort = function(opts){ // field, type, pull, fromEvent
var that = this;
var field;
var res = {};
var options = that.config;
var filter = options.elem.attr('lay-filter');
var data = table.cache[that.key], thisData;
opts = opts || {};
//字段匹配
if(typeof th === 'string'){
field = th;
// 字段匹配
if(typeof opts.field === 'string'){
field = opts.field;
that.layHeader.find('th').each(function(i, item){
var othis = $(this)
,_field = othis.data('field');
if(_field === th){
th = othis;
if(_field === opts.field){
opts.field = othis;
field = _field;
return false;
}
@ -1406,37 +1440,37 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
}
try {
var field = field || th.data('field')
,key = th.data('key');
var field = field || opts.field.data('field')
,key = opts.field.data('key');
//如果欲执行的排序已在状态中，则不执行渲染
if(that.sortKey && !pull){
if(field === that.sortKey.field && type === that.sortKey.sort){
// 如果欲执行的排序已在状态中，则不执行渲染
if(that.sortKey && !opts.pull){
if(field === that.sortKey.field && opts.type === that.sortKey.sort){
return;
}
}
var elemSort = that.layHeader.find('th .laytable-cell-'+ key).find(ELEM_SORT);
that.layHeader.find('th').find(ELEM_SORT).removeAttr('lay-sort'); //清除其它标题排序状态
elemSort.attr('lay-sort', type || null);
that.layHeader.find('th').find(ELEM_SORT).removeAttr('lay-sort'); // 清除其它标题排序状态
elemSort.attr('lay-sort', opts.type || null);
that.layFixed.find('th')
} catch(e){
hint.error('Table modules: sort field \''+ field +'\' not matched');
}
//记录排序索引和类型
// 记录排序索引和类型
that.sortKey = {
field: field
,sort: type
,sort: opts.type
};
//默认为前端自动排序。如果否，则需自主排序（通常为服务端处理好排序）
// 默认为前端自动排序。如果否，则需自主排序（通常为服务端处理好排序）
if(options.autoSort){
if(type === 'asc'){ //升序
if(opts.type === 'asc'){ //升序
thisData = layui.sort(data, field);
} else if(type === 'desc'){ //降序
} else if(opts.type === 'desc'){ //降序
thisData = layui.sort(data, field, true);
} else { //清除排序
} else { // 清除排序
thisData = layui.sort(data, table.config.indexName);
delete that.sortKey;
delete options.initSort;
@ -1445,20 +1479,22 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
res[options.response.dataName] = thisData || data;
// 重载数据
that.renderData({
res: res,
curr: that.page,
count: that.count,
sort: true,
type: formEvent ? '' : reloadType // 通过按钮触发排序会默认回滚到顶部否则根据情况处理
type: opts.reloadType
});
if(formEvent){
// 排序是否来自于点击表头事件触发
if(opts.fromEvent){
options.initSort = {
field: field
,type: type
,type: opts.type
};
layui.event.call(th, MOD_NAME, 'sort('+ filter +')', $.extend({
layui.event.call(opts.field, MOD_NAME, 'sort('+ filter +')', $.extend({
config: options
}, options.initSort));
}
@ -1802,8 +1838,8 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
// 分页栏操作事件
that.layPagebar.on('click', '*[lay-event]', function(e){
var othis = $(this)
,events = othis.attr('lay-event');
var othis = $(this);
var events = othis.attr('lay-event');
layui.event.call(this, MOD_NAME, 'pagebar('+ filter +')', $.extend({
event: events
@ -1925,16 +1961,28 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
} else {
type = 'asc';
}
that.sort(othis, type, null, true);
that.sort({
field: othis,
type: type,
fromEvent: true
});
}).find(ELEM_SORT+' .layui-edge ').on('click', function(e){
var othis = $(this)
,index = othis.index()
,field = othis.parents('th').eq(0).data('field')
layui.stope(e);
if(index === 0){
that.sort(field, 'asc', null, true);
that.sort({
field: field,
type: 'asc',
fromEvent: true
});
} else {
that.sort(field, 'desc', null, true);
that.sort({
field: field,
type: 'desc',
fromEvent: true
});
}
});
@ -1946,25 +1994,26 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
var data = table.cache[that.key] || [];
data = data[index] || {};
return $.extend({
// 事件返回的公共成员
var obj = {
tr: tr //行元素
,config: options
,data: table.clearCacheKey(data) //当前行数据
,index: index
,del: function(){ //删除行数据
table.cache[that.key][index] = [];
tr.remove();
that.scrollPatch();
}
,update: function(fields, related){ //修改行数据
,update: function(fields, related){ // 修改行数据
fields = fields || {};
var trThat = this;
layui.each(fields, function(key, value){
var td = tr.children('td[data-field="'+ key +'"]');
var cell = td.children(ELEM_CELL); //获取当前修改的列
// 更新缓存中的数据
if(key in data) trThat.data[key] = data[key] = value;
if(key in data) data[key] = obj.data[key] = value;
// 更新相应列视图
that.eachCols(function(i, item3){
@ -1997,7 +2046,14 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
that.renderForm();
}
}, sets);
// 设置行选中状态
,setRowChecked: function(checked){
that.setThisRowChecked(index, true);
}
// 获取当前列
};
return $.extend(obj, sets);
};
// 复选框选择（替代元素的 click 事件）
@ -2034,23 +2090,15 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
);
});
//单选框选择
// 单选框选择
that.elem.on('click', 'input[lay-type="layTableRadio"]+', function(){
var radio = $(this).prev()
,checked = radio[0].checked
,thisData = table.cache[that.key]
,index = radio.parents('tr').eq(0).data('index');
//重置数据单选属性
layui.each(thisData, function(i, item){
if(index === i){
item[options.checkName] = true;
} else {
delete item[options.checkName];
}
});
that.setThisRowChecked(index);
var radio = $(this).prev();
var checked = radio[0].checked;
var index = radio.parents('tr').eq(0).data('index');
// 单选框选中状态
that.setThisRowChecked(index, true);
// 事件
layui.event.call(this, MOD_NAME, 'radio('+ filter +')', commonMember.call(this, {
checked: checked
}));
@ -2058,13 +2106,13 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
// 行事件
that.layBody.on('mouseenter', 'tr', function(){ //鼠标移入行
var othis = $(this)
,index = othis.index();
var othis = $(this);
var index = othis.index();
if(othis.data('off')) return; //不触发事件
that.layBody.find('tr:eq('+ index +')').addClass(ELEM_HOVER)
}).on('mouseleave', 'tr', function(){ //鼠标移出行
var othis = $(this)
,index = othis.index();
var othis = $(this);
var index = othis.index();
if(othis.data('off')) return; //不触发事件
that.layBody.find('tr:eq('+ index +')').removeClass(ELEM_HOVER)
}).on('click', 'tr', function(){ //单击行
@ -2081,8 +2129,8 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
var othis = $(this);
if(othis.data('off')) return; //不触发事件
layui.event.call(this,
MOD_NAME, eventType + '('+ filter +')'
,commonMember.call(othis.children('td')[0])
MOD_NAME, eventType + '('+ filter +')',
commonMember.call(othis.children('td')[0])
);
};
@ -2133,11 +2181,11 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
//事件回调的参数对象
var params = commonMember.call(td[0], {
value: value
,field: field
,oldValue: data[field] // 编辑前的值
,td: td
,reedit: function(){ // 重新编辑
value: value,
field: field,
oldValue: data[field], // 编辑前的值
td: td,
reedit: function(){ // 重新编辑
setTimeout(function(){
// 重新渲染为编辑状态
renderGridEdit(params.td);
@ -2147,6 +2195,9 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
obj[field] = params.oldValue;
params.update(obj);
});
},
getCol: function(){ // 获取当前列的表头配置信息
return that.col(td.data('key'));
}
});
@ -2282,14 +2333,16 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
});
})();
//初始化
// 初始化
table.init = function(filter, settings){
settings = settings || {};
var that = this;
var inst = null;
var elemTable = filter
? $('table[lay-filter="'+ filter +'"]')
: $(ELEM + '[lay-data], '+ ELEM + '[lay-options]');
var elemTable = typeof filter === 'object' ? filter : (
typeof filter === 'string'
? $('table[lay-filter="'+ filter +'"]')
: $(ELEM + '[lay-data], '+ ELEM + '[lay-options]')
);
var errorTips = 'Table element property lay-data configuration item has a syntax error: ';
//遍历数据表格
@ -2354,7 +2407,7 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
tableIns.reloadData({
data: options.data
})
});
}
});
@ -2481,15 +2534,15 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
if(device.ie) return hint.error('IE_NOT_SUPPORT_EXPORTS');
alink.href = 'data:'+ textType +';charset=utf-8,\ufeff'+ encodeURIComponent(function(){
var dataTitle = []
,dataMain = []
,dataTotal = []
,fieldsIsHide = {};
var dataTitle = [];
var dataMain = [];
var dataTotal = [];
var fieldsIsHide = {};
//表头和表体
// 表头和表体
layui.each(data, function(i1, item1){
var vals = [];
if(typeof id === 'object'){ //如果 id 参数直接为表头数据
if(typeof id === 'object'){ // 若 id 参数直接为表头数据
layui.each(id, function(i, item){
i1 == 0 && dataTitle.push(item || '');
});
@ -2499,29 +2552,38 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
} else {
table.eachCols(id, function(i3, item3){
if(item3.field && item3.type == 'normal'){
//不导出隐藏列
// 不导出隐藏列
if(item3.hide){
if(i1 == 0) fieldsIsHide[item3.field] = true; //记录隐藏列
if(i1 == 0) fieldsIsHide[item3.field] = true; // 记录隐藏列
return;
}
var content = item1[item3.field]
,td = thatTable.layBody.find('tr[data-index="'+ i1 +'"]>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);
}
});
}
@ -2535,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();
@ -2544,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();
});
@ -2660,16 +2722,6 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
// 重新适配尺寸
that.resize();
}
// 重新渲染视图
table.refresh = function (id) {
var that = getThisTable(id);
if (!that) {
return;
}
that.renderView(null, 'reloadData');
}
// 自动完成渲染
$(function(){

11
src/modules/util.js
View File

@ -260,6 +260,17 @@ layui.define('jquery', function(exports){
.replace(/\&lt;/g, '<').replace(/\&gt;/g, '>')
.replace(/\&#39;/g, '\'').replace(/\&quot;/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){