lsm/layui
1
0
Fork 0
mirror of https://gitee.com/layui/layui.git synced 2025-05-17 21:49:37 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Merge branch 'layui:2.x' into 2.x

Browse Source
This commit is contained in:
sunxiaobin89 2023-08-28 14:03:25 +08:00 committed by GitHub
commit 205fa1fcd7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
17 changed files with 470 additions and 288 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
.editorconfig Normal file
View File

@ -0,0 +1,11 @@
# editorconfig.org
root = true
[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
trim_trailing_whitespace = true
insert_final_newline = true

4
docs/laydate/index.md
View File

@ -34,7 +34,7 @@ toc: true
| [laydate.render(options)](#render) | laydate 组件渲染，核心方法。 | | [laydate.render(options)](#render) | laydate 组件渲染，核心方法。 |
| [laydate.hint(id, opts)](#hint) <sup>2.8+</sup> | 在对应的 laydate 组件面板上弹出提示层。 | | [laydate.hint(id, opts)](#hint) <sup>2.8+</sup> | 在对应的 laydate 组件面板上弹出提示层。 |
| [laydate.getInst(id)](#getInst) <sup>2.8+</sup> | 获取组件对应的渲染实例。 | | [laydate.getInst(id)](#getInst) <sup>2.8+</sup> | 获取组件对应的渲染实例。 |
| [laydate.unbind(id)](#close) <sup>2.8+</sup> | 对目标元素解除当前实例的绑定。 | | [laydate.unbind(id)](#unbind) <sup>2.8+</sup> | 对目标元素解除当前实例的绑定。 |
| [laydate.close(id)](#close) <sup>2.7+</sup> | 关闭日期面板。 | | [laydate.close(id)](#close) <sup>2.7+</sup> | 关闭日期面板。 |
| [laydate.getEndDate(month, year)](#getEndDate) | 获取某月的最后一天。 | | [laydate.getEndDate(month, year)](#getEndDate) | 获取某月的最后一天。 |
@ -160,7 +160,7 @@ laydate.render({
// 其他属性 … // 其他属性 …
}); });
// 关闭对应的日期面板 // 关闭对应的日期面板
laydate.cllose('test'); laydate.close('test');
``` ```
<h3 id="getEndDate" lay-pid="api" class="ws-anchor ws-bold">获取某月的最后一天</h3> <h3 id="getEndDate" lay-pid="api" class="ws-anchor ws-bold">获取某月的最后一天</h3>

2
docs/layer/examples/other.md
View File

@ -68,7 +68,7 @@ layui.use(function(){
} }
] ]
}, },
hideFooter: true // 是否隐藏底部栏 --- 2.8+ footer: false // 是否显示底部栏 --- 2.8.16+
}); });
}, },
'test-tips-photos': function(){ 'test-tips-photos': function(){

3
docs/layer/index.md
View File

@ -248,7 +248,8 @@ layer.prompt({
| 私有属性 | 描述 | 类型 | 默认值 | | 私有属性 | 描述 | 类型 | 默认值 |
| --- | --- | --- | --- | | --- | --- | --- | --- |
| photos | 图片层的数据源，格式详见下述示例。 | object | - | | photos | 图片层的数据源，格式详见下述示例。 | object | - |
| hideFooter <sup>2.8+</sup> | 是否隐藏底部栏 | boolean | `false` | | toolbar <sup>2.8.16+</sup> | 是否显示顶部工具栏 | boolean | `true` |
| footer <sup>2.8.16+</sup> | 是否隐藏底部栏 | boolean | `true` |
| tab | 图片层切换后的回调函数，返回的参数见下述示例 | function | - | | tab | 图片层切换后的回调函数，返回的参数见下述示例 | function | - |
该方法用于弹出图片层，基于 `type: 1`（即 `page` 层）的自定义内容。 该方法用于弹出图片层，基于 `type: 1`（即 `page` 层）的自定义内容。

3
docs/table/detail/demo.md
View File

@ -198,5 +198,4 @@
<h3 id="more-examples" class="ws-anchor ws-bold">更多示例</h3> <h3 id="more-examples" class="ws-anchor ws-bold">更多示例</h3>
> - [🎉 分享：在 table 组件中使用 select/dropdown/laydate 等组件实现多样化编辑](https://gitee.com/layui/layui/issues/I5JBUE) > - 🎉 不定期分享在 [Gitee Issues](https://gitee.com/layui/layui/issues)
> - 不定期分享在 [Gitee Issues](https://gitee.com/layui/layui/issues)

2
docs/table/examples/demo.md
View File

@ -75,7 +75,7 @@ layui.use(['table', 'dropdown'], function(){
{field:'username', width:80, title: '用户'}, {field:'username', width:80, title: '用户'},
{field:'email', title:'邮箱 <i class="layui-icon layui-icon-tips layui-font-14" lay-event="email-tips" title="该字段开启了编辑功能" style="margin-left: 5px;"></i>', fieldTitle: '邮箱', hide: 0, width:150, edit: 'text'}, {field:'email', title:'邮箱 <i class="layui-icon layui-icon-tips layui-font-14" lay-event="email-tips" title="该字段开启了编辑功能" style="margin-left: 5px;"></i>', fieldTitle: '邮箱', hide: 0, width:150, edit: 'text'},
{field:'sex', width:80, title: '性别', sort: true}, {field:'sex', width:80, title: '性别', sort: true},
{field:'sign', title: '签名', edit: 'textarea', minWidth: 260, expandedWidth: 260, style: '-moz-box-align: start;', totalRow: '{{!人物：<span class="layui-badge-rim">唐代：{{= d.TOTAL_ROW.era.tang }} </span> <span class="layui-badge-rim">宋代：{{= d.TOTAL_ROW.era.song }}</span> <span class="layui-badge-rim">现代：{{= d.TOTAL_ROW.era.xian }}</span>!}}'}, {field:'sign', title: '签名', edit: 'textarea', minWidth: 260, expandedWidth: 260, totalRow: '{{!人物：<span class="layui-badge-rim">唐代：{{= d.TOTAL_ROW.era.tang }} </span> <span class="layui-badge-rim">宋代：{{= d.TOTAL_ROW.era.song }}</span> <span class="layui-badge-rim">现代：{{= d.TOTAL_ROW.era.xian }}</span>!}}'},
{field:'experience', width: 100, title: '积分', sort: true, totalRow: '{{!{{= d.TOTAL_NUMS }} 😊!}}'}, {field:'experience', width: 100, title: '积分', sort: true, totalRow: '{{!{{= d.TOTAL_NUMS }} 😊!}}'},
{field:'checkin', title:'打卡', width: 100, sort: true, totalRow: '{{!{{= parseInt(d.TOTAL_NUMS) }} 次!}}'}, {field:'checkin', title:'打卡', width: 100, sort: true, totalRow: '{{!{{= parseInt(d.TOTAL_NUMS) }} 次!}}'},
{field:'ip', title:'IP', width: 120}, {field:'ip', title:'IP', width: 120},

2
examples/code.html
View File

@ -116,6 +116,8 @@ layui.use('code', function(){
// 通用实例，根据元素属性定制化参数 // 通用实例，根据元素属性定制化参数
layui.code({ layui.code({
//about: 'code' // 右上角默认显示 code //about: 'code' // 右上角默认显示 code
tools: ['tips'],
preview: true
}); });
// custom more about // custom more about

35
examples/layer.html
View File

@ -1,20 +1,15 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>layer 弹层 - layui</title> <title>layer 弹层 - layui</title>
<link rel="stylesheet" href="../src/css/layui.css">
<link rel="stylesheet" href="../src/css/layui.css"> <style>
body{padding: 100px;}
<style> #photos li{float: left; margin: 0 1px 1px;}
body{padding: 100px;} #photos img{max-height: 38px;}
</style>
#photos li{float: left; margin: 0 1px 1px;}
#photos img{max-height: 38px;}
</style>
</head> </head>
<body> <body>
@ -30,10 +25,10 @@ body{padding: 100px;}
<button class="layui-btn" lay-on="test8">Tab</button> <button class="layui-btn" lay-on="test8">Tab</button>
<button class="layui-btn" lay-on="test9">Photo</button> <button class="layui-btn" lay-on="test9">Photo</button>
<button class="layui-btn" lay-on="testTime">自动关闭</button> <button class="layui-btn" lay-on="testTime">自动关闭</button>
<a href="https://layui.gitee.io/v2/demo/layer.html" target="_blank" class="layui-btn">更多例子</a> <a href="https://layui.dev/docs/2.8/layer/" target="_blank" class="layui-btn">更多例子</a>
</div> </div>
<div id="test11111" style="display: none; padding: 20px;"> <div id="test11111" style="display: none; padding: 16px;">
content 指向放置在页面的一段隐藏元素 content 指向放置在页面的一段隐藏元素
</div> </div>
@ -48,8 +43,8 @@ body{padding: 100px;}
<script> <script>
var LAYUI_GLOBAL = { var LAYUI_GLOBAL = {
//path: '../src/' // path: '../src/',
//,layerPath: '../release/layer/src/' // layerPath: '../release/layer/src/'
}; };
</script> </script>
@ -224,7 +219,9 @@ layui.use(['layer', 'util'], function(layer, util){
// 相册层 // 相册层
layer.photos({ layer.photos({
photos: '#photos' //$('#photos') photos: '#photos', // $('#photos')
// toolbar: false,
// footer: false
}); });
//动态追加 //动态追加

4
src/css/layui.css
View File

@ -1136,7 +1136,9 @@ select.layui-table-edit{padding: 0 0 0 10px; border-color: #d2d2d2;}
.layui-table-grid-down:hover{background-color: #fbfbfb;} .layui-table-grid-down:hover{background-color: #fbfbfb;}
.layui-table-expanded{height: 95px;} .layui-table-expanded{height: 95px;}
.layui-table-expanded .layui-table-cell{height: auto; max-height: 95px; white-space: normal; text-overflow: clip;} .layui-table-expanded .layui-table-cell,
.layui-table-view .layui-table[lay-size="sm"] .layui-table-expanded .layui-table-cell,
.layui-table-view .layui-table[lay-size="lg"] .layui-table-expanded .layui-table-cell{height: auto; max-height: 94px; white-space: normal; text-overflow: clip;}
.layui-table-cell-c{position: absolute; bottom: -10px; right: 50%; margin-right: -9px; width: 20px; height: 20px; line-height: 18px; cursor: pointer; text-align: center; background-color: #fff; border: 1px solid #eee; border-radius: 50%; z-index: 1000; transition: 0.3s all; font-size: 14px;} .layui-table-cell-c{position: absolute; bottom: -10px; right: 50%; margin-right: -9px; width: 20px; height: 20px; line-height: 18px; cursor: pointer; text-align: center; background-color: #fff; border: 1px solid #eee; border-radius: 50%; z-index: 1000; transition: 0.3s all; font-size: 14px;}
.layui-table-cell-c:hover{border-color: #16b777;} .layui-table-cell-c:hover{border-color: #16b777;}
.layui-table-expanded td:hover .layui-table-cell{overflow: auto;} .layui-table-expanded td:hover .layui-table-cell{overflow: auto;}

35
src/css/modules/layer.css
View File

@ -238,21 +238,28 @@ html #layuicss-layer{display: none; position: absolute; width: 1989px;}
.layui-layer-tabmain .layui-layer-tabli{display:none;} .layui-layer-tabmain .layui-layer-tabli{display:none;}
.layui-layer-tabmain .layui-layer-tabli.layui-this{display: block;} .layui-layer-tabmain .layui-layer-tabli.layui-this{display: block;}
/* photo模式 */ /* photos */
.layui-layer-photos{background: none; box-shadow: none;} .layui-layer-photos{background: none; box-shadow: none;}
.layui-layer-photos .layui-layer-content{overflow:hidden; text-align: center;} .layui-layer-photos .layui-layer-content{overflow: visible; text-align: center;}
.layui-layer-photos .layui-layer-phimg img{position: relative; width:100%; display: inline-block; *display:inline; *zoom:1; vertical-align:top;} .layui-layer-photos .layer-layer-photos-main img{position: relative; width:100%; display: inline-block; *display:inline; *zoom:1; vertical-align:top;}
.layui-layer-imgprev, .layui-layer-imgnext{position: fixed; top: 50%; width: 52px; height: 52px; line-height: 52px; margin-top: -26px; cursor: pointer; font-size: 52px; color: #717171;} .layui-layer-photos-prev,
.layui-layer-imgprev{left: 32px;} .layui-layer-photos-next{position: fixed; top: 50%; width: 52px; height: 52px; line-height: 52px; margin-top: -26px; cursor: pointer; font-size: 52px; color: #717171;}
.layui-layer-imgnext{right: 32px;} .layui-layer-photos-prev{left: 32px;}
.layui-layer-imgprev:hover, .layui-layer-photos-next{right: 32px;}
.layui-layer-imgnext:hover{color: #959595;} .layui-layer-photos-prev:hover,
.layui-layer-imgbar{position: fixed; left:0; right: 0; bottom:0; width:100%; height: 40px; line-height: 40px; background-color:#000\9; filter:Alpha(opacity=60); background-color: rgba(2,0,0,.35); color: #fff; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; font-size:0;} .layui-layer-photos-next:hover{color: #959595;}
.layui-layer-imgtit{/*position:absolute; left:20px;*/}
.layui-layer-imgtit *{display:inline-block; *display:inline; *zoom:1; vertical-align:top; padding: 0 5px; font-size:12px; color: #fff;} .layui-layer-photos-toolbar{position: fixed; left: 0; right: 0; bottom: 0; width: 100%; height: 52px; line-height: 52px; background-color: #000\9; filter: Alpha(opacity=60); background-color: rgba(0,0,0,.32); color: #fff; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; font-size:0;}
.layui-layer-imgtit h3{max-width:65%; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; font-weight: 300;} .layui-layer-photos-toolbar > *{display:inline-block; vertical-align: top; padding: 0 16px; font-size: 12px; color: #fff; *display:inline; *zoom: 1;}
.layui-layer-imgtit a:hover{color: #fff; text-decoration: underline;} .layui-layer-photos-toolbar *{font-size: 12px;}
.layui-layer-imgtit em{font-style: normal;} .layui-layer-photos-header{top: 0; bottom: auto;}
.layui-layer-photos-header > span{cursor: pointer;}
.layui-layer-photos-header > span:hover{background-color: rgba(51,51,51,.32);}
.layui-layer-photos-header .layui-icon{font-size: 18px;}
.layui-layer-photos-footer > h3{max-width: 65%; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
.layui-layer-photos-footer a:hover{text-decoration: underline;}
.layui-layer-photos-footer em{font-style: normal;}
/* 关闭动画 */ /* 关闭动画 */
@-webkit-keyframes layer-bounceOut { @-webkit-keyframes layer-bounceOut {

4
src/modules/code.js
View File

@ -209,12 +209,12 @@ layui.define(['lay', 'util', 'element', 'form'], function(exports){
elemToolbar.on('click', '>i', function(){ elemToolbar.on('click', '>i', function(){
var oi = $(this); var oi = $(this);
var type = oi.data('type'); var type = oi.data('type');
typeof tools[type].event === 'function' && tools[type].event(oi, type); tools[type] && typeof tools[type].event === 'function' && tools[type].event(oi, type);
typeof options.toolsEvent === 'function' && options.toolsEvent(oi, type); typeof options.toolsEvent === 'function' && options.toolsEvent(oi, type);
}); });
layui.each(options.tools, function(i, v){ layui.each(options.tools, function(i, v){
var className = (tools[v] && tools[v].className) || v; var className = (tools[v] && tools[v].className) || v;
var title = tools[v].title || ['']; var title = (tools[v] && tools[v].title) || [''];
elemToolbar.append( elemToolbar.append(
'<i class="layui-icon layui-icon-'+ className +'" data-type="'+ v +'" title="'+ title[0] +'"></i>' '<i class="layui-icon layui-icon-'+ className +'" data-type="'+ v +'" title="'+ title[0] +'"></i>'
); );

40
src/modules/lay.js
View File

@ -111,32 +111,54 @@
return document.body.scrollHeight > (window.innerHeight || document.documentElement.clientHeight); return document.body.scrollHeight > (window.innerHeight || document.documentElement.clientHeight);
}; };
// 获取 style rules
lay.getStyleRules = function(style, callback) {
if (!style) return;
var sheet = style.sheet || style.styleSheet || {};
var rules = sheet.cssRules || sheet.rules;
if (typeof callback === 'function') {
layui.each(rules, function(i, item){
if (callback(item)) return true;
});
}
return rules;
};
// 创建 style 样式 // 创建 style 样式
lay.style = function(options){ lay.style = function(options){
options = options || {}; options = options || {};
var style = lay.elem('style'); var style = lay.elem('style');
var styleText = options.text || ''; var styleText = options.text || '';
var target = options.target || lay('body')[0]; var target = options.target;
if(!styleText) return; if (!styleText) return;
// 添加样式 // 添加样式
if('styleSheet' in style){ if ('styleSheet' in style) {
style.setAttribute('type', 'text/css'); style.setAttribute('type', 'text/css');
style.styleSheet.cssText = styleText; style.styleSheet.cssText = styleText;
} else { } else {
style.innerHTML = styleText; style.innerHTML = styleText;
} }
lay.style.index = lay.style.index || 0; // ID
lay.style.index++; style.id = 'LAY-STYLE-'+ (options.id || function(index) {
lay.style.index++;
return 'DF-'+ index;
}(lay.style.index || 0));
var id = style.id = 'LAY-STYLE-'+ (options.id || 'DF-'+ lay.style.index) // 是否向目标容器中追加 style 元素
var styleElem = lay(target).find('#'+ id); if (target) {
var styleElem = lay(target).find('#'+ style.id);
styleElem[0] && styleElem.remove();
lay(target).append(style);
}
styleElem[0] && styleElem.remove(); return style;
lay(target).append(style);
}; };
// 元素定位 // 元素定位

164
src/modules/layer.js
View File

@ -1,4 +1,4 @@
/** /**
* layer * layer
* 通用 Web 弹出层组件 * 通用 Web 弹出层组件
*/ */
@ -1353,9 +1353,9 @@ layer.prompt = function(options, yes){
layer.tab = function(options){ layer.tab = function(options){
options = options || {}; options = options || {};
var tab = options.tab || {} var tab = options.tab || {};
,THIS = 'layui-this' var THIS = 'layui-this';
,success = options.success; var success = options.success;
delete options.success; delete options.success;
@ -1398,10 +1398,16 @@ layer.tab = function(options){
}, options)); }, options));
}; };
// 相册层 // 图片层
layer.photos = function(options, loop, key){ layer.photos = function(options, loop, key){
var dict = {}; var dict = {};
options = options || {};
// 默认属性
options = $.extend(true, {
toolbar: true,
footer: true
}, options);
if(!options.photos) return; if(!options.photos) return;
// 若 photos 并非选择器或 jQuery 对象，则为普通 object // 若 photos 并非选择器或 jQuery 对象，则为普通 object
@ -1409,11 +1415,10 @@ layer.photos = function(options, loop, key){
var photos = isObject ? options.photos : {}; var photos = isObject ? options.photos : {};
var data = photos.data || []; var data = photos.data || [];
var start = photos.start || 0; var start = photos.start || 0;
var success = options.success;
dict.imgIndex = (start|0) + 1; dict.imgIndex = (start|0) + 1;
options.img = options.img || 'img'; options.img = options.img || 'img';
var success = options.success;
delete options.success; delete options.success;
// 若 options.photos 不是一个对象 // 若 options.photos 不是一个对象
@ -1450,8 +1455,7 @@ layer.photos = function(options, loop, key){
}); });
// 不直接弹出 // 不直接弹出
if(!loop) return; if (!loop) return;
} else if (data.length === 0){ } else if (data.length === 0){
return layer.msg('&#x6CA1;&#x6709;&#x56FE;&#x7247;'); return layer.msg('&#x6CA1;&#x6709;&#x56FE;&#x7247;');
} }
@ -1498,27 +1502,90 @@ layer.photos = function(options, loop, key){
return layer.photos(options, true, key); return layer.photos(options, true, key);
} }
// 一些动作 dict.isNumber = function (n) {
dict.event = function(){ return typeof n === 'number' && !isNaN(n);
/* }
dict.bigimg.hover(function(){
dict.imgsee.show();
}, function(){
dict.imgsee.hide();
});
*/
dict.bigimg.find('.layui-layer-imgprev').on('click', function(event){ dict.image = {};
dict.getTransform = function(opts){
var transforms = [];
var rotate = opts.rotate;
var scaleX = opts.scaleX;
var scale = opts.scale;
if (dict.isNumber(rotate) && rotate !== 0) {
transforms.push('rotate(' + rotate + 'deg)');
}
if (dict.isNumber(scaleX) && scaleX !== 1) {
transforms.push('scaleX(' + scaleX + ')');
}
if (dict.isNumber(scale)) {
transforms.push('scale(' + scale + ')');
}
return transforms.length ? transforms.join(' ') : 'none';
}
// 一些动作
dict.event = function(layero, index, that){
dict.main.find('.layui-layer-photos-prev').on('click', function(event){
event.preventDefault(); event.preventDefault();
dict.imgprev(true); dict.imgprev(true);
}); });
dict.bigimg.find('.layui-layer-imgnext').on('click', function(event){ dict.main.find('.layui-layer-photos-next').on('click', function(event){
event.preventDefault(); event.preventDefault();
dict.imgnext(true); dict.imgnext(true);
}); });
$(document).on('keyup', dict.keyup); $(document).on('keyup', dict.keyup);
// 头部工具栏事件
layero.off('click').on('click','*[toolbar-event]', function () {
var othis = $(this), event = othis.attr('toolbar-event');
switch (event) {
case 'rotate':
dict.image.rotate = ((dict.image.rotate || 0) + Number(othis.attr('data-option'))) % 360;
dict.imgElem.css({
transform: dict.getTransform(dict.image)
});
break;
case 'scalex':
dict.image.scaleX = dict.image.scaleX === -1 ? 1 : -1;
dict.imgElem.css({
transform: dict.getTransform(dict.image)
});
break;
case 'zoom':
var ratio = Number(othis.attr('data-option'));
dict.image.scale = (dict.image.scale || 1) + ratio;
// 缩小状态最小值
if (ratio < 0 && dict.image.scale < 0 - ratio) {
dict.image.scale = 0 - ratio;
}
dict.imgElem.css({
transform: dict.getTransform(dict.image)
});
break;
case 'reset':
dict.image.scaleX = 1;
dict.image.scale = 1;
dict.image.rotate = 0;
dict.imgElem.css({
transform: 'none'
});
break;
case 'close':
layer.close(index);
break;
}
that.offset();
that.auto(index);
});
}; };
// 图片预加载 // 图片预加载
@ -1577,45 +1644,58 @@ layer.photos = function(options, loop, key){
shade: 0.9, shade: 0.9,
shadeClose: true, shadeClose: true,
closeBtn: false, closeBtn: false,
move: '.layui-layer-phimg img', move: '.layer-layer-photos-main img',
moveType: 1, moveType: 1,
scrollbar: false, scrollbar: false,
moveOut: true, moveOut: true,
anim: 5, anim: 5,
isOutAnim: false, isOutAnim: false,
skin: 'layui-layer-photos' + skin('photos'), skin: 'layui-layer-photos' + skin('photos'),
content: '<div class="layui-layer-phimg">' content: '<div class="layer-layer-photos-main">'
+ '<img src="'+ data[start].src +'" alt="'+ alt +'" layer-pid="'+ data[start].pid +'">' + '<img src="'+ data[start].src +'" alt="'+ alt +'" layer-pid="'+ (data[start].pid || '') +'">'
+ function(){ + function(){
var arr = ['<div class="layui-layer-imgsee">']; var arr = ['<div class="layui-layer-photos-pointer">'];
// 左右箭头翻页 // 左右箭头翻页
if(data.length > 1){ if (data.length > 1) {
arr.push(['<div class="layui-layer-imguide">' arr.push(['<div class="layer-layer-photos-page">',
,'<span class="layui-icon layui-icon-left layui-layer-iconext layui-layer-imgprev"></span>' '<span class="layui-icon layui-icon-left layui-layer-photos-prev"></span>',
,'<span class="layui-icon layui-icon-right layui-layer-iconext layui-layer-imgnext"></span>' '<span class="layui-icon layui-icon-right layui-layer-photos-next"></span>',
,'</div>'].join('')); '</div>'].join(''));
}
// 头部工具栏
if (options.toolbar) {
arr.push([
'<div class="layui-layer-photos-toolbar layui-layer-photos-header">',
'<span toolbar-event="rotate" data-option="90" title="旋转"><i class="layui-icon layui-icon-refresh"></i></span>',
'<span toolbar-event="scalex" title="变换"><i class="layui-icon layui-icon-slider"></i></span>',
'<span toolbar-event="zoom" data-option="0.1" title="放大"><i class="layui-icon layui-icon-add-circle"></i></span>',
'<span toolbar-event="zoom" data-option="-0.1" title="缩小"><i class="layui-icon layui-icon-reduce-circle"></i></span>',
'<span toolbar-event="reset" title="还原"><i class="layui-icon layui-icon-refresh-1"></i></span>',
'<span toolbar-event="close" title="关闭"><i class="layui-icon layui-icon-close"></i></span>',
'</div>'
].join(''));
} }
// 底部栏 // 底部栏
if(!options.hideFooter){ if (options.footer) {
arr.push(['<div class="layui-layer-imgbar">' arr.push(['<div class="layui-layer-photos-toolbar layui-layer-photos-footer">',
,'<div class="layui-layer-imgtit">' '<h3>'+ alt +'</h3>',
,'<h3>'+ alt +'</h3>' '<em>'+ dict.imgIndex +' / '+ data.length +'</em>',
,'<em>'+ dict.imgIndex +' / '+ data.length +'</em>' '<a href="'+ data[start].src +'" target="_blank">查看原图</a>',
,'<a href="'+ data[start].src +'" target="_blank">查看原图</a>' '</div>'].join(''));
,'</div>'
,'</div>'].join(''));
} }
arr.push('</div>'); arr.push('</div>');
return arr.join(''); return arr.join('');
}() }()
+'</div>', +'</div>',
success: function(layero, index){ success: function(layero, index, that){
dict.bigimg = layero.find('.layui-layer-phimg'); dict.main = layero.find('.layer-layer-photos-main');
dict.imgsee = layero.find('.layui-layer-imgbar'); dict.footer = layero.find('.layui-layer-photos-footer');
dict.event(layero); dict.imgElem = dict.main.children('img');
dict.event(layero, index, that);
options.tab && options.tab(data[start], layero); options.tab && options.tab(data[start], layero);
typeof success === 'function' && success(layero); typeof success === 'function' && success(layero);
}, end: function(){ }, end: function(){

75
src/modules/rate.js
View File

@ -10,42 +10,47 @@ layui.define(['jquery', 'lay'],function(exports){
// 外部接口 // 外部接口
var rate = { var rate = {
config: {} config: {},
,index: layui.rate ? (layui.rate.index + 10000) : 0 index: layui.rate ? (layui.rate.index + 10000) : 0,
//设置全局项 //设置全局项
,set: function(options){ set: function(options){
var that = this; var that = this;
that.config = $.extend({}, that.config, options); that.config = $.extend({}, that.config, options);
return that; return that;
} },
//事件 //事件
,on: function(events, callback){ on: function(events, callback){
return layui.onevent.call(this, MOD_NAME, events, callback); return layui.onevent.call(this, MOD_NAME, events, callback);
} }
} }
// 操作当前实例 // 操作当前实例
,thisRate = function(){ var thisRate = function () {
var that = this var that = this;
,options = that.config; var options = that.config;
return { return {
setvalue: function(value){ setvalue: function (value) {
that.setvalue.call(that, value); that.setvalue.call(that, value);
} },
,config: options config: options
} }
} };
//字符常量 //字符常量
,MOD_NAME = 'rate',ELEM_VIEW = 'layui-rate', ICON_RATE = 'layui-icon-rate', ICON_RATE_SOLID = 'layui-icon-rate-solid', ICON_RATE_HALF = 'layui-icon-rate-half' var MOD_NAME = 'rate';
var ELEM_VIEW = 'layui-rate';
,ICON_SOLID_HALF = 'layui-icon-rate-solid layui-icon-rate-half', ICON_SOLID_RATE = 'layui-icon-rate-solid layui-icon-rate', ICON_HALF_RATE = 'layui-icon-rate layui-icon-rate-half' var ICON_RATE = 'layui-icon-rate';
var ICON_RATE_SOLID = 'layui-icon-rate-solid';
var ICON_RATE_HALF = 'layui-icon-rate-half';
var ICON_SOLID_HALF = 'layui-icon-rate-solid layui-icon-rate-half';
var ICON_SOLID_RATE = 'layui-icon-rate-solid layui-icon-rate';
var ICON_HALF_RATE = 'layui-icon-rate layui-icon-rate-half';
//构造器 //构造器
,Class = function(options){ var Class = function (options) {
var that = this; var that = this;
that.index = ++rate.index; that.index = ++rate.index;
that.config = $.extend({}, that.config, rate.config, options); that.config = $.extend({}, that.config, rate.config, options);
@ -54,12 +59,12 @@ layui.define(['jquery', 'lay'],function(exports){
//默认配置 //默认配置
Class.prototype.config = { Class.prototype.config = {
length: 5 //初始长度 length: 5, //初始长度
,text: false //是否显示评分等级 text: false, //是否显示评分等级
,readonly: false //是否只读 readonly: false, //是否只读
,half: false //是否可以半星 half: false, //是否可以半星
,value: 0 //星星选中个数 value: 0, //星星选中个数
,theme: '' theme: ''
}; };
//评分渲染 //评分渲染
@ -114,8 +119,8 @@ layui.define(['jquery', 'lay'],function(exports){
temp += '</ul>' + (options.text ? ('<span class="layui-inline">'+ options.value + '星') : '') + '</span>'; temp += '</ul>' + (options.text ? ('<span class="layui-inline">'+ options.value + '星') : '') + '</span>';
//开始插入替代元素 //开始插入替代元素
var othis = options.elem var othis = options.elem;
,hasRender = othis.next('.' + ELEM_VIEW); var hasRender = othis.next('.' + ELEM_VIEW);
//生成替代元素 //生成替代元素
hasRender[0] && hasRender.remove(); //如果已经渲染，则Rerender hasRender[0] && hasRender.remove(); //如果已经渲染，则Rerender
@ -137,8 +142,8 @@ layui.define(['jquery', 'lay'],function(exports){
//评分重置 //评分重置
Class.prototype.setvalue = function(value){ Class.prototype.setvalue = function(value){
var that = this var that = this;
,options = that.config ; var options = that.config;
options.value = value ; options.value = value ;
that.render(); that.render();
@ -146,14 +151,14 @@ layui.define(['jquery', 'lay'],function(exports){
//li触控事件 //li触控事件
Class.prototype.action = function(){ Class.prototype.action = function(){
var that = this var that = this;
,options = that.config var options = that.config;
,_ul = that.elemTemp var _ul = that.elemTemp;
,wide = _ul.find("i").width(); var wide = _ul.find("i").width();
_ul.children("li").each(function(index){ _ul.children("li").each(function(index){
var ind = index + 1 var ind = index + 1;
,othis = $(this); var othis = $(this);
//点击 //点击
othis.on('click', function(e){ othis.on('click', function(e){
@ -210,9 +215,9 @@ layui.define(['jquery', 'lay'],function(exports){
}; };
//事件处理 //事件处理
Class.prototype.events = function(){ Class.prototype.events = function () {
var that = this var that = this;
,options = that.config; //var options = that.config;
}; };
//核心入口 //核心入口

320
src/modules/table.js
View File

@ -258,29 +258,6 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
,'<div class="layui-table-column layui-table-page layui-hide">' ,'<div class="layui-table-column layui-table-page layui-hide">'
,'<div class="layui-inline layui-table-pageview" id="layui-table-page{{=d.index}}"></div>' ,'<div class="layui-inline layui-table-pageview" id="layui-table-page{{=d.index}}"></div>'
,'</div>' ,'</div>'
,'<style>'
,'{{# layui.each(d.data.cols, function(i1, item1){'
,'layui.each(item1, function(i2, item2){ }}'
,'.laytable-cell-{{=d.index}}-{{=i1}}-{{=i2}}{ '
,'{{# if(item2.width){ }}'
,'width: {{=item2.width}}px;'
,'{{# } }}'
,' }'
,'{{# });'
,'}); }}'
,'{{# if(d.data.lineStyle){'
,'var cellClassName = ".layui-table-view-"+ d.index +" .layui-table-body .layui-table .layui-table-cell";'
,'}}'
,'{{= cellClassName }}{'
,'display: -webkit-box; -webkit-box-align: center; -moz-box-align: start; white-space: normal; {{- d.data.lineStyle }} '
,'}'
,'{{= cellClassName }}:hover{overflow: auto;}'
,'{{# } }}'
,'{{# if(d.data.css){ }}'
,'{{- d.data.css }}'
,'{{# } }}'
,'</style>'
].join(''); ].join('');
var _WIN = $(window); var _WIN = $(window);
@ -329,18 +306,18 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
//请求参数的自定义格式 //请求参数的自定义格式
options.request = $.extend({ options.request = $.extend({
pageName: 'page' pageName: 'page',
,limitName: 'limit' limitName: 'limit'
}, options.request) }, options.request)
// 响应数据的自定义格式 // 响应数据的自定义格式
options.response = $.extend({ options.response = $.extend({
statusName: 'code' //规定数据状态的字段名称 statusName: 'code', //规定数据状态的字段名称
,statusCode: 0 //规定成功的状态码 statusCode: 0, //规定成功的状态码
,msgName: 'msg' //规定状态信息的字段名称 msgName: 'msg', //规定状态信息的字段名称
,dataName: 'data' //规定数据总数的字段名称 dataName: 'data', //规定数据总数的字段名称
,totalRowName: 'totalRow' //规定数据统计的字段名称 totalRowName: 'totalRow', //规定数据统计的字段名称
,countName: 'count' countName: 'count'
}, options.response); }, options.response);
//如果 page 传入 laypage 对象 //如果 page 传入 laypage 对象
@ -385,13 +362,14 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
options.height = $(that.parentDiv).height() - that.parentHeightGap; options.height = $(that.parentDiv).height() - that.parentHeightGap;
} }
//开始插入替代元素 // 开始插入替代元素
var othis = options.elem var othis = options.elem;
,hasRender = othis.next('.' + ELEM_VIEW) var hasRender = othis.next('.' + ELEM_VIEW);
//主容器 // 主容器
,reElem = that.elem = $('<div></div>'); var reElem = that.elem = $('<div></div>');
// 添加 className
reElem.addClass(function(){ reElem.addClass(function(){
var arr = [ var arr = [
ELEM_VIEW, ELEM_VIEW,
@ -402,9 +380,9 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
if(options.className) arr.push(options.className); if(options.className) arr.push(options.className);
return arr.join(' '); return arr.join(' ');
}()).attr({ }()).attr({
'lay-filter': 'LAY-TABLE-FORM-DF-'+ that.index 'lay-filter': 'LAY-TABLE-FORM-DF-'+ that.index,
,'lay-id': options.id 'lay-id': options.id,
,'style': function(){ 'style': function(){
var arr = []; var arr = [];
if(options.width) arr.push('width:'+ options.width + 'px;'); if(options.width) arr.push('width:'+ options.width + 'px;');
// if(options.height) arr.push('height:'+ options.height + 'px;'); // if(options.height) arr.push('height:'+ options.height + 'px;');
@ -414,15 +392,18 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
open: '{{', // 标签符前缀 open: '{{', // 标签符前缀
close: '}}' // 标签符后缀 close: '}}' // 标签符后缀
}).render({ }).render({
data: options data: options,
,index: that.index //索引 index: that.index //索引
})); }));
//生成替代元素 // 初始化样式
hasRender[0] && hasRender.remove(); //如果已经渲染，则Rerender that.renderStyle();
// 生成替代元素
hasRender[0] && hasRender.remove(); // 如果已经渲染，则 Rerender
othis.after(reElem); othis.after(reElem);
//各级容器 // 各级容器
that.layTool = reElem.find(ELEM_TOOL); that.layTool = reElem.find(ELEM_TOOL);
that.layBox = reElem.find(ELEM_BOX); that.layBox = reElem.find(ELEM_BOX);
that.layHeader = reElem.find(ELEM_HEADER); that.layHeader = reElem.find(ELEM_HEADER);
@ -443,22 +424,22 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
// 让表格平铺 // 让表格平铺
that.fullSize(); that.fullSize();
that.pullData(that.page); //请求数据 that.pullData(that.page); // 请求数据
that.events(); //事件 that.events(); // 事件
}; };
//根据列类型，定制化参数 // 根据列类型，定制化参数
Class.prototype.initOpts = function(item){ Class.prototype.initOpts = function(item){
var that = this var that = this
,options = that.config var options = that.config;
,initWidth = { var initWidth = {
checkbox: 50 checkbox: 50,
,radio: 50 radio: 50,
,space: 30 space: 30,
,numbers: 60 numbers: 60
}; };
//让 type 参数兼容旧版本 // 让 type 参数兼容旧版本
if(item.checkbox) item.type = "checkbox"; if(item.checkbox) item.type = "checkbox";
if(item.space) item.type = "space"; if(item.space) item.type = "space";
if(!item.type) item.type = "normal"; if(!item.type) item.type = "normal";
@ -471,8 +452,8 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
//初始化一些参数 //初始化一些参数
Class.prototype.setInit = function(type){ Class.prototype.setInit = function(type){
var that = this var that = this;
,options = that.config; var options = that.config;
options.clientWidth = options.width || function(){ //获取容器宽度 options.clientWidth = options.width || function(){ //获取容器宽度
//如果父元素宽度为0（一般为隐藏元素），则继续查找上层元素，直到找到真实宽度为止 //如果父元素宽度为0（一般为隐藏元素），则继续查找上层元素，直到找到真实宽度为止
@ -553,6 +534,60 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
}; };
// 初始化样式
Class.prototype.renderStyle = function() {
var that = this;
var options = that.config;
var index = that.index;
var text = [];
// 单元格宽度
layui.each(options.cols, function(i1, item1) {
layui.each(item1, function(i2, item2) {
var key = [index, i1, i2].join('-');
var val = item2.width ? ['width: ', item2.width, 'px'].join('') : '';
text.push('.laytable-cell-'+ key +'{'+ val +'}');
});
});
// 自定义行样式
(function (lineStyle) {
if (!lineStyle) return;
var trClassName = '.layui-table-view-'+ index +' .layui-table-body .layui-table tr';
var rules = lineStyle.split(';');
var cellMaxHeight = 'none';
// 计算单元格最大高度
layui.each(rules, function(i, rule) {
rule = rule.split(':');
if (rule[0] === 'height') {
var val = parseFloat(rule[1]);
if (!isNaN(val)) cellMaxHeight = (val - 1) + 'px';
return true;
}
});
// 多行相关样式
layui.each([
'{'+ lineStyle +'}',
'.layui-table-cell{height: auto; max-height: '+ cellMaxHeight +'; white-space: normal; text-overflow: clip;}',
'> td:hover > .layui-table-cell{overflow: auto;}'
], function(i, val) {
text.push(trClassName + ' ' + val);
});
})(options.lineStyle);
// 自定义 css 属性
if (options.css) text.push(options.css);
// 生成 style
lay.style({
target: that.elem[0],
text: text.join(''),
id: 'DF-'+ index
});
};
// 初始工具栏 // 初始工具栏
Class.prototype.renderToolbar = function(){ Class.prototype.renderToolbar = function(){
var that = this var that = this
@ -784,7 +819,7 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
// 给未分配宽的列平均分配宽 // 给未分配宽的列平均分配宽
if(item3.width === 0){ if(item3.width === 0){
that.getCssRule(item3.key, function(item){ that.cssRules(item3.key, function(item){
item.style.width = Math.floor(function(){ item.style.width = Math.floor(function(){
if(autoWidth < minWidth) return minWidth; if(autoWidth < minWidth) return minWidth;
if(autoWidth > maxWidth) return maxWidth; if(autoWidth > maxWidth) return maxWidth;
@ -795,7 +830,7 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
// 给设定百分比的列分配列宽 // 给设定百分比的列分配列宽
else if(/\d+%$/.test(item3.width)){ else if(/\d+%$/.test(item3.width)){
that.getCssRule(item3.key, function(item){ that.cssRules(item3.key, function(item){
var width = Math.floor((parseFloat(item3.width) / 100) * cntrWidth); var width = Math.floor((parseFloat(item3.width) / 100) * cntrWidth);
width < minWidth && (width = minWidth); width < minWidth && (width = minWidth);
width > maxWidth && (width = maxWidth); width > maxWidth && (width = maxWidth);
@ -805,7 +840,7 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
// 给拥有普通 width 值的列分配最新列宽 // 给拥有普通 width 值的列分配最新列宽
else { else {
that.getCssRule(item3.key, function(item){ that.cssRules(item3.key, function(item){
item.style.width = item3.width + 'px'; item.style.width = item3.width + 'px';
}); });
} }
@ -828,7 +863,7 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
var th = getEndTh(); var th = getEndTh();
var key = th.data('key'); var key = th.data('key');
that.getCssRule(key, function(item){ that.cssRules(key, function(item){
var width = item.style.width || th.outerWidth(); var width = item.style.width || th.outerWidth();
item.style.width = (parseFloat(width) + patchNums) + 'px'; item.style.width = (parseFloat(width) + patchNums) + 'px';
@ -926,6 +961,7 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
options.HAS_SET_COLS_PATCH = true; options.HAS_SET_COLS_PATCH = true;
var request = options.request; var request = options.request;
var response = options.response; var response = options.response;
var res;
var sort = function(){ var sort = function(){
if(typeof options.initSort === 'object'){ if(typeof options.initSort === 'object'){
that.sort({ that.sort({
@ -951,7 +987,7 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
that.startTime = new Date().getTime(); // 渲染开始时间 that.startTime = new Date().getTime(); // 渲染开始时间
if (opts.renderData) { // 将 cache 信息重新渲染 if (opts.renderData) { // 将 cache 信息重新渲染
var res = {}; res = {};
res[response.dataName] = table.cache[that.key]; res[response.dataName] = table.cache[that.key];
res[response.countName] = options.url ? (layui.type(options.page) === 'object' ? options.page.count : res[response.dataName].length) : options.data.length; res[response.countName] = options.url ? (layui.type(options.page) === 'object' ? options.page.count : res[response.dataName].length) : options.data.length;
@ -1021,7 +1057,7 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
} }
}); });
} else if(layui.type(options.data) === 'array'){ //已知数据 } else if(layui.type(options.data) === 'array'){ //已知数据
var res = {}; res = {};
var startLimit = curr*options.limit - options.limit; var startLimit = curr*options.limit - options.limit;
var newData = options.data.concat(); var newData = options.data.concat();
@ -1074,8 +1110,10 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
curr = curr || 1 curr = curr || 1
layui.each(data, function(i1, item1){ layui.each(data, function(i1, item1){
var tds = [], tds_fixed = [], tds_fixed_r = [] var tds = [];
,numbers = i1 + options.limit*(curr - 1) + 1; // 序号 var tds_fixed = [];
var tds_fixed_r = [];
var numbers = i1 + options.limit*(curr - 1) + 1; // 序号
// 数组值是否为 object，如果不是，则自动转为 object // 数组值是否为 object，如果不是，则自动转为 object
if(typeof item1 !== 'object'){ if(typeof item1 !== 'object'){
@ -1159,7 +1197,7 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
return arr.join(' '); return arr.join(' ');
}() +' lay-type="layTableCheckbox">'; }() +' lay-type="layTableCheckbox">';
break; //break;
case 'radio': // 单选 case 'radio': // 单选
return '<input type="radio" name="layTableRadio_'+ options.index +'" ' return '<input type="radio" name="layTableRadio_'+ options.index +'" '
+ function(){ + function(){
@ -1168,10 +1206,10 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
if(tplData[disabledName]) arr.push('disabled'); if(tplData[disabledName]) arr.push('disabled');
return arr.join(' '); return arr.join(' ');
}() +' lay-type="layTableRadio">'; }() +' lay-type="layTableRadio">';
break; //break;
case 'numbers': case 'numbers':
return numbers; return numbers;
break; //break;
}; };
//解析工具列模板 //解析工具列模板
@ -1309,15 +1347,15 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
//同步分页状态 //同步分页状态
if(options.page){ if(options.page){
options.page = $.extend({ options.page = $.extend({
elem: 'layui-table-page' + options.index elem: 'layui-table-page' + options.index,
,count: count count: count,
,limit: options.limit limit: options.limit,
,limits: options.limits || [10,20,30,40,50,60,70,80,90] limits: options.limits || [10,20,30,40,50,60,70,80,90],
,groups: 3 groups: 3,
,layout: ['prev', 'page', 'next', 'skip', 'count', 'limit'] layout: ['prev', 'page', 'next', 'skip', 'count', 'limit'],
,prev: '<i class="layui-icon">&#xe603;</i>' prev: '<i class="layui-icon">&#xe603;</i>',
,next: '<i class="layui-icon">&#xe602;</i>' next: '<i class="layui-icon">&#xe602;</i>',
,jump: function(obj, first){ jump: function(obj, first){
if(!first){ if(!first){
//分页本身并非需要做以下更新，下面参数的同步，主要是因为其它处理统一用到了它们 //分页本身并非需要做以下更新，下面参数的同步，主要是因为其它处理统一用到了它们
//而并非用的是 options.page 中的参数（以确保分页未开启的情况仍能正常使用） //而并非用的是 options.page 中的参数（以确保分页未开启的情况仍能正常使用）
@ -1394,9 +1432,9 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
// 获取自动计算的合并内容 // 获取自动计算的合并内容
var getContent = item3.totalRow ? (parseTempData.call(that, { var getContent = item3.totalRow ? (parseTempData.call(that, {
item3: item3 item3: item3,
,content: thisTotalNum content: thisTotalNum,
,tplData: tplData tplData: tplData
}) || text) : text; }) || text) : text;
// 如果直接传入了合计行数据，则不输出自动计算的结果 // 如果直接传入了合计行数据，则不输出自动计算的结果
@ -1421,8 +1459,8 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
if(item3.hide) classNames.push(HIDE); // 插入隐藏列样式 if(item3.hide) classNames.push(HIDE); // 插入隐藏列样式
if(!item3.field) classNames.push(ELEM_COL_SPECIAL); // 插入特殊列样式 if(!item3.field) classNames.push(ELEM_COL_SPECIAL); // 插入特殊列样式
return classNames.join(' '); return classNames.join(' ');
}() +'">' }() +'">',
,'<div class="layui-table-cell laytable-cell-'+ function(){ // 返回对应的CSS类标识 '<div class="layui-table-cell laytable-cell-'+ function(){ // 返回对应的CSS类标识
var key = item3.key; var key = item3.key;
return item3.type === 'normal' ? key return item3.type === 'normal' ? key
: (key + ' laytable-cell-' + item3.type); : (key + ' laytable-cell-' + item3.type);
@ -1443,8 +1481,8 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
}, item3)); }, item3));
} }
return content; return content;
}() }(),
,'</div></td>'].join(''); '</div></td>'].join('');
tds.push(td); tds.push(td);
}); });
@ -1455,8 +1493,8 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
//找到对应的列元素 //找到对应的列元素
Class.prototype.getColElem = function(parent, key){ Class.prototype.getColElem = function(parent, key){
var that = this var that = this;
,options = that.config; //var options = that.config;
return parent.eq(0).find('.laytable-cell-'+ key + ':eq(0)'); return parent.eq(0).find('.laytable-cell-'+ key + ':eq(0)');
}; };
@ -1530,7 +1568,7 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
// 设置数据选中属性 // 设置数据选中属性
layui.each(thisData, function(i, item){ layui.each(thisData, function(i, item){
if(layui.type(item) === 'array') return; // 空项 if(layui.type(item) === 'array' || item[options.disabledName]) return; // 空项
if(Number(opts.index) === i || opts.index === 'all'){ if(Number(opts.index) === i || opts.index === 'all'){
var checked = item[options.checkName] = getChecked(item[options.checkName]); var checked = item[options.checkName] = getChecked(item[options.checkName]);
tr[checked ? 'addClass' : 'removeClass'](ELEM_CHECKED); // 标记当前选中行背景色 tr[checked ? 'addClass' : 'removeClass'](ELEM_CHECKED); // 标记当前选中行背景色
@ -1547,7 +1585,7 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
var checkedElem = tr.find('input[lay-type="'+ ({ var checkedElem = tr.find('input[lay-type="'+ ({
radio: 'layTableRadio', radio: 'layTableRadio',
checkbox: 'layTableCheckbox' checkbox: 'layTableCheckbox'
}[opts.type] || 'checkbox') +'"]'); }[opts.type] || 'checkbox') +'"]:not(:disabled)');
checkedElem.prop('checked', getChecked(checkedElem.last().prop('checked'))); checkedElem.prop('checked', getChecked(checkedElem.last().prop('checked')));
@ -1570,8 +1608,8 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
if(typeof opts.field === 'string'){ if(typeof opts.field === 'string'){
field = opts.field; field = opts.field;
that.layHeader.find('th').each(function(i, item){ that.layHeader.find('th').each(function(i, item){
var othis = $(this) var othis = $(this);
,_field = othis.data('field'); var _field = othis.data('field');
if(_field === opts.field){ if(_field === opts.field){
opts.field = othis; opts.field = othis;
field = _field; field = _field;
@ -1581,8 +1619,8 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
} }
try { try {
var field = field || opts.field.data('field') field = field || opts.field.data('field');
,key = opts.field.data('key'); var key = opts.field.data('key');
// 如果欲执行的排序已在状态中，则不执行渲染 // 如果欲执行的排序已在状态中，则不执行渲染
if(that.sortKey && !opts.pull){ if(that.sortKey && !opts.pull){
@ -1601,8 +1639,8 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
// 记录排序索引和类型 // 记录排序索引和类型
that.sortKey = { that.sortKey = {
field: field field: field,
,sort: opts.type sort: opts.type
}; };
// 默认为前端自动排序。如果否，则需自主排序（通常为服务端处理好排序） // 默认为前端自动排序。如果否，则需自主排序（通常为服务端处理好排序）
@ -1632,8 +1670,8 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
// 排序是否来自于点击表头事件触发 // 排序是否来自于点击表头事件触发
if(opts.fromEvent){ if(opts.fromEvent){
options.initSort = { options.initSort = {
field: field field: field,
,type: opts.type type: opts.type
}; };
layui.event.call(opts.field, MOD_NAME, 'sort('+ filter +')', $.extend({ layui.event.call(opts.field, MOD_NAME, 'sort('+ filter +')', $.extend({
config: options config: options
@ -1651,33 +1689,32 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
delete that.layInit; delete that.layInit;
that.layBox.find(ELEM_INIT).remove(); that.layBox.find(ELEM_INIT).remove();
} else { } else {
that.layInit = $(['<div class="layui-table-init">' that.layInit = $(['<div class="layui-table-init">',
,'<i class="layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop"></i>' '<i class="layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop"></i>',
,'</div>'].join('')); '</div>'].join(''));
that.layBox.append(that.layInit); that.layBox.append(that.layInit);
} }
} }
}; };
// 获取 cssRule // 获取对应单元格的 cssRules
Class.prototype.getCssRule = function(key, callback){ Class.prototype.cssRules = function(key, callback){
var that = this; var that = this;
var style = that.elem.children('style')[0]; var style = that.elem.children('style')[0];
var sheet = style.sheet || style.styleSheet || {};
var rules = sheet.cssRules || sheet.rules; lay.getStyleRules(style, function(item){
layui.each(rules, function(i, item){ if (item.selectorText === ('.laytable-cell-'+ key)) {
if(item.selectorText === ('.laytable-cell-'+ key)){
return callback(item), true; return callback(item), true;
} }
}); });
}; };
//让表格铺满 // 让表格铺满
Class.prototype.fullSize = function(){ Class.prototype.fullSize = function(){
var that = this var that = this;
,options = that.config var options = that.config;
,height = options.height var height = options.height;
,bodyHeight; var bodyHeight;
if(that.fullHeightGap){ if(that.fullHeightGap){
height = _WIN.height() - that.fullHeightGap; height = _WIN.height() - that.fullHeightGap;
@ -1842,6 +1879,7 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
switch(events){ switch(events){
case 'LAYTABLE_COLS': // 筛选列 case 'LAYTABLE_COLS': // 筛选列
if (!table.cache[options.id].length) return layer.msg('暂时没有数据，不能使用筛选列功能！', {icon: 5});
openPanel({ openPanel({
list: function(){ list: function(){
var lis = []; var lis = [];
@ -1887,6 +1925,7 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
}); });
break; break;
case 'LAYTABLE_EXPORT': // 导出 case 'LAYTABLE_EXPORT': // 导出
if (!table.cache[options.id].length) return layer.msg('暂时没有数据，不能使用导出功能！', {icon: 5});
if(device.ie){ if(device.ie){
layer.tips('导出功能不支持 IE，请用 Chrome 等高级浏览器导出', this, { layer.tips('导出功能不支持 IE，请用 Chrome 等高级浏览器导出', this, {
tips: 3 tips: 3
@ -1898,8 +1937,8 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
'<li data-type="csv">导出 csv 格式文件</li>', '<li data-type="csv">导出 csv 格式文件</li>',
'<li data-type="xls">导出 xls 格式文件</li>' '<li data-type="xls">导出 xls 格式文件</li>'
].join('') ].join('')
}() }(),
,done: function(panel, list){ done: function(panel, list){
list.on('click', function(){ list.on('click', function(){
var type = $(this).data('type') var type = $(this).data('type')
table.exportFile.call(that, options.id, null, type); table.exportFile.call(that, options.id, null, type);
@ -1909,6 +1948,7 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
} }
break; break;
case 'LAYTABLE_PRINT': // 打印 case 'LAYTABLE_PRINT': // 打印
if (!table.cache[options.id].length) return layer.msg('暂时没有数据，不能使用打印功能！', {icon: 5});
var printWin = window.open('about:blank', '_blank'); var printWin = window.open('about:blank', '_blank');
var style = ['<style>', var style = ['<style>',
'body{font-size: 12px; color: #5F5F5F;}', 'body{font-size: 12px; color: #5F5F5F;}',
@ -1944,8 +1984,8 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
} }
layui.event.call(this, MOD_NAME, 'toolbar('+ filter +')', $.extend({ layui.event.call(this, MOD_NAME, 'toolbar('+ filter +')', $.extend({
event: events event: events,
,config: options config: options
},{})); },{}));
}); });
@ -1970,16 +2010,16 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
var events = othis.attr('lay-event'); var events = othis.attr('lay-event');
layui.event.call(this, MOD_NAME, 'pagebar('+ filter +')', $.extend({ layui.event.call(this, MOD_NAME, 'pagebar('+ filter +')', $.extend({
event: events event: events,
,config: options config: options
},{})); },{}));
}); });
// 拖拽调整宽度 // 拖拽调整宽度
th.on('mousemove', function(e){ th.on('mousemove', function(e){
var othis = $(this) var othis = $(this);
,oLeft = othis.offset().left var oLeft = othis.offset().left;
,pLeft = e.clientX - oLeft; var pLeft = e.clientX - oLeft;
if(othis.data('unresize') || thisTable.eventMoveElem){ if(othis.data('unresize') || thisTable.eventMoveElem){
return; return;
} }
@ -1996,7 +2036,7 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
e.preventDefault(); e.preventDefault();
dict.offset = [e.clientX, e.clientY]; //记录初始坐标 dict.offset = [e.clientX, e.clientY]; //记录初始坐标
that.getCssRule(key, function(item){ that.cssRules(key, function(item){
var width = item.style.width || othis.outerWidth(); var width = item.style.width || othis.outerWidth();
dict.rule = item; dict.rule = item;
dict.ruleWidth = parseFloat(width); dict.ruleWidth = parseFloat(width);
@ -2055,7 +2095,7 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
delete thisTable.eventMoveElem; delete thisTable.eventMoveElem;
// 列拖拽宽度后的事件 // 列拖拽宽度后的事件
thatTable.getCssRule(key, function(item){ thatTable.cssRules(key, function(item){
col.width = parseFloat(item.style.width); col.width = parseFloat(item.style.width);
layui.event.call(th[0], MOD_NAME, 'colResized('+ filter +')', { layui.event.call(th[0], MOD_NAME, 'colResized('+ filter +')', {
col: col, col: col,
@ -2095,9 +2135,9 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
fromEvent: true fromEvent: true
}); });
}).find(ELEM_SORT+' .layui-edge ').on('click', function(e){ }).find(ELEM_SORT+' .layui-edge ').on('click', function(e){
var othis = $(this) var othis = $(this);
,index = othis.index() var index = othis.index();
,field = othis.parents('th').eq(0).data('field') var field = othis.parents('th').eq(0).data('field');
layui.stope(e); layui.stope(e);
if(index === 0){ if(index === 0){
that.sort({ that.sort({
@ -2427,7 +2467,7 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
that.elem.find('.'+ ELEM_CELL_C).trigger('click'); that.elem.find('.'+ ELEM_CELL_C).trigger('click');
// 设置当前单元格展开宽度 // 设置当前单元格展开宽度
that.getCssRule(key, function(item){ that.cssRules(key, function(item){
var width = item.style.width; var width = item.style.width;
var expandedWidth = col.expandedWidth || (that.elem.width() / 3); var expandedWidth = col.expandedWidth || (that.elem.width() / 3);
@ -2437,7 +2477,9 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
elemCellClose.data('cell-width', width); elemCellClose.data('cell-width', width);
item.style.width = expandedWidth + 'px'; item.style.width = expandedWidth + 'px';
that.scrollPatch(); // 滚动条补丁 setTimeout(function(){
that.scrollPatch(); // 滚动条补丁
});
}); });
// 设置当前单元格展开样式 // 设置当前单元格展开样式
@ -2452,7 +2494,7 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
elemCellClose.on('click', function(){ elemCellClose.on('click', function(){
var $this = $(this); var $this = $(this);
that.setRowActive(index, ELEM_EXPAND, true); // 移除单元格展开样式 that.setRowActive(index, ELEM_EXPAND, true); // 移除单元格展开样式
that.getCssRule(key, function(item){ that.cssRules(key, function(item){
item.style.width = $this.data('cell-width'); // 恢复单元格展开前的宽度 item.style.width = $this.data('cell-width'); // 恢复单元格展开前的宽度
that.resize(); // 滚动条补丁 that.resize(); // 滚动条补丁
}); });
@ -2652,8 +2694,8 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
// 遍历表头 // 遍历表头
table.eachCols = function(id, callback, cols){ table.eachCols = function(id, callback, cols){
var config = thisTable.config[id] || {} var config = thisTable.config[id] || {};
,arrs = [], index = 0; var arrs = [], index = 0;
cols = $.extend(true, [], cols || config.cols); cols = $.extend(true, [], cols || config.cols);
@ -2687,7 +2729,7 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
//计算全选个数 //计算全选个数
layui.each(data, function(i, item){ layui.each(data, function(i, item){
if(layui.type(item) === 'array'){ if(layui.type(item) === 'array' || item[table.config.disabledName]){
invalidNum++; // 无效数据，或已删除的 invalidNum++; // 无效数据，或已删除的
return; return;
} }
@ -2713,12 +2755,12 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
// 获取表格当前页的所有行数据 // 获取表格当前页的所有行数据
table.getData = function(id){ table.getData = function(id){
var arr = [] var arr = [];
,data = table.cache[id] || []; var data = table.cache[id] || [];
layui.each(data, function(i, item){ layui.each(data, function(i, item){
if(layui.type(item) === 'array'){ if(layui.type(item) === 'array'){
return; return;
}; }
arr.push(table.clearCacheKey(item)); arr.push(table.clearCacheKey(item));
}); });
return arr; return arr;
@ -2753,8 +2795,8 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
var thatTable = thisTable.that[id]; var thatTable = thisTable.that[id];
var config = thisTable.config[id] || {}; var config = thisTable.config[id] || {};
var textType = ({ var textType = ({
csv: 'text/csv' csv: 'text/csv',
,xls: 'application/vnd.ms-excel' xls: 'application/vnd.ms-excel'
})[type]; })[type];
var alink = document.createElement("a"); var alink = document.createElement("a");
@ -2792,11 +2834,11 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
// 解析内容 // 解析内容
content = parseTempData.call(thatTable, { content = parseTempData.call(thatTable, {
item3: item3 item3: item3,
,content: content content: content,
,tplData: item1 tplData: item1,
,text: 'text' text: 'text',
,obj: { obj: {
td: function(field){ td: function(field){
var td = thatTable.layBody.find('tr[data-index="'+ i1 +'"]>td'); var td = thatTable.layBody.find('tr[data-index="'+ i1 +'"]>td');
return td.filter('[data-field="'+ field +'"]'); return td.filter('[data-field="'+ field +'"]');

34
src/modules/treeTable.js
View File

@ -346,16 +346,14 @@ layui.define(['table'], function (exports) {
var tableId = options.id; var tableId = options.id;
var customName = treeOptions.customName; var customName = treeOptions.customName;
var treeNode = { // 带上一些常用的方法
return {
data: data, data: data,
dataIndex: data[LAY_DATA_INDEX], dataIndex: data[LAY_DATA_INDEX],
getParentNode: function () { getParentNode: function () {
return that.getNodeByIndex(data[LAY_PARENT_INDEX]) return that.getNodeByIndex(data[LAY_PARENT_INDEX])
}, },
} };
// 带上一些常用的方法
return treeNode;
} }
// 通过 index 返回节点信息 // 通过 index 返回节点信息
@ -577,6 +575,7 @@ layui.define(['table'], function (exports) {
if (trExpand) { if (trExpand) {
// 展开 // 展开
if (trExpanded) { // 已经展开过 if (trExpanded) { // 已经展开过
if (!childNodes.length) return ;//异步如果子节点没有数据情况下双点行展开所有已展开的节点问题解决
trsElem.nextAll(childNodes.map(function (value, index, array) { trsElem.nextAll(childNodes.map(function (value, index, array) {
return 'tr[lay-data-index="' + value[LAY_DATA_INDEX] + '"]' return 'tr[lay-data-index="' + value[LAY_DATA_INDEX] + '"]'
}).join(',')).removeClass(HIDE); }).join(',')).removeClass(HIDE);
@ -603,7 +602,11 @@ layui.define(['table'], function (exports) {
options: options, options: options,
}, true); }, true);
} }
}) });
treeTableThat.updateStatus(childNodes, function (d) {
d['LAY_HIDE'] = false;
});
options.hasNumberCol && formatNumber(tableId);
} else { } else {
var asyncSetting = treeOptions.async || {}; var asyncSetting = treeOptions.async || {};
var asyncUrl = asyncSetting.url || options.url; var asyncUrl = asyncSetting.url || options.url;
@ -761,6 +764,11 @@ layui.define(['table'], function (exports) {
tableViewElem.find(childNodesFlat.map(function (value, index, array) { tableViewElem.find(childNodesFlat.map(function (value, index, array) {
return 'tr[lay-data-index="' + value[LAY_DATA_INDEX] + '"]' return 'tr[lay-data-index="' + value[LAY_DATA_INDEX] + '"]'
}).join(',')).addClass(HIDE); }).join(',')).addClass(HIDE);
treeTableThat.updateStatus(childNodes, function (d) {
d['LAY_HIDE'] = true;
});
options.hasNumberCol && formatNumber(tableId);
} }
} }
@ -1030,13 +1038,14 @@ layui.define(['table'], function (exports) {
}); });
} else { } else {
debounceFn('renderTreeTable-' + tableId, function () { debounceFn('renderTreeTable-' + tableId, function () {
options.hasNumberCol && formatNumber(that); options.hasNumberCol && formatNumber(tableId);
form.render($('.layui-table-tree[lay-id="' + tableId + '"]')); form.render($('.layui-table-tree[lay-id="' + tableId + '"]'));
}, 0)(); }, 0)();
} }
} }
var formatNumber = function (that) { var formatNumber = function (id) {
var that = getThisTable(id);
var options = that.getOptions(); var options = that.getOptions();
var tableViewElem = options.elem.next(); var tableViewElem = options.elem.next();
@ -1045,6 +1054,7 @@ layui.define(['table'], function (exports) {
var trFixedL = tableViewElem.find('.layui-table-fixed-l tbody tr'); var trFixedL = tableViewElem.find('.layui-table-fixed-l tbody tr');
var trFixedR = tableViewElem.find('.layui-table-fixed-r tbody tr'); var trFixedR = tableViewElem.find('.layui-table-fixed-r tbody tr');
layui.each(that.treeToFlat(table.cache[options.id]), function (i1, item1) { layui.each(that.treeToFlat(table.cache[options.id]), function (i1, item1) {
if (item1['LAY_HIDE']) return;
var itemData = that.getNodeDataByIndex(item1[LAY_DATA_INDEX]); var itemData = that.getNodeDataByIndex(item1[LAY_DATA_INDEX]);
itemData['LAY_NUM'] = ++num; itemData['LAY_NUM'] = ++num;
trMain.eq(i1).find('.laytable-cell-numbers').html(num); trMain.eq(i1).find('.laytable-cell-numbers').html(num);
@ -1243,7 +1253,7 @@ layui.define(['table'], function (exports) {
layui.each(table.cache[id], function (i4, item4) { layui.each(table.cache[id], function (i4, item4) {
tableView.find('tr[data-level="0"][lay-data-index="' + item4[LAY_DATA_INDEX] + '"]').attr('data-index', i4); tableView.find('tr[data-level="0"][lay-data-index="' + item4[LAY_DATA_INDEX] + '"]').attr('data-index', i4);
}) })
options.hasNumberCol && formatNumber(that); options.hasNumberCol && formatNumber(id);
// 重新适配尺寸 // 重新适配尺寸
treeTable.resize(id); treeTable.resize(id);
@ -1572,7 +1582,11 @@ layui.define(['table'], function (exports) {
// 更新全选的状态 // 更新全选的状态
var isAll = true; var isAll = true;
var isIndeterminate = false; var isIndeterminate = false;
layui.each(treeOptions.data.cascade === 'all' ? table.cache[tableId] : treeTable.getData(tableId, true), function (i1, item1) { var data = treeOptions.data.cascade === 'all' ? table.cache[tableId] : treeTable.getData(tableId, true);
data = data.filter(function (item) {
return !item[options.disabledName];
});
layui.each(data, function (i1, item1) {
if (item1[checkName] || item1[LAY_CHECKBOX_HALF]) { if (item1[checkName] || item1[LAY_CHECKBOX_HALF]) {
isIndeterminate = true; isIndeterminate = true;
} }