mirror of
https://gitee.com/layui/layui.git
synced 2025-05-16 21:19:38 +08:00
Merge branch 'layui:2.x' into 2.x
This commit is contained in:
commit
205fa1fcd7
11
.editorconfig
Normal file
11
.editorconfig
Normal 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
|
@ -34,7 +34,7 @@ toc: true
|
||||
| [laydate.render(options)](#render) | laydate 组件渲染,核心方法。 |
|
||||
| [laydate.hint(id, opts)](#hint) <sup>2.8+</sup> | 在对应的 laydate 组件面板上弹出提示层。 |
|
||||
| [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.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>
|
||||
|
@ -68,7 +68,7 @@ layui.use(function(){
|
||||
}
|
||||
]
|
||||
},
|
||||
hideFooter: true // 是否隐藏底部栏 --- 2.8+
|
||||
footer: false // 是否显示底部栏 --- 2.8.16+
|
||||
});
|
||||
},
|
||||
'test-tips-photos': function(){
|
||||
@ -98,4 +98,4 @@ layui.use(function(){
|
||||
}
|
||||
})
|
||||
});
|
||||
</script>
|
||||
</script>
|
||||
|
@ -248,7 +248,8 @@ layer.prompt({
|
||||
| 私有属性 | 描述 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| 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 | - |
|
||||
|
||||
该方法用于弹出图片层,基于 `type: 1`(即 `page` 层)的自定义内容。
|
||||
@ -606,4 +607,4 @@ layer.min(index);
|
||||
|
||||
## 贴士
|
||||
|
||||
> layer 曾经可作为单独组件使用,鉴于维护成本的考量,目前 layer 组件已完全集成到 Layui 中,而单独版本已不做同步维护。 因此,建议直接使用 layui 中 layer 即可。
|
||||
> layer 曾经可作为单独组件使用,鉴于维护成本的考量,目前 layer 组件已完全集成到 Layui 中,而单独版本已不做同步维护。 因此,建议直接使用 layui 中 layer 即可。
|
||||
|
@ -198,5 +198,4 @@
|
||||
|
||||
<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)
|
||||
|
@ -80,4 +80,4 @@
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
@ -75,7 +75,7 @@ layui.use(['table', 'dropdown'], function(){
|
||||
{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:'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:'checkin', title:'打卡', width: 100, sort: true, totalRow: '{{!{{= parseInt(d.TOTAL_NUMS) }} 次!}}'},
|
||||
{field:'ip', title:'IP', width: 120},
|
||||
@ -368,4 +368,4 @@ layui.use(['table', 'dropdown'], function(){
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
@ -116,6 +116,8 @@ layui.use('code', function(){
|
||||
// 通用实例,根据元素属性定制化参数
|
||||
layui.code({
|
||||
//about: 'code' // 右上角默认显示 code
|
||||
tools: ['tips'],
|
||||
preview: true
|
||||
});
|
||||
|
||||
// custom more about
|
||||
|
@ -1,20 +1,15 @@
|
||||
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||
<title>layer 弹层 - layui</title>
|
||||
|
||||
<link rel="stylesheet" href="../src/css/layui.css">
|
||||
|
||||
<style>
|
||||
body{padding: 100px;}
|
||||
|
||||
#photos li{float: left; margin: 0 1px 1px;}
|
||||
#photos img{max-height: 38px;}
|
||||
</style>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||
<title>layer 弹层 - layui</title>
|
||||
<link rel="stylesheet" href="../src/css/layui.css">
|
||||
<style>
|
||||
body{padding: 100px;}
|
||||
#photos li{float: left; margin: 0 1px 1px;}
|
||||
#photos img{max-height: 38px;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
@ -30,10 +25,10 @@ body{padding: 100px;}
|
||||
<button class="layui-btn" lay-on="test8">Tab</button>
|
||||
<button class="layui-btn" lay-on="test9">Photo</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 id="test11111" style="display: none; padding: 20px;">
|
||||
<div id="test11111" style="display: none; padding: 16px;">
|
||||
content 指向放置在页面的一段隐藏元素
|
||||
</div>
|
||||
|
||||
@ -48,8 +43,8 @@ body{padding: 100px;}
|
||||
|
||||
<script>
|
||||
var LAYUI_GLOBAL = {
|
||||
//path: '../src/'
|
||||
//,layerPath: '../release/layer/src/'
|
||||
// path: '../src/',
|
||||
// layerPath: '../release/layer/src/'
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -224,7 +219,9 @@ layui.use(['layer', 'util'], function(layer, util){
|
||||
|
||||
// 相册层
|
||||
layer.photos({
|
||||
photos: '#photos' //$('#photos')
|
||||
photos: '#photos', // $('#photos')
|
||||
// toolbar: false,
|
||||
// footer: false
|
||||
});
|
||||
|
||||
//动态追加
|
||||
|
@ -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-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:hover{border-color: #16b777;}
|
||||
.layui-table-expanded td:hover .layui-table-cell{overflow: auto;}
|
||||
|
@ -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.layui-this{display: block;}
|
||||
|
||||
/* photo模式 */
|
||||
/* photos */
|
||||
.layui-layer-photos{background: none; box-shadow: none;}
|
||||
.layui-layer-photos .layui-layer-content{overflow:hidden; 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-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-imgprev{left: 32px;}
|
||||
.layui-layer-imgnext{right: 32px;}
|
||||
.layui-layer-imgprev:hover,
|
||||
.layui-layer-imgnext:hover{color: #959595;}
|
||||
.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-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-imgtit h3{max-width:65%; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; font-weight: 300;}
|
||||
.layui-layer-imgtit a:hover{color: #fff; text-decoration: underline;}
|
||||
.layui-layer-imgtit em{font-style: normal;}
|
||||
.layui-layer-photos .layui-layer-content{overflow: visible; text-align: center;}
|
||||
.layui-layer-photos .layer-layer-photos-main img{position: relative; width:100%; display: inline-block; *display:inline; *zoom:1; vertical-align:top;}
|
||||
.layui-layer-photos-prev,
|
||||
.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-photos-prev{left: 32px;}
|
||||
.layui-layer-photos-next{right: 32px;}
|
||||
.layui-layer-photos-prev:hover,
|
||||
.layui-layer-photos-next:hover{color: #959595;}
|
||||
|
||||
.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-photos-toolbar > *{display:inline-block; vertical-align: top; padding: 0 16px; font-size: 12px; color: #fff; *display:inline; *zoom: 1;}
|
||||
.layui-layer-photos-toolbar *{font-size: 12px;}
|
||||
.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 {
|
||||
|
@ -209,12 +209,12 @@ layui.define(['lay', 'util', 'element', 'form'], function(exports){
|
||||
elemToolbar.on('click', '>i', function(){
|
||||
var oi = $(this);
|
||||
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);
|
||||
});
|
||||
layui.each(options.tools, function(i, v){
|
||||
var className = (tools[v] && tools[v].className) || v;
|
||||
var title = tools[v].title || [''];
|
||||
var title = (tools[v] && tools[v].title) || [''];
|
||||
elemToolbar.append(
|
||||
'<i class="layui-icon layui-icon-'+ className +'" data-type="'+ v +'" title="'+ title[0] +'"></i>'
|
||||
);
|
||||
|
@ -111,32 +111,54 @@
|
||||
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 样式
|
||||
lay.style = function(options){
|
||||
options = options || {};
|
||||
|
||||
var style = lay.elem('style');
|
||||
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.styleSheet.cssText = styleText;
|
||||
} else {
|
||||
style.innerHTML = styleText;
|
||||
}
|
||||
|
||||
lay.style.index = lay.style.index || 0;
|
||||
lay.style.index++;
|
||||
|
||||
var id = style.id = 'LAY-STYLE-'+ (options.id || 'DF-'+ lay.style.index)
|
||||
var styleElem = lay(target).find('#'+ id);
|
||||
|
||||
styleElem[0] && styleElem.remove();
|
||||
lay(target).append(style);
|
||||
// ID
|
||||
style.id = 'LAY-STYLE-'+ (options.id || function(index) {
|
||||
lay.style.index++;
|
||||
return 'DF-'+ index;
|
||||
}(lay.style.index || 0));
|
||||
|
||||
// 是否向目标容器中追加 style 元素
|
||||
if (target) {
|
||||
var styleElem = lay(target).find('#'+ style.id);
|
||||
styleElem[0] && styleElem.remove();
|
||||
lay(target).append(style);
|
||||
}
|
||||
|
||||
return style;
|
||||
};
|
||||
|
||||
// 元素定位
|
||||
@ -467,4 +489,4 @@
|
||||
});
|
||||
}
|
||||
|
||||
}(window, window.document); // gulp build: lay-footer
|
||||
}(window, window.document); // gulp build: lay-footer
|
||||
|
@ -1,4 +1,4 @@
|
||||
/**
|
||||
/**
|
||||
* layer
|
||||
* 通用 Web 弹出层组件
|
||||
*/
|
||||
@ -1353,9 +1353,9 @@ layer.prompt = function(options, yes){
|
||||
layer.tab = function(options){
|
||||
options = options || {};
|
||||
|
||||
var tab = options.tab || {}
|
||||
,THIS = 'layui-this'
|
||||
,success = options.success;
|
||||
var tab = options.tab || {};
|
||||
var THIS = 'layui-this';
|
||||
var success = options.success;
|
||||
|
||||
delete options.success;
|
||||
|
||||
@ -1398,10 +1398,16 @@ layer.tab = function(options){
|
||||
}, options));
|
||||
};
|
||||
|
||||
// 相册层
|
||||
// 图片层
|
||||
layer.photos = function(options, loop, key){
|
||||
var dict = {};
|
||||
options = options || {};
|
||||
|
||||
// 默认属性
|
||||
options = $.extend(true, {
|
||||
toolbar: true,
|
||||
footer: true
|
||||
}, options);
|
||||
|
||||
if(!options.photos) return;
|
||||
|
||||
// 若 photos 并非选择器或 jQuery 对象,则为普通 object
|
||||
@ -1409,11 +1415,10 @@ layer.photos = function(options, loop, key){
|
||||
var photos = isObject ? options.photos : {};
|
||||
var data = photos.data || [];
|
||||
var start = photos.start || 0;
|
||||
var success = options.success;
|
||||
|
||||
dict.imgIndex = (start|0) + 1;
|
||||
options.img = options.img || 'img';
|
||||
|
||||
var success = options.success;
|
||||
delete options.success;
|
||||
|
||||
// 若 options.photos 不是一个对象
|
||||
@ -1450,8 +1455,7 @@ layer.photos = function(options, loop, key){
|
||||
});
|
||||
|
||||
// 不直接弹出
|
||||
if(!loop) return;
|
||||
|
||||
if (!loop) return;
|
||||
} else if (data.length === 0){
|
||||
return layer.msg('没有图片');
|
||||
}
|
||||
@ -1497,28 +1501,91 @@ layer.photos = function(options, loop, key){
|
||||
layer.close(dict.index);
|
||||
return layer.photos(options, true, key);
|
||||
}
|
||||
|
||||
dict.isNumber = function (n) {
|
||||
return typeof n === 'number' && !isNaN(n);
|
||||
}
|
||||
|
||||
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(){
|
||||
/*
|
||||
dict.bigimg.hover(function(){
|
||||
dict.imgsee.show();
|
||||
}, function(){
|
||||
dict.imgsee.hide();
|
||||
});
|
||||
*/
|
||||
|
||||
dict.bigimg.find('.layui-layer-imgprev').on('click', function(event){
|
||||
dict.event = function(layero, index, that){
|
||||
dict.main.find('.layui-layer-photos-prev').on('click', function(event){
|
||||
event.preventDefault();
|
||||
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();
|
||||
dict.imgnext(true);
|
||||
});
|
||||
|
||||
$(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);
|
||||
});
|
||||
|
||||
};
|
||||
|
||||
// 图片预加载
|
||||
@ -1570,52 +1637,65 @@ layer.photos = function(options, loop, key){
|
||||
imgarea[1] = imgarea[1]/wh[1];
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
return [imgarea[0]+'px', imgarea[1]+'px'];
|
||||
}(),
|
||||
title: false,
|
||||
shade: 0.9,
|
||||
shadeClose: true,
|
||||
closeBtn: false,
|
||||
move: '.layui-layer-phimg img',
|
||||
move: '.layer-layer-photos-main img',
|
||||
moveType: 1,
|
||||
scrollbar: false,
|
||||
moveOut: true,
|
||||
anim: 5,
|
||||
isOutAnim: false,
|
||||
skin: 'layui-layer-photos' + skin('photos'),
|
||||
content: '<div class="layui-layer-phimg">'
|
||||
+ '<img src="'+ data[start].src +'" alt="'+ alt +'" layer-pid="'+ data[start].pid +'">'
|
||||
content: '<div class="layer-layer-photos-main">'
|
||||
+ '<img src="'+ data[start].src +'" alt="'+ alt +'" layer-pid="'+ (data[start].pid || '') +'">'
|
||||
+ function(){
|
||||
var arr = ['<div class="layui-layer-imgsee">'];
|
||||
var arr = ['<div class="layui-layer-photos-pointer">'];
|
||||
|
||||
// 左右箭头翻页
|
||||
if(data.length > 1){
|
||||
arr.push(['<div class="layui-layer-imguide">'
|
||||
,'<span class="layui-icon layui-icon-left layui-layer-iconext layui-layer-imgprev"></span>'
|
||||
,'<span class="layui-icon layui-icon-right layui-layer-iconext layui-layer-imgnext"></span>'
|
||||
,'</div>'].join(''));
|
||||
if (data.length > 1) {
|
||||
arr.push(['<div class="layer-layer-photos-page">',
|
||||
'<span class="layui-icon layui-icon-left layui-layer-photos-prev"></span>',
|
||||
'<span class="layui-icon layui-icon-right layui-layer-photos-next"></span>',
|
||||
'</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){
|
||||
arr.push(['<div class="layui-layer-imgbar">'
|
||||
,'<div class="layui-layer-imgtit">'
|
||||
,'<h3>'+ alt +'</h3>'
|
||||
,'<em>'+ dict.imgIndex +' / '+ data.length +'</em>'
|
||||
,'<a href="'+ data[start].src +'" target="_blank">查看原图</a>'
|
||||
,'</div>'
|
||||
,'</div>'].join(''));
|
||||
if (options.footer) {
|
||||
arr.push(['<div class="layui-layer-photos-toolbar layui-layer-photos-footer">',
|
||||
'<h3>'+ alt +'</h3>',
|
||||
'<em>'+ dict.imgIndex +' / '+ data.length +'</em>',
|
||||
'<a href="'+ data[start].src +'" target="_blank">查看原图</a>',
|
||||
'</div>'].join(''));
|
||||
}
|
||||
|
||||
arr.push('</div>');
|
||||
return arr.join('');
|
||||
}()
|
||||
+'</div>',
|
||||
success: function(layero, index){
|
||||
dict.bigimg = layero.find('.layui-layer-phimg');
|
||||
dict.imgsee = layero.find('.layui-layer-imgbar');
|
||||
dict.event(layero);
|
||||
success: function(layero, index, that){
|
||||
dict.main = layero.find('.layer-layer-photos-main');
|
||||
dict.footer = layero.find('.layui-layer-photos-footer');
|
||||
dict.imgElem = dict.main.children('img');
|
||||
dict.event(layero, index, that);
|
||||
options.tab && options.tab(data[start], layero);
|
||||
typeof success === 'function' && success(layero);
|
||||
}, end: function(){
|
||||
|
@ -10,42 +10,47 @@ layui.define(['jquery', 'lay'],function(exports){
|
||||
|
||||
// 外部接口
|
||||
var rate = {
|
||||
config: {}
|
||||
,index: layui.rate ? (layui.rate.index + 10000) : 0
|
||||
config: {},
|
||||
index: layui.rate ? (layui.rate.index + 10000) : 0,
|
||||
|
||||
//设置全局项
|
||||
,set: function(options){
|
||||
set: function(options){
|
||||
var that = this;
|
||||
that.config = $.extend({}, that.config, options);
|
||||
return that;
|
||||
}
|
||||
},
|
||||
|
||||
//事件
|
||||
,on: function(events, callback){
|
||||
on: function(events, callback){
|
||||
return layui.onevent.call(this, MOD_NAME, events, callback);
|
||||
}
|
||||
}
|
||||
|
||||
// 操作当前实例
|
||||
,thisRate = function(){
|
||||
var that = this
|
||||
,options = that.config;
|
||||
|
||||
var thisRate = function () {
|
||||
var that = this;
|
||||
var options = that.config;
|
||||
|
||||
return {
|
||||
setvalue: function(value){
|
||||
setvalue: function (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'
|
||||
|
||||
,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 MOD_NAME = 'rate';
|
||||
var ELEM_VIEW = 'layui-rate';
|
||||
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;
|
||||
that.index = ++rate.index;
|
||||
that.config = $.extend({}, that.config, rate.config, options);
|
||||
@ -54,12 +59,12 @@ layui.define(['jquery', 'lay'],function(exports){
|
||||
|
||||
//默认配置
|
||||
Class.prototype.config = {
|
||||
length: 5 //初始长度
|
||||
,text: false //是否显示评分等级
|
||||
,readonly: false //是否只读
|
||||
,half: false //是否可以半星
|
||||
,value: 0 //星星选中个数
|
||||
,theme: ''
|
||||
length: 5, //初始长度
|
||||
text: false, //是否显示评分等级
|
||||
readonly: false, //是否只读
|
||||
half: false, //是否可以半星
|
||||
value: 0, //星星选中个数
|
||||
theme: ''
|
||||
};
|
||||
|
||||
//评分渲染
|
||||
@ -114,8 +119,8 @@ layui.define(['jquery', 'lay'],function(exports){
|
||||
temp += '</ul>' + (options.text ? ('<span class="layui-inline">'+ options.value + '星') : '') + '</span>';
|
||||
|
||||
//开始插入替代元素
|
||||
var othis = options.elem
|
||||
,hasRender = othis.next('.' + ELEM_VIEW);
|
||||
var othis = options.elem;
|
||||
var hasRender = othis.next('.' + ELEM_VIEW);
|
||||
|
||||
//生成替代元素
|
||||
hasRender[0] && hasRender.remove(); //如果已经渲染,则Rerender
|
||||
@ -137,8 +142,8 @@ layui.define(['jquery', 'lay'],function(exports){
|
||||
|
||||
//评分重置
|
||||
Class.prototype.setvalue = function(value){
|
||||
var that = this
|
||||
,options = that.config ;
|
||||
var that = this;
|
||||
var options = that.config;
|
||||
|
||||
options.value = value ;
|
||||
that.render();
|
||||
@ -146,14 +151,14 @@ layui.define(['jquery', 'lay'],function(exports){
|
||||
|
||||
//li触控事件
|
||||
Class.prototype.action = function(){
|
||||
var that = this
|
||||
,options = that.config
|
||||
,_ul = that.elemTemp
|
||||
,wide = _ul.find("i").width();
|
||||
var that = this;
|
||||
var options = that.config;
|
||||
var _ul = that.elemTemp;
|
||||
var wide = _ul.find("i").width();
|
||||
|
||||
_ul.children("li").each(function(index){
|
||||
var ind = index + 1
|
||||
,othis = $(this);
|
||||
var ind = index + 1;
|
||||
var othis = $(this);
|
||||
|
||||
//点击
|
||||
othis.on('click', function(e){
|
||||
@ -210,9 +215,9 @@ layui.define(['jquery', 'lay'],function(exports){
|
||||
};
|
||||
|
||||
//事件处理
|
||||
Class.prototype.events = function(){
|
||||
var that = this
|
||||
,options = that.config;
|
||||
Class.prototype.events = function () {
|
||||
var that = this;
|
||||
//var options = that.config;
|
||||
};
|
||||
|
||||
//核心入口
|
||||
@ -222,4 +227,4 @@ layui.define(['jquery', 'lay'],function(exports){
|
||||
};
|
||||
|
||||
exports(MOD_NAME, rate);
|
||||
})
|
||||
})
|
||||
|
@ -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-inline layui-table-pageview" id="layui-table-page{{=d.index}}"></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('');
|
||||
|
||||
var _WIN = $(window);
|
||||
@ -329,18 +306,18 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
|
||||
|
||||
//请求参数的自定义格式
|
||||
options.request = $.extend({
|
||||
pageName: 'page'
|
||||
,limitName: 'limit'
|
||||
pageName: 'page',
|
||||
limitName: 'limit'
|
||||
}, options.request)
|
||||
|
||||
// 响应数据的自定义格式
|
||||
options.response = $.extend({
|
||||
statusName: 'code' //规定数据状态的字段名称
|
||||
,statusCode: 0 //规定成功的状态码
|
||||
,msgName: 'msg' //规定状态信息的字段名称
|
||||
,dataName: 'data' //规定数据总数的字段名称
|
||||
,totalRowName: 'totalRow' //规定数据统计的字段名称
|
||||
,countName: 'count'
|
||||
statusName: 'code', //规定数据状态的字段名称
|
||||
statusCode: 0, //规定成功的状态码
|
||||
msgName: 'msg', //规定状态信息的字段名称
|
||||
dataName: 'data', //规定数据总数的字段名称
|
||||
totalRowName: 'totalRow', //规定数据统计的字段名称
|
||||
countName: 'count'
|
||||
}, options.response);
|
||||
|
||||
//如果 page 传入 laypage 对象
|
||||
@ -385,13 +362,14 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
|
||||
options.height = $(that.parentDiv).height() - that.parentHeightGap;
|
||||
}
|
||||
|
||||
//开始插入替代元素
|
||||
var othis = options.elem
|
||||
,hasRender = othis.next('.' + ELEM_VIEW)
|
||||
// 开始插入替代元素
|
||||
var othis = options.elem;
|
||||
var hasRender = othis.next('.' + ELEM_VIEW);
|
||||
|
||||
//主容器
|
||||
,reElem = that.elem = $('<div></div>');
|
||||
// 主容器
|
||||
var reElem = that.elem = $('<div></div>');
|
||||
|
||||
// 添加 className
|
||||
reElem.addClass(function(){
|
||||
var arr = [
|
||||
ELEM_VIEW,
|
||||
@ -402,9 +380,9 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
|
||||
if(options.className) arr.push(options.className);
|
||||
return arr.join(' ');
|
||||
}()).attr({
|
||||
'lay-filter': 'LAY-TABLE-FORM-DF-'+ that.index
|
||||
,'lay-id': options.id
|
||||
,'style': function(){
|
||||
'lay-filter': 'LAY-TABLE-FORM-DF-'+ that.index,
|
||||
'lay-id': options.id,
|
||||
'style': function(){
|
||||
var arr = [];
|
||||
if(options.width) arr.push('width:'+ options.width + 'px;');
|
||||
// if(options.height) arr.push('height:'+ options.height + 'px;');
|
||||
@ -414,15 +392,18 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
|
||||
open: '{{', // 标签符前缀
|
||||
close: '}}' // 标签符后缀
|
||||
}).render({
|
||||
data: options
|
||||
,index: that.index //索引
|
||||
data: options,
|
||||
index: that.index //索引
|
||||
}));
|
||||
|
||||
//生成替代元素
|
||||
hasRender[0] && hasRender.remove(); //如果已经渲染,则Rerender
|
||||
// 初始化样式
|
||||
that.renderStyle();
|
||||
|
||||
// 生成替代元素
|
||||
hasRender[0] && hasRender.remove(); // 如果已经渲染,则 Rerender
|
||||
othis.after(reElem);
|
||||
|
||||
//各级容器
|
||||
// 各级容器
|
||||
that.layTool = reElem.find(ELEM_TOOL);
|
||||
that.layBox = reElem.find(ELEM_BOX);
|
||||
that.layHeader = reElem.find(ELEM_HEADER);
|
||||
@ -443,22 +424,22 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
|
||||
// 让表格平铺
|
||||
that.fullSize();
|
||||
|
||||
that.pullData(that.page); //请求数据
|
||||
that.events(); //事件
|
||||
that.pullData(that.page); // 请求数据
|
||||
that.events(); // 事件
|
||||
};
|
||||
|
||||
//根据列类型,定制化参数
|
||||
// 根据列类型,定制化参数
|
||||
Class.prototype.initOpts = function(item){
|
||||
var that = this
|
||||
,options = that.config
|
||||
,initWidth = {
|
||||
checkbox: 50
|
||||
,radio: 50
|
||||
,space: 30
|
||||
,numbers: 60
|
||||
var options = that.config;
|
||||
var initWidth = {
|
||||
checkbox: 50,
|
||||
radio: 50,
|
||||
space: 30,
|
||||
numbers: 60
|
||||
};
|
||||
|
||||
//让 type 参数兼容旧版本
|
||||
// 让 type 参数兼容旧版本
|
||||
if(item.checkbox) item.type = "checkbox";
|
||||
if(item.space) item.type = "space";
|
||||
if(!item.type) item.type = "normal";
|
||||
@ -471,8 +452,8 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
|
||||
|
||||
//初始化一些参数
|
||||
Class.prototype.setInit = function(type){
|
||||
var that = this
|
||||
,options = that.config;
|
||||
var that = this;
|
||||
var options = that.config;
|
||||
|
||||
options.clientWidth = options.width || function(){ //获取容器宽度
|
||||
//如果父元素宽度为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(){
|
||||
var that = this
|
||||
@ -784,7 +819,7 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
|
||||
|
||||
// 给未分配宽的列平均分配宽
|
||||
if(item3.width === 0){
|
||||
that.getCssRule(item3.key, function(item){
|
||||
that.cssRules(item3.key, function(item){
|
||||
item.style.width = Math.floor(function(){
|
||||
if(autoWidth < minWidth) return minWidth;
|
||||
if(autoWidth > maxWidth) return maxWidth;
|
||||
@ -795,7 +830,7 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
|
||||
|
||||
// 给设定百分比的列分配列宽
|
||||
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);
|
||||
width < minWidth && (width = minWidth);
|
||||
width > maxWidth && (width = maxWidth);
|
||||
@ -805,7 +840,7 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
|
||||
|
||||
// 给拥有普通 width 值的列分配最新列宽
|
||||
else {
|
||||
that.getCssRule(item3.key, function(item){
|
||||
that.cssRules(item3.key, function(item){
|
||||
item.style.width = item3.width + 'px';
|
||||
});
|
||||
}
|
||||
@ -828,7 +863,7 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
|
||||
var th = getEndTh();
|
||||
var key = th.data('key');
|
||||
|
||||
that.getCssRule(key, function(item){
|
||||
that.cssRules(key, function(item){
|
||||
var width = item.style.width || th.outerWidth();
|
||||
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;
|
||||
var request = options.request;
|
||||
var response = options.response;
|
||||
var res;
|
||||
var sort = function(){
|
||||
if(typeof options.initSort === 'object'){
|
||||
that.sort({
|
||||
@ -951,7 +987,7 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
|
||||
that.startTime = new Date().getTime(); // 渲染开始时间
|
||||
|
||||
if (opts.renderData) { // 将 cache 信息重新渲染
|
||||
var res = {};
|
||||
res = {};
|
||||
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;
|
||||
|
||||
@ -1021,7 +1057,7 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
|
||||
}
|
||||
});
|
||||
} else if(layui.type(options.data) === 'array'){ //已知数据
|
||||
var res = {};
|
||||
res = {};
|
||||
var startLimit = curr*options.limit - options.limit;
|
||||
var newData = options.data.concat();
|
||||
|
||||
@ -1074,8 +1110,10 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
|
||||
curr = curr || 1
|
||||
|
||||
layui.each(data, function(i1, item1){
|
||||
var tds = [], tds_fixed = [], tds_fixed_r = []
|
||||
,numbers = i1 + options.limit*(curr - 1) + 1; // 序号
|
||||
var tds = [];
|
||||
var tds_fixed = [];
|
||||
var tds_fixed_r = [];
|
||||
var numbers = i1 + options.limit*(curr - 1) + 1; // 序号
|
||||
|
||||
// 数组值是否为 object,如果不是,则自动转为 object
|
||||
if(typeof item1 !== 'object'){
|
||||
@ -1159,7 +1197,7 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
|
||||
|
||||
return arr.join(' ');
|
||||
}() +' lay-type="layTableCheckbox">';
|
||||
break;
|
||||
//break;
|
||||
case 'radio': // 单选
|
||||
return '<input type="radio" name="layTableRadio_'+ options.index +'" '
|
||||
+ function(){
|
||||
@ -1168,10 +1206,10 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
|
||||
if(tplData[disabledName]) arr.push('disabled');
|
||||
return arr.join(' ');
|
||||
}() +' lay-type="layTableRadio">';
|
||||
break;
|
||||
//break;
|
||||
case 'numbers':
|
||||
return numbers;
|
||||
break;
|
||||
//break;
|
||||
};
|
||||
|
||||
//解析工具列模板
|
||||
@ -1309,15 +1347,15 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
|
||||
//同步分页状态
|
||||
if(options.page){
|
||||
options.page = $.extend({
|
||||
elem: 'layui-table-page' + options.index
|
||||
,count: count
|
||||
,limit: options.limit
|
||||
,limits: options.limits || [10,20,30,40,50,60,70,80,90]
|
||||
,groups: 3
|
||||
,layout: ['prev', 'page', 'next', 'skip', 'count', 'limit']
|
||||
,prev: '<i class="layui-icon"></i>'
|
||||
,next: '<i class="layui-icon"></i>'
|
||||
,jump: function(obj, first){
|
||||
elem: 'layui-table-page' + options.index,
|
||||
count: count,
|
||||
limit: options.limit,
|
||||
limits: options.limits || [10,20,30,40,50,60,70,80,90],
|
||||
groups: 3,
|
||||
layout: ['prev', 'page', 'next', 'skip', 'count', 'limit'],
|
||||
prev: '<i class="layui-icon"></i>',
|
||||
next: '<i class="layui-icon"></i>',
|
||||
jump: function(obj, first){
|
||||
if(!first){
|
||||
//分页本身并非需要做以下更新,下面参数的同步,主要是因为其它处理统一用到了它们
|
||||
//而并非用的是 options.page 中的参数(以确保分页未开启的情况仍能正常使用)
|
||||
@ -1394,9 +1432,9 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
|
||||
|
||||
// 获取自动计算的合并内容
|
||||
var getContent = item3.totalRow ? (parseTempData.call(that, {
|
||||
item3: item3
|
||||
,content: thisTotalNum
|
||||
,tplData: tplData
|
||||
item3: item3,
|
||||
content: thisTotalNum,
|
||||
tplData: tplData
|
||||
}) || text) : text;
|
||||
|
||||
// 如果直接传入了合计行数据,则不输出自动计算的结果
|
||||
@ -1421,8 +1459,8 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
|
||||
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类标识
|
||||
}() +'">',
|
||||
'<div class="layui-table-cell laytable-cell-'+ function(){ // 返回对应的CSS类标识
|
||||
var key = item3.key;
|
||||
return item3.type === 'normal' ? key
|
||||
: (key + ' laytable-cell-' + item3.type);
|
||||
@ -1443,8 +1481,8 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
|
||||
}, item3));
|
||||
}
|
||||
return content;
|
||||
}()
|
||||
,'</div></td>'].join('');
|
||||
}(),
|
||||
'</div></td>'].join('');
|
||||
|
||||
tds.push(td);
|
||||
});
|
||||
@ -1455,8 +1493,8 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
|
||||
|
||||
//找到对应的列元素
|
||||
Class.prototype.getColElem = function(parent, key){
|
||||
var that = this
|
||||
,options = that.config;
|
||||
var that = this;
|
||||
//var options = that.config;
|
||||
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){
|
||||
if(layui.type(item) === 'array') return; // 空项
|
||||
if(layui.type(item) === 'array' || item[options.disabledName]) return; // 空项
|
||||
if(Number(opts.index) === i || opts.index === 'all'){
|
||||
var checked = item[options.checkName] = getChecked(item[options.checkName]);
|
||||
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="'+ ({
|
||||
radio: 'layTableRadio',
|
||||
checkbox: 'layTableCheckbox'
|
||||
}[opts.type] || 'checkbox') +'"]');
|
||||
}[opts.type] || 'checkbox') +'"]:not(:disabled)');
|
||||
|
||||
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'){
|
||||
field = opts.field;
|
||||
that.layHeader.find('th').each(function(i, item){
|
||||
var othis = $(this)
|
||||
,_field = othis.data('field');
|
||||
var othis = $(this);
|
||||
var _field = othis.data('field');
|
||||
if(_field === opts.field){
|
||||
opts.field = othis;
|
||||
field = _field;
|
||||
@ -1581,8 +1619,8 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
|
||||
}
|
||||
|
||||
try {
|
||||
var field = field || opts.field.data('field')
|
||||
,key = opts.field.data('key');
|
||||
field = field || opts.field.data('field');
|
||||
var key = opts.field.data('key');
|
||||
|
||||
// 如果欲执行的排序已在状态中,则不执行渲染
|
||||
if(that.sortKey && !opts.pull){
|
||||
@ -1601,8 +1639,8 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
|
||||
|
||||
// 记录排序索引和类型
|
||||
that.sortKey = {
|
||||
field: field
|
||||
,sort: opts.type
|
||||
field: field,
|
||||
sort: opts.type
|
||||
};
|
||||
|
||||
// 默认为前端自动排序。如果否,则需自主排序(通常为服务端处理好排序)
|
||||
@ -1632,8 +1670,8 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
|
||||
// 排序是否来自于点击表头事件触发
|
||||
if(opts.fromEvent){
|
||||
options.initSort = {
|
||||
field: field
|
||||
,type: opts.type
|
||||
field: field,
|
||||
type: opts.type
|
||||
};
|
||||
layui.event.call(opts.field, MOD_NAME, 'sort('+ filter +')', $.extend({
|
||||
config: options
|
||||
@ -1651,33 +1689,32 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
|
||||
delete that.layInit;
|
||||
that.layBox.find(ELEM_INIT).remove();
|
||||
} else {
|
||||
that.layInit = $(['<div class="layui-table-init">'
|
||||
,'<i class="layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop"></i>'
|
||||
,'</div>'].join(''));
|
||||
that.layInit = $(['<div class="layui-table-init">',
|
||||
'<i class="layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop"></i>',
|
||||
'</div>'].join(''));
|
||||
that.layBox.append(that.layInit);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 获取 cssRule
|
||||
Class.prototype.getCssRule = function(key, callback){
|
||||
// 获取对应单元格的 cssRules
|
||||
Class.prototype.cssRules = function(key, callback){
|
||||
var that = this;
|
||||
var style = that.elem.children('style')[0];
|
||||
var sheet = style.sheet || style.styleSheet || {};
|
||||
var rules = sheet.cssRules || sheet.rules;
|
||||
layui.each(rules, function(i, item){
|
||||
if(item.selectorText === ('.laytable-cell-'+ key)){
|
||||
|
||||
lay.getStyleRules(style, function(item){
|
||||
if (item.selectorText === ('.laytable-cell-'+ key)) {
|
||||
return callback(item), true;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
//让表格铺满
|
||||
// 让表格铺满
|
||||
Class.prototype.fullSize = function(){
|
||||
var that = this
|
||||
,options = that.config
|
||||
,height = options.height
|
||||
,bodyHeight;
|
||||
var that = this;
|
||||
var options = that.config;
|
||||
var height = options.height;
|
||||
var bodyHeight;
|
||||
|
||||
if(that.fullHeightGap){
|
||||
height = _WIN.height() - that.fullHeightGap;
|
||||
@ -1842,6 +1879,7 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
|
||||
|
||||
switch(events){
|
||||
case 'LAYTABLE_COLS': // 筛选列
|
||||
if (!table.cache[options.id].length) return layer.msg('暂时没有数据,不能使用筛选列功能!', {icon: 5});
|
||||
openPanel({
|
||||
list: function(){
|
||||
var lis = [];
|
||||
@ -1887,6 +1925,7 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
|
||||
});
|
||||
break;
|
||||
case 'LAYTABLE_EXPORT': // 导出
|
||||
if (!table.cache[options.id].length) return layer.msg('暂时没有数据,不能使用导出功能!', {icon: 5});
|
||||
if(device.ie){
|
||||
layer.tips('导出功能不支持 IE,请用 Chrome 等高级浏览器导出', this, {
|
||||
tips: 3
|
||||
@ -1898,8 +1937,8 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
|
||||
'<li data-type="csv">导出 csv 格式文件</li>',
|
||||
'<li data-type="xls">导出 xls 格式文件</li>'
|
||||
].join('')
|
||||
}()
|
||||
,done: function(panel, list){
|
||||
}(),
|
||||
done: function(panel, list){
|
||||
list.on('click', function(){
|
||||
var type = $(this).data('type')
|
||||
table.exportFile.call(that, options.id, null, type);
|
||||
@ -1909,6 +1948,7 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
|
||||
}
|
||||
break;
|
||||
case 'LAYTABLE_PRINT': // 打印
|
||||
if (!table.cache[options.id].length) return layer.msg('暂时没有数据,不能使用打印功能!', {icon: 5});
|
||||
var printWin = window.open('about:blank', '_blank');
|
||||
var style = ['<style>',
|
||||
'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({
|
||||
event: events
|
||||
,config: options
|
||||
event: events,
|
||||
config: options
|
||||
},{}));
|
||||
});
|
||||
|
||||
@ -1970,16 +2010,16 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
|
||||
var events = othis.attr('lay-event');
|
||||
|
||||
layui.event.call(this, MOD_NAME, 'pagebar('+ filter +')', $.extend({
|
||||
event: events
|
||||
,config: options
|
||||
event: events,
|
||||
config: options
|
||||
},{}));
|
||||
});
|
||||
|
||||
// 拖拽调整宽度
|
||||
th.on('mousemove', function(e){
|
||||
var othis = $(this)
|
||||
,oLeft = othis.offset().left
|
||||
,pLeft = e.clientX - oLeft;
|
||||
var othis = $(this);
|
||||
var oLeft = othis.offset().left;
|
||||
var pLeft = e.clientX - oLeft;
|
||||
if(othis.data('unresize') || thisTable.eventMoveElem){
|
||||
return;
|
||||
}
|
||||
@ -1996,7 +2036,7 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
|
||||
e.preventDefault();
|
||||
dict.offset = [e.clientX, e.clientY]; //记录初始坐标
|
||||
|
||||
that.getCssRule(key, function(item){
|
||||
that.cssRules(key, function(item){
|
||||
var width = item.style.width || othis.outerWidth();
|
||||
dict.rule = item;
|
||||
dict.ruleWidth = parseFloat(width);
|
||||
@ -2055,7 +2095,7 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
|
||||
delete thisTable.eventMoveElem;
|
||||
|
||||
// 列拖拽宽度后的事件
|
||||
thatTable.getCssRule(key, function(item){
|
||||
thatTable.cssRules(key, function(item){
|
||||
col.width = parseFloat(item.style.width);
|
||||
layui.event.call(th[0], MOD_NAME, 'colResized('+ filter +')', {
|
||||
col: col,
|
||||
@ -2095,9 +2135,9 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
|
||||
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')
|
||||
var othis = $(this);
|
||||
var index = othis.index();
|
||||
var field = othis.parents('th').eq(0).data('field');
|
||||
layui.stope(e);
|
||||
if(index === 0){
|
||||
that.sort({
|
||||
@ -2427,7 +2467,7 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
|
||||
that.elem.find('.'+ ELEM_CELL_C).trigger('click');
|
||||
|
||||
// 设置当前单元格展开宽度
|
||||
that.getCssRule(key, function(item){
|
||||
that.cssRules(key, function(item){
|
||||
var width = item.style.width;
|
||||
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);
|
||||
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(){
|
||||
var $this = $(this);
|
||||
that.setRowActive(index, ELEM_EXPAND, true); // 移除单元格展开样式
|
||||
that.getCssRule(key, function(item){
|
||||
that.cssRules(key, function(item){
|
||||
item.style.width = $this.data('cell-width'); // 恢复单元格展开前的宽度
|
||||
that.resize(); // 滚动条补丁
|
||||
});
|
||||
@ -2652,8 +2694,8 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
|
||||
|
||||
// 遍历表头
|
||||
table.eachCols = function(id, callback, cols){
|
||||
var config = thisTable.config[id] || {}
|
||||
,arrs = [], index = 0;
|
||||
var config = thisTable.config[id] || {};
|
||||
var arrs = [], index = 0;
|
||||
|
||||
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){
|
||||
if(layui.type(item) === 'array'){
|
||||
if(layui.type(item) === 'array' || item[table.config.disabledName]){
|
||||
invalidNum++; // 无效数据,或已删除的
|
||||
return;
|
||||
}
|
||||
@ -2713,12 +2755,12 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
|
||||
|
||||
// 获取表格当前页的所有行数据
|
||||
table.getData = function(id){
|
||||
var arr = []
|
||||
,data = table.cache[id] || [];
|
||||
var arr = [];
|
||||
var data = table.cache[id] || [];
|
||||
layui.each(data, function(i, item){
|
||||
if(layui.type(item) === 'array'){
|
||||
return;
|
||||
};
|
||||
}
|
||||
arr.push(table.clearCacheKey(item));
|
||||
});
|
||||
return arr;
|
||||
@ -2753,8 +2795,8 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
|
||||
var thatTable = thisTable.that[id];
|
||||
var config = thisTable.config[id] || {};
|
||||
var textType = ({
|
||||
csv: 'text/csv'
|
||||
,xls: 'application/vnd.ms-excel'
|
||||
csv: 'text/csv',
|
||||
xls: 'application/vnd.ms-excel'
|
||||
})[type];
|
||||
var alink = document.createElement("a");
|
||||
|
||||
@ -2792,11 +2834,11 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
|
||||
|
||||
// 解析内容
|
||||
content = parseTempData.call(thatTable, {
|
||||
item3: item3
|
||||
,content: content
|
||||
,tplData: item1
|
||||
,text: 'text'
|
||||
,obj: {
|
||||
item3: item3,
|
||||
content: content,
|
||||
tplData: item1,
|
||||
text: 'text',
|
||||
obj: {
|
||||
td: function(field){
|
||||
var td = thatTable.layBody.find('tr[data-index="'+ i1 +'"]>td');
|
||||
return td.filter('[data-field="'+ field +'"]');
|
||||
|
@ -346,16 +346,14 @@ layui.define(['table'], function (exports) {
|
||||
var tableId = options.id;
|
||||
var customName = treeOptions.customName;
|
||||
|
||||
var treeNode = {
|
||||
// 带上一些常用的方法
|
||||
return {
|
||||
data: data,
|
||||
dataIndex: data[LAY_DATA_INDEX],
|
||||
getParentNode: function () {
|
||||
return that.getNodeByIndex(data[LAY_PARENT_INDEX])
|
||||
},
|
||||
}
|
||||
// 带上一些常用的方法
|
||||
|
||||
return treeNode;
|
||||
};
|
||||
}
|
||||
|
||||
// 通过 index 返回节点信息
|
||||
@ -577,6 +575,7 @@ layui.define(['table'], function (exports) {
|
||||
if (trExpand) {
|
||||
// 展开
|
||||
if (trExpanded) { // 已经展开过
|
||||
if (!childNodes.length) return ;//异步如果子节点没有数据情况下双点行展开所有已展开的节点问题解决
|
||||
trsElem.nextAll(childNodes.map(function (value, index, array) {
|
||||
return 'tr[lay-data-index="' + value[LAY_DATA_INDEX] + '"]'
|
||||
}).join(',')).removeClass(HIDE);
|
||||
@ -603,7 +602,11 @@ layui.define(['table'], function (exports) {
|
||||
options: options,
|
||||
}, true);
|
||||
}
|
||||
})
|
||||
});
|
||||
treeTableThat.updateStatus(childNodes, function (d) {
|
||||
d['LAY_HIDE'] = false;
|
||||
});
|
||||
options.hasNumberCol && formatNumber(tableId);
|
||||
} else {
|
||||
var asyncSetting = treeOptions.async || {};
|
||||
var asyncUrl = asyncSetting.url || options.url;
|
||||
@ -761,6 +764,11 @@ layui.define(['table'], function (exports) {
|
||||
tableViewElem.find(childNodesFlat.map(function (value, index, array) {
|
||||
return 'tr[lay-data-index="' + value[LAY_DATA_INDEX] + '"]'
|
||||
}).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 {
|
||||
debounceFn('renderTreeTable-' + tableId, function () {
|
||||
options.hasNumberCol && formatNumber(that);
|
||||
options.hasNumberCol && formatNumber(tableId);
|
||||
form.render($('.layui-table-tree[lay-id="' + tableId + '"]'));
|
||||
}, 0)();
|
||||
}
|
||||
}
|
||||
|
||||
var formatNumber = function (that) {
|
||||
var formatNumber = function (id) {
|
||||
var that = getThisTable(id);
|
||||
var options = that.getOptions();
|
||||
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 trFixedR = tableViewElem.find('.layui-table-fixed-r tbody tr');
|
||||
layui.each(that.treeToFlat(table.cache[options.id]), function (i1, item1) {
|
||||
if (item1['LAY_HIDE']) return;
|
||||
var itemData = that.getNodeDataByIndex(item1[LAY_DATA_INDEX]);
|
||||
itemData['LAY_NUM'] = ++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) {
|
||||
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);
|
||||
@ -1572,7 +1582,11 @@ layui.define(['table'], function (exports) {
|
||||
// 更新全选的状态
|
||||
var isAll = true;
|
||||
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]) {
|
||||
isIndeterminate = true;
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user