Merge pull request #1128 from sunxiaobin89/main
修复 table 和 laydate 的一些问题以及新增一些功能
This commit is contained in:
贤心
GitHub
commit
d29f9326c5
@ -55,7 +55,7 @@ html #layuicss-laydate{display: none; position: absolute; width: 1989px;}
|
||||
.layui-laydate-content{position: relative; padding: 10px; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none;}
|
||||
.layui-laydate-content table{border-collapse: collapse; border-spacing: 0;}
|
||||
.layui-laydate-content th,
|
||||
.layui-laydate-content td{width: 36px; height: 30px; padding: 5px; text-align: center;}
|
||||
.layui-laydate-content td{width: 36px; height: 30px; padding: 0; text-align: center;}
|
||||
.layui-laydate-content th{font-weight: 400;}
|
||||
.layui-laydate-content td{position: relative; cursor: pointer;}
|
||||
.laydate-day-mark{position: absolute; left: 0; top: 0; width: 100%; line-height: 30px; font-size: 12px; overflow: hidden;}
|
||||
@ -107,7 +107,7 @@ html #layuicss-laydate{display: none; position: absolute; width: 1989px;}
|
||||
.layui-laydate-content td{color: #666;}
|
||||
.layui-laydate-content td.laydate-selected{background-color: #B5FFF8;}
|
||||
.laydate-selected:hover{background-color: #00F7DE !important;}
|
||||
.layui-laydate-content td:hover,
|
||||
.layui-laydate-content td>div:hover,
|
||||
.layui-laydate-list li:hover{background-color: #eee; color: #333;}
|
||||
.laydate-time-list li ol{margin: 0; padding: 0; border: 1px solid #e2e2e2; border-left-width: 0;}
|
||||
.laydate-time-list li:first-child ol{border-left-width: 1px;}
|
||||
@ -124,6 +124,7 @@ html #layuicss-laydate{display: none; position: absolute; width: 1989px;}
|
||||
.layui-laydate .layui-this{background-color: #009688 !important; color: #fff !important;}
|
||||
.layui-laydate .laydate-disabled,
|
||||
.layui-laydate .laydate-disabled:hover{background:none !important; color: #d2d2d2 !important; cursor: not-allowed !important; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none;}
|
||||
.layui-laydate-content td>div{padding: 7px 0;height: 100%;}
|
||||
|
||||
/* 墨绿/自定义背景色主题 */
|
||||
.laydate-theme-molv{border: none;}
|
||||
@ -153,4 +154,19 @@ html #layuicss-laydate{display: none; position: absolute; width: 1989px;}
|
||||
.laydate-theme-grid .laydate-month-list>li{margin: 0 -1px -1px 0;}
|
||||
.laydate-theme-grid .laydate-year-list>li{height: 43px; line-height: 43px;}
|
||||
.laydate-theme-grid .laydate-month-list>li{height: 71px; line-height: 71px;}
|
||||
.laydate-theme-grid .layui-laydate-content td>div{height: 29px;margin-top: -1px;}
|
||||
|
||||
/* 圆圈高亮主题 */
|
||||
.laydate-theme-circle .layui-laydate-content td>div,
|
||||
.laydate-theme-circle .layui-laydate-content td.layui-this>div{width: 28px;height: 28px;line-height: 28px;border-radius: 14px;margin: 0 4px;padding: 0;}
|
||||
.layui-laydate.laydate-theme-circle .layui-laydate-content table td.layui-this{background-color: transparent !important;}
|
||||
.laydate-theme-grid.laydate-theme-circle .layui-laydate-content td>div{margin: 0 3.5px;}
|
||||
|
||||
/* 全面板 */
|
||||
.laydate-theme-fullpanel .layui-laydate-main {width: 526px;}
|
||||
.laydate-theme-fullpanel .layui-laydate-list {width: 252px;left: 272px;}
|
||||
.laydate-theme-fullpanel .laydate-set-ym span {display: none;}
|
||||
.laydate-theme-fullpanel .laydate-time-show .layui-laydate-header .layui-icon,
|
||||
.laydate-theme-fullpanel .laydate-time-show .laydate-set-ym span[lay-type="year"],
|
||||
.laydate-theme-fullpanel .laydate-time-show .laydate-set-ym span[lay-type="month"] {display: inline-block !important;}
|
||||
.laydate-theme-fullpanel .laydate-btns-time{display: none;}
|
||||
@ -194,6 +194,18 @@ layui.define('jquery', function(exports){
|
||||
that.slide(type);
|
||||
});
|
||||
};
|
||||
|
||||
// 跳转到特定下标
|
||||
Class.prototype.jump = function(index){
|
||||
var that = this;
|
||||
var options = that.config;
|
||||
|
||||
if(index > options.index){
|
||||
that.slide('add', index - options.index);
|
||||
} else if(index < options.index){
|
||||
that.slide('sub', options.index - index);
|
||||
}
|
||||
}
|
||||
|
||||
//指示器
|
||||
Class.prototype.indicator = function(){
|
||||
@ -226,13 +238,7 @@ layui.define('jquery', function(exports){
|
||||
|
||||
//事件
|
||||
tplInd.find('li').on(options.trigger === 'hover' ? 'mouseover' : options.trigger, function(){
|
||||
var othis = $(this)
|
||||
,index = othis.index();
|
||||
if(index > options.index){
|
||||
that.slide('add', index - options.index);
|
||||
} else if(index < options.index){
|
||||
that.slide('sub', options.index - index);
|
||||
}
|
||||
that.jump($(this).index());
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
@ -61,8 +61,8 @@
|
||||
,id = options.id;
|
||||
|
||||
thisModule.that[id] = that; //记录当前实例对象
|
||||
|
||||
return {
|
||||
|
||||
return that.inst = {
|
||||
//提示框
|
||||
hint: function(content){
|
||||
that.hint.call(that, content);
|
||||
@ -85,8 +85,8 @@
|
||||
// 若 elem 非唯一，则拆分为多个实例
|
||||
var elem = lay(options.elem || that.config.elem);
|
||||
if(elem.length > 1){
|
||||
layui.each(elem, function(){
|
||||
laydate.render(lay.extend({}, that.config, {
|
||||
lay.each(elem, function(){
|
||||
laydate.render(lay.extend({}, that.config, lay.options(this),{
|
||||
elem: this
|
||||
}));
|
||||
});
|
||||
@ -207,7 +207,18 @@
|
||||
options.eventElem = lay(options.eventElem);
|
||||
|
||||
if(!options.elem[0]) return;
|
||||
|
||||
var thatTemp = thisModule.that[options.elem.attr('lay-key')]
|
||||
thatTemp && thatTemp.destroy && thatTemp.destroy(); // 销毁上一个实例以便重新渲染
|
||||
|
||||
layui.type(options.theme) !== 'array' && (options.theme = [options.theme]);
|
||||
// 设置了全面版模式
|
||||
if (options.fullPanel) {
|
||||
if (options.type !== 'datetime' || options.range) {
|
||||
// 目前只支持datetime的全面版
|
||||
delete options.fullPanel;
|
||||
}
|
||||
}
|
||||
|
||||
//日期范围分隔符
|
||||
that.rangeStr = options.range ? (
|
||||
typeof options.range === 'string' ? options.range : '-'
|
||||
@ -279,11 +290,9 @@
|
||||
}
|
||||
|
||||
//设置唯一KEY
|
||||
if(!options.elem.attr('lay-key')){
|
||||
options.elem.attr('lay-key', that.index);
|
||||
options.eventElem.attr('lay-key', that.index);
|
||||
}
|
||||
|
||||
options.elem.attr('lay-key', that.index);
|
||||
options.eventElem.attr('lay-key', that.index);
|
||||
|
||||
//记录重要日期
|
||||
options.mark = lay.extend({}, (options.calendar && options.lang === 'cn') ? {
|
||||
'0-1-1': '元旦'
|
||||
@ -364,7 +373,17 @@
|
||||
'layui-laydate'
|
||||
,options.range ? ' layui-laydate-range' : ''
|
||||
,isStatic ? (' '+ ELEM_STATIC) : ''
|
||||
,options.theme && options.theme !== 'default' && !/^#/.test(options.theme) ? (' laydate-theme-' + options.theme) : ''
|
||||
,options.fullPanel ? ' laydate-theme-fullpanel' : '' // 全面版
|
||||
// ,options.theme && options.theme !== 'default' && !/^#/.test(options.theme) ? (' laydate-theme-' + options.theme) : ''
|
||||
,(function () {
|
||||
var themeStr = '';
|
||||
lay.each(options.theme, function (index, theme) {
|
||||
if (theme !== 'default' && !/^#/.test(theme)) {
|
||||
themeStr += ' laydate-theme-' + theme;
|
||||
}
|
||||
})
|
||||
return themeStr;
|
||||
})()
|
||||
].join('')
|
||||
})
|
||||
|
||||
@ -472,7 +491,7 @@
|
||||
if(options.type === 'datetime'){
|
||||
html.push('<span lay-type="datetime" class="'+ ELEM_TIME_BTN +'">'+ lang.timeTips +'</span>');
|
||||
}
|
||||
if(!(!options.range && options.type === 'datetime')){
|
||||
if(!(!options.range && options.type === 'datetime') || options.fullPanel){
|
||||
html.push('<span class="'+ ELEM_PREVIEW +'" title="'+ lang.preview +'"></span>')
|
||||
}
|
||||
|
||||
@ -493,13 +512,20 @@
|
||||
options.showBottom && elem.appendChild(divFooter);
|
||||
|
||||
//生成自定义主题
|
||||
if(/^#/.test(options.theme)){
|
||||
var style = lay.elem('style')
|
||||
,styleText = [
|
||||
'#{{id}} .layui-laydate-header{background-color:{{theme}};}'
|
||||
,'#{{id}} .layui-this{background-color:{{theme}} !important;}'
|
||||
].join('').replace(/{{id}}/g, that.elemID).replace(/{{theme}}/g, options.theme);
|
||||
|
||||
var style;
|
||||
var styleText = [];
|
||||
lay.each(options.theme, function (index, theme) {
|
||||
if(/^#/.test(theme)){
|
||||
style = style || lay.elem('style');
|
||||
styleText.push([
|
||||
'#{{id}} .layui-laydate-header{background-color:{{theme}};}'
|
||||
,'#{{id}} li.layui-this,#{{id}} td.layui-this>div{background-color:{{theme}} !important;}'
|
||||
,options.theme.indexOf('circle') !== -1 ? '' : '#{{id}} .layui-this{background-color:{{theme}} !important;}'
|
||||
].join('').replace(/{{id}}/g, that.elemID).replace(/{{theme}}/g, theme));
|
||||
}
|
||||
});
|
||||
if (style) {
|
||||
styleText = styleText.join('');
|
||||
if('styleSheet' in style){
|
||||
style.setAttribute('type', 'text/css');
|
||||
style.styleSheet.cssText = styleText;
|
||||
@ -528,6 +554,7 @@
|
||||
|
||||
Class.thisElemDate = that.elemID;
|
||||
|
||||
that.renderAdditional()
|
||||
typeof options.ready === 'function' && options.ready(lay.extend({}, options.dateTime, {
|
||||
month: options.dateTime.month + 1
|
||||
}));
|
||||
@ -828,7 +855,7 @@
|
||||
mark = title || YMD[2];
|
||||
}
|
||||
});
|
||||
mark && td.html('<span class="laydate-day-mark">'+ mark +'</span>');
|
||||
mark && td.find('div').html('<span class="laydate-day-mark">'+ mark +'</span>');
|
||||
|
||||
return that;
|
||||
};
|
||||
@ -844,7 +871,7 @@
|
||||
lay.each(options.holidays, function(idx, item) {
|
||||
lay.each(item, function(i, dayStr) {
|
||||
if(dayStr === td.attr('lay-ymd')){
|
||||
td.html('<span class="laydate-day-holidays"' + (
|
||||
td.find('div').html('<span class="laydate-day-holidays"' + (
|
||||
type[idx] ? ('type="'+ type[idx] +'"') : ''
|
||||
) + '>' + YMD[2] + '</span>');
|
||||
}
|
||||
@ -855,7 +882,7 @@
|
||||
};
|
||||
|
||||
//无效日期范围的标记
|
||||
Class.prototype.limit = function(elem, date, index, time){
|
||||
Class.prototype.limit = function(elem, date, index, time, type){
|
||||
var that = this
|
||||
,options = that.config, timestrap = {}
|
||||
,dateTime = index > (time ? 0 : 41) ? that.endDate : options.dateTime
|
||||
@ -868,8 +895,8 @@
|
||||
}, function(key, item){
|
||||
timestrap[key] = that.newDate(lay.extend({
|
||||
year: item.year
|
||||
,month: item.month
|
||||
,date: item.date
|
||||
,month: type === 'year' ? 0 : item.month // 年份的时候只比较年
|
||||
,date: (type === 'year' || type === 'month') ? 1 : item.date // 年月只比较年月不与最大最小比日期
|
||||
}, function(){
|
||||
var hms = {};
|
||||
lay.each(time, function(i, keys){
|
||||
@ -938,7 +965,7 @@
|
||||
}
|
||||
YMD[1]++;
|
||||
YMD[2] = st + 1;
|
||||
item.attr('lay-ymd', YMD.join('-')).html(YMD[2]);
|
||||
item.attr('lay-ymd', YMD.join('-')).html('<div>' + YMD[2] + '</div>');
|
||||
that.mark(item, YMD).holidays(item, YMD).limit(item, {
|
||||
year: YMD[0]
|
||||
,month: YMD[1] - 1
|
||||
@ -1053,7 +1080,7 @@
|
||||
}
|
||||
*/
|
||||
|
||||
that.limit(lay(li), ymd, index);
|
||||
that.limit(lay(li), ymd, index, null, type);
|
||||
yearNum++;
|
||||
});
|
||||
|
||||
@ -1085,7 +1112,7 @@
|
||||
}
|
||||
*/
|
||||
|
||||
that.limit(lay(li), ymd, index);
|
||||
that.limit(lay(li), ymd, index, null, type);
|
||||
});
|
||||
|
||||
lay(elemYM[isCN ? 0 : 1]).attr('lay-ym', listYM[0] + '-' + listYM[1])
|
||||
@ -1376,7 +1403,18 @@
|
||||
});
|
||||
}, 300);
|
||||
};
|
||||
|
||||
|
||||
// 附加的渲染处理，在ready和change的时候调用
|
||||
Class.prototype.renderAdditional = function(){
|
||||
var that = this;
|
||||
var options = that.config;
|
||||
|
||||
// 处理全面板
|
||||
if (options.fullPanel) {
|
||||
that.list('time', 0);
|
||||
}
|
||||
};
|
||||
|
||||
//执行 done/change 回调
|
||||
Class.prototype.done = function(param, type){
|
||||
var that = this
|
||||
@ -1394,6 +1432,7 @@
|
||||
that.preview();
|
||||
|
||||
param = param || [that.parse(), start, end];
|
||||
type === 'change' && that.renderAdditional();
|
||||
typeof options[type || 'done'] === 'function' && options[type || 'done'].apply(options, param);
|
||||
|
||||
return that;
|
||||
@ -1670,24 +1709,31 @@
|
||||
//绑定的元素事件处理
|
||||
Class.prototype.events = function(){
|
||||
var that = this
|
||||
,options = that.config
|
||||
var options = that.config
|
||||
|
||||
//绑定呼出控件事件
|
||||
,showEvent = function(elem, bind){
|
||||
elem.on(options.trigger, function(){
|
||||
//已经打开的面板避免重新渲染
|
||||
if(laydate.thisId === options.id) return;
|
||||
bind && (that.bindElem = this);
|
||||
that.render();
|
||||
});
|
||||
};
|
||||
|
||||
if(!options.elem[0] || options.elem[0].eventHandler) return;
|
||||
|
||||
showEvent(options.elem, 'bind');
|
||||
showEvent(options.eventElem);
|
||||
|
||||
|
||||
var showEvent = function(){
|
||||
// 已经打开的面板避免重新渲染
|
||||
if(laydate.thisId === options.id) return;
|
||||
that.bindElem = this;
|
||||
that.render();
|
||||
}
|
||||
//绑定呼出控件事件
|
||||
options.elem.on(options.trigger, showEvent);
|
||||
options.elem[0].eventHandler = true;
|
||||
options.eventElem.on(options.trigger, showEvent);
|
||||
|
||||
that.destroy = function () {
|
||||
that.remove();
|
||||
options.elem.off(options.trigger, showEvent);
|
||||
options.elem.removeAttr('lay-key');
|
||||
options.elem[0].eventHandler = false;
|
||||
options.eventElem.off(options.trigger, showEvent);
|
||||
options.eventElem.removeAttr('lay-key');
|
||||
|
||||
delete thisModule.that[options.id];
|
||||
}
|
||||
};
|
||||
|
||||
//记录所有实例
|
||||
@ -1752,7 +1798,15 @@
|
||||
var inst = new Class(options);
|
||||
return thisModule.call(inst);
|
||||
};
|
||||
|
||||
|
||||
// 获取
|
||||
laydate.getInst = function (key) {
|
||||
var that = thisModule.getThis(key);
|
||||
if (that) {
|
||||
return that.inst;
|
||||
}
|
||||
}
|
||||
|
||||
//将指定对象转化为日期值
|
||||
laydate.parse = function(dateTime, format, one){
|
||||
dateTime = dateTime || {};
|
||||
@ -1802,7 +1856,14 @@
|
||||
if(!that) return;
|
||||
return that.remove();
|
||||
};
|
||||
|
||||
|
||||
// 销毁实例
|
||||
laydate.destroy = function(id){
|
||||
var that = thisModule.getThis(id || laydate.thisId);
|
||||
if(!that) return;
|
||||
return that.destroy();
|
||||
};
|
||||
|
||||
//加载方式
|
||||
isLayui ? (
|
||||
laydate.ready()
|
||||
|
||||
@ -370,7 +370,7 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
|
||||
// 初始化索引
|
||||
options.index = that.index;
|
||||
that.key = options.id || options.index;
|
||||
|
||||
|
||||
//初始化一些其他参数
|
||||
that.setInit();
|
||||
|
||||
@ -403,7 +403,7 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
|
||||
data: options
|
||||
,index: that.index //索引
|
||||
}));
|
||||
|
||||
|
||||
//生成替代元素
|
||||
hasRender[0] && hasRender.remove(); //如果已经渲染，则Rerender
|
||||
othis.after(reElem);
|
||||
@ -665,7 +665,7 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
|
||||
|
||||
// 获取表头组合
|
||||
var groups = that.layHeader.find((
|
||||
// 根据当前活动的表头 parentkey 属性查找其组合表头
|
||||
// 根据当前活动的表头 parentkey 属性查找其组合表头
|
||||
th ? ('th[data-key='+ th.data('parentkey') +']>') : ''
|
||||
) + '.' + ELEM_GROUP).get().reverse(); // 若无指向当前活动表头，则自下而上获取所有组合表头
|
||||
|
||||
@ -787,7 +787,10 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
|
||||
// 给设定百分比的列分配列宽
|
||||
else if(/\d+%$/.test(item3.width)){
|
||||
that.getCssRule(item3.key, function(item){
|
||||
item.style.width = Math.floor((parseFloat(item3.width) / 100) * cntrWidth) + 'px';
|
||||
var width = Math.floor((parseFloat(item3.width) / 100) * cntrWidth);
|
||||
width < minWidth && (width = minWidth);
|
||||
width > maxWidth && (width = maxWidth);
|
||||
item.style.width = width + 'px';
|
||||
});
|
||||
}
|
||||
|
||||
@ -1321,7 +1324,7 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
|
||||
}() +'">'
|
||||
,'<div class="layui-table-cell laytable-cell-'+ function(){ // 返回对应的CSS类标识
|
||||
var key = item3.key;
|
||||
return item3.type === 'normal' ? key
|
||||
return item3.type === 'normal' ? key
|
||||
: (key + ' laytable-cell-' + item3.type);
|
||||
}() +'"'+ function(){
|
||||
var attr = [];
|
||||
@ -1695,12 +1698,12 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
|
||||
that.elem.find('*[data-key="'+ key +'"]')[
|
||||
checked ? 'removeClass' : 'addClass'
|
||||
](HIDE);
|
||||
|
||||
|
||||
// 根据列的显示隐藏，同步多级表头的父级相关属性值
|
||||
if(hide != col.hide){
|
||||
that.setParentCol(!checked, parentKey);
|
||||
}
|
||||
|
||||
|
||||
// 重新适配尺寸
|
||||
that.resize();
|
||||
|
||||
@ -2049,7 +2052,7 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
|
||||
};
|
||||
|
||||
// 渲染单元格编辑状态
|
||||
var renderGridEdit = function(othis, e){
|
||||
var renderGridEdit = function(othis, e){
|
||||
othis = $(othis);
|
||||
|
||||
if(othis.data('off')) return; // 不触发事件
|
||||
@ -2111,18 +2114,18 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// 更新缓存中的值
|
||||
var obj = {}; //变更的键值
|
||||
obj[field] = value;
|
||||
params.update(obj);
|
||||
|
||||
|
||||
// 执行 API 编辑事件
|
||||
layui.event.call(td[0], MOD_NAME, 'edit('+ filter +')', params);
|
||||
}).on('blur', '.'+ ELEM_EDIT, function(){ // 单元格编辑 - 恢复非编辑状态事件
|
||||
$(this).remove(); // 移除编辑状态
|
||||
});
|
||||
|
||||
|
||||
// 单元格触发编辑的事件
|
||||
that.layBody.on(options.editTrigger, 'td', function(e){
|
||||
renderGridEdit(this, e)
|
||||
@ -2249,8 +2252,8 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
|
||||
settings = settings || {};
|
||||
var that = this;
|
||||
var inst = null;
|
||||
var elemTable = filter
|
||||
? $('table[lay-filter="'+ filter +'"]')
|
||||
var elemTable = filter
|
||||
? $('table[lay-filter="'+ filter +'"]')
|
||||
: $(ELEM + '[lay-data],'+ ELEM + '[lay-options]');
|
||||
var errorTips = 'Table element property lay-data configuration item has a syntax error: ';
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user