From 9a32923c0a236c54efe488ce0a7a68745925b4d4 Mon Sep 17 00:00:00 2001 From: Diyar-IT <136627746+Diyar-IT@users.noreply.github.com> Date: Mon, 21 Aug 2023 15:33:41 +0800 Subject: [PATCH 01/22] =?UTF-8?q?=E8=A7=A3=E5=86=B3=E5=BC=82=E6=AD=A5?= =?UTF-8?q?=E6=95=B0=E6=8D=AE=E6=B2=A1=E6=9C=89=E5=AD=90=E8=8A=82=E7=82=B9?= =?UTF-8?q?=E6=95=B0=E6=8D=AE=E5=8F=8C=E7=82=B9=E8=A1=8C=E5=B1=95=E5=BC=80?= =?UTF-8?q?=E5=B7=B2=E5=B1=95=E5=BC=80=E7=9A=84=E6=89=80=E6=9C=89=E8=8A=82?= =?UTF-8?q?=E7=82=B9=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 解决异步数据没有子节点数据双点行展开已展开的所有节点问题 --- src/modules/treeTable.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/modules/treeTable.js b/src/modules/treeTable.js index a599b553..65ea4531 100644 --- a/src/modules/treeTable.js +++ b/src/modules/treeTable.js @@ -576,6 +576,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); From c65aabe2b148e54b7dae514eeda6520f83ca0fda Mon Sep 17 00:00:00 2001 From: Diyar-IT <136627746+Diyar-IT@users.noreply.github.com> Date: Mon, 21 Aug 2023 17:32:27 +0800 Subject: [PATCH 02/22] =?UTF-8?q?=E4=BC=98=E5=8C=96=E4=BB=A3=E7=A0=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/modules/table.js | 179 ++++++++++++++++++++++--------------------- 1 file changed, 91 insertions(+), 88 deletions(-) diff --git a/src/modules/table.js b/src/modules/table.js index 3f33599f..4013f808 100644 --- a/src/modules/table.js +++ b/src/modules/table.js @@ -329,18 +329,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 对象 @@ -386,11 +386,11 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){ } //开始插入替代元素 - var othis = options.elem - ,hasRender = othis.next('.' + ELEM_VIEW) + var othis = options.elem; + var hasRender = othis.next('.' + ELEM_VIEW); //主容器 - ,reElem = that.elem = $('
'); + var reElem = that.elem = $('
'); reElem.addClass(function(){ var arr = [ @@ -402,9 +402,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,8 +414,8 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){ open: '{{', // 标签符前缀 close: '}}' // 标签符后缀 }).render({ - data: options - ,index: that.index //索引 + data: options, + index: that.index //索引 })); //生成替代元素 @@ -450,12 +450,12 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){ //根据列类型，定制化参数 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 参数兼容旧版本 @@ -471,8 +471,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（一般为隐藏元素），则继续查找上层元素，直到找到真实宽度为止 @@ -926,6 +926,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 +952,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 +1022,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 +1075,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 +1162,7 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){ return arr.join(' '); }() +' lay-type="layTableCheckbox">'; - break; + //break; case 'radio': // 单选 return ''; - break; + //break; case 'numbers': return numbers; - break; + //break; }; //解析工具列模板 @@ -1309,15 +1312,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: '' - ,next: '' - ,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: '', + next: '', + jump: function(obj, first){ if(!first){ //分页本身并非需要做以下更新，下面参数的同步，主要是因为其它处理统一用到了它们 //而并非用的是 options.page 中的参数（以确保分页未开启的情况仍能正常使用） @@ -1394,9 +1397,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 +1424,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(' '); - }() +'">' - ,'
', + '
' - ,'' - ,'
'].join('')); + that.layInit = $(['
', + '', + '
'].join('')); that.layBox.append(that.layInit); } } @@ -1674,10 +1677,10 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){ //让表格铺满 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; @@ -1898,8 +1901,8 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){ '
  • 导出 csv 格式文件
    • ', '
  • 导出 xls 格式文件
    • ' ].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); @@ -1944,8 +1947,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 +1973,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; } @@ -2095,9 +2098,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({ @@ -2652,8 +2655,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); @@ -2713,12 +2716,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 +2756,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 +2795,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 +'"]'); From da00d1ad85fdc302e9d7ec188b0f458e8232ba7e Mon Sep 17 00:00:00 2001 From: Diyar-IT <136627746+Diyar-IT@users.noreply.github.com> Date: Mon, 21 Aug 2023 18:35:19 +0800 Subject: [PATCH 03/22] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E5=A4=8D=E9=80=89?= =?UTF-8?q?=E6=A1=86=E7=8A=B6=E6=80=81=E9=83=BD=E4=B8=BA=E2=80=9C=E7=A6=81?= =?UTF-8?q?=E7=94=A8=20=E2=80=9D=E6=97=B6=EF=BC=8C=E8=A1=A8=E5=A4=B4?= =?UTF-8?q?=E7=9A=84=E5=A4=8D=E9=80=89=E6=A1=86=E4=BB=8D=E5=8F=AF=E4=BB=A5?= =?UTF-8?q?=E7=82=B9=E5=87=BB=E6=93=8D=E4=BD=9C=E3=80=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/modules/table.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/modules/table.js b/src/modules/table.js index 3f33599f..6ad22135 100644 --- a/src/modules/table.js +++ b/src/modules/table.js @@ -1530,7 +1530,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 +1547,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'))); @@ -2687,7 +2687,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; } From d5ff46052ea5ab091c7ce4cde22bbb6ea6b989be Mon Sep 17 00:00:00 2001 From: Diyar-IT <136627746+Diyar-IT@users.noreply.github.com> Date: Mon, 21 Aug 2023 19:23:45 +0800 Subject: [PATCH 04/22] =?UTF-8?q?=E4=BC=98=E5=8C=96=E4=BB=A3=E7=A0=81?= =?UTF-8?q?=EF=BC=8C=E4=BF=AE=E5=A4=8D=E8=8A=82=E7=82=B9=E7=A6=81=E6=AD=A2?= =?UTF-8?q?=E7=8A=B6=E6=80=81=E6=97=B6=E5=8D=8A=E9=80=89=E5=85=A8=E9=80=89?= =?UTF-8?q?=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/modules/treeTable.js | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/src/modules/treeTable.js b/src/modules/treeTable.js index a599b553..66d98736 100644 --- a/src/modules/treeTable.js +++ b/src/modules/treeTable.js @@ -345,16 +345,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 返回节点信息 @@ -1568,7 +1566,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; } From 0154c99fd8b29476b8ca9aad6184f86082f701b5 Mon Sep 17 00:00:00 2001 From: Diyar-IT <136627746+Diyar-IT@users.noreply.github.com> Date: Tue, 22 Aug 2023 15:22:03 +0800 Subject: [PATCH 05/22] =?UTF-8?q?=E4=BF=AE=E5=A4=8DtreeTable=E8=AE=BE?= =?UTF-8?q?=E7=BD=AEcols=E7=9A=84type:=20'numbers'=E6=8A=98=E5=8F=A0?= =?UTF-8?q?=E6=97=B6=E4=B8=8D=E6=9B=B4=E6=96=B0=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 修复treeTable设置cols的type: 'numbers'折叠时不更新问题 --- src/modules/treeTable.js | 19 +++++++++++++++---- 1 file changed, 15 insertions(+), 4 deletions(-) diff --git a/src/modules/treeTable.js b/src/modules/treeTable.js index a599b553..38b123a2 100644 --- a/src/modules/treeTable.js +++ b/src/modules/treeTable.js @@ -602,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; @@ -760,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); } } @@ -1029,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(); @@ -1044,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); @@ -1242,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); From 528e8e8c7740ad182b6756e52d280ab8721e413c Mon Sep 17 00:00:00 2001 From: Diyar-IT <136627746+Diyar-IT@users.noreply.github.com> Date: Tue, 22 Aug 2023 16:11:49 +0800 Subject: [PATCH 06/22] =?UTF-8?q?table.js=E5=A2=9E=E5=8A=A0=E4=BA=86?= =?UTF-8?q?=E5=B0=8F=E6=8F=90=E7=A4=BA^=5F^?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/modules/table.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/modules/table.js b/src/modules/table.js index 09cbf755..50525a40 100644 --- a/src/modules/table.js +++ b/src/modules/table.js @@ -1845,6 +1845,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 = []; @@ -1890,6 +1891,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 @@ -1912,6 +1914,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 = [' + + + layer 弹层 - layui + + @@ -224,7 +219,9 @@ layui.use(['layer', 'util'], function(layer, util){ // 相册层 layer.photos({ - photos: '#photos' //$('#photos') + photos: '#photos', // $('#photos') + // toolbar: false, + // footer: false }); //动态追加 diff --git a/src/css/modules/layer.css b/src/css/modules/layer.css index 8b9dfb27..937ae235 100644 --- a/src/css/modules/layer.css +++ b/src/css/modules/layer.css @@ -238,29 +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;} -/*photo工具栏*/ -.layui-layer-images-toolbar{position: fixed;top: 0;left: 0;right: 0;height: 40px;background-color: #000\9;filter: Alpha(opacity=60);background-color: rgba(2,0,0,.35);display: flex;align-items: center;justify-content: center;color: white;} -.layui-layer-images-toolbar .layer-images-tool-item{position: relative;width: auto;height: 100%;display: flex;align-items: center;} -.layui-layer-images-toolbar .layer-images-tool-item span{padding: 8px 10px; transition: all .4s;cursor: pointer;} -.layui-layer-images-toolbar .layer-images-tool-item span:hover{background-color: rgba(64, 64, 64, 0.67);} -.layui-layer-images-toolbar .layer-images-tool-item span i{font-size: 22px;} -.layui-layer-photos .layui-layer-content.layui-layer-images-toolbar-mode{overflow: visible !important;} /* 关闭动画 */ @-webkit-keyframes layer-bounceOut { diff --git a/src/modules/layer.js b/src/modules/layer.js index 6c211917..fe2aab1f 100644 --- a/src/modules/layer.js +++ b/src/modules/layer.js @@ -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('没有图片'); } @@ -1499,103 +1503,88 @@ layer.photos = function(options, loop, key){ } dict.isNumber = function (n) { - return typeof n === 'number' && !isNaN(n); - } - - dict.getTransform = function(options){ - var transforms = []; - var rotate = options.rotate; - var scaleX = options.scaleX; - - if (dict.isNumber(rotate) && rotate !== 0) { - transforms.push('rotate(' + rotate + 'deg)'); - } - - if (dict.isNumber(scaleX) && scaleX !== 1) { - transforms.push('scaleX(' + scaleX + ')'); - } - - return transforms.length ? transforms.join(' ') : 'none'; - } + 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(layero, index){ - /* - 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); - var scalexFlag = true; - //工具栏事件 - 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': - if (scalexFlag){ - dict.image.scaleX = -1; - scalexFlag = false; - }else { - dict.image.scaleX = 1; - scalexFlag = true; - } - scalexFlag !== scalexFlag; - dict.imgElem.css({ - transform: dict.getTransform(dict.image) - }); - break; - case 'zoom': - var ratio = Number(othis.attr('data-option')); - if (ratio < 0) { - ratio = 1 / (1 - ratio); - } else { - ratio = 1 + ratio; - } - dict.image.width = dict.image.width * ratio; - dict.image.height = dict.image.height * ratio; - dict.imgElem.css({ - width: dict.image.width, - height: dict.image.height, - transform: dict.getTransform(dict.image) - }); - break; - case 'reset': - scalexFlag = true; - dict.image.scaleX = 1; - dict.image.rotate = 0; - dict.image.width = dict.image.oldWidth; - dict.image.height = dict.image.oldHeight; - dict.imgElem.css({ - width: dict.image.oldWidth, - height: dict.image.oldHeight, - transform: 'none' - }); - break; - case 'close': - layer.close(index); - break; - } - }); + // 头部工具栏事件 + 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); + }); }; @@ -1648,81 +1637,65 @@ layer.photos = function(options, loop, key){ imgarea[1] = imgarea[1]/wh[1]; } } - dict.image = { - oldWidth : imgarea[0], - oldHeight : imgarea[1], - width : imgarea[0], - height : imgarea[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: '
    ' - + ''+ alt +'' + content: '
    ' + + ''+ alt +'' + function(){ - var arr = ['
    ']; + var arr = ['
    ']; // 左右箭头翻页 - if(data.length > 1){ - arr.push(['
    ' - ,'' - ,'' - ,'
    '].join('')); + if (data.length > 1) { + arr.push(['
    ', + '', + '', + '
    '].join('')); + } + + // 头部工具栏 + if (options.toolbar) { + arr.push([ + '
    ', + '', + '', + '', + '', + '', + '', + '
    ' + ].join('')); } // 底部栏 - if(!options.hideFooter){ - arr.push(['
    ' - ,'
    ' - ,'

    '+ alt +'

    ' - ,''+ dict.imgIndex +' / '+ data.length +'' - ,'查看原图' - ,'
    ' - ,'
    '].join('')); - } - //工具栏 - if (options.toolbar){ - arr.push([ - '
    ', - '
    ', - '', - '', - '', - '', - '', - '', - '', - '
    ', - '
    ' - ].join('')); + if (options.footer) { + arr.push(['
    ', + '

    '+ alt +'

    ', + ''+ dict.imgIndex +' / '+ data.length +'', + '查看原图', + '
    '].join('')); } arr.push('
    '); return arr.join(''); }() +'
    ', - success: function(layero, index){ - dict.bigimg = layero.find('.layui-layer-phimg'); - dict.imgsee = layero.find('.layui-layer-imgbar'); - if (options.toolbar){ - layero.find('.layui-layer-content').addClass('layui-layer-images-toolbar-mode'); - dict.imgElem = dict.bigimg.find('img'); - dict.imgElem.css({ - width : dict.image.width, - height : dict.image.height - }); - } - dict.event(layero, index); + 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(){ From 03d53713eaa6800afd87a3cad7808b405c4737ac Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=B4=A4=E5=BF=83?= <3277200+sentsim@users.noreply.github.com> Date: Thu, 24 Aug 2023 10:17:09 +0800 Subject: [PATCH 16/22] =?UTF-8?q?=E6=9B=B4=E6=96=B0=20code=20=E6=B5=8B?= =?UTF-8?q?=E8=AF=95=E7=94=A8=E4=BE=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- examples/code.html | 2 ++ 1 file changed, 2 insertions(+) diff --git a/examples/code.html b/examples/code.html index b3b30490..d4e40e65 100644 --- a/examples/code.html +++ b/examples/code.html @@ -116,6 +116,8 @@ layui.use('code', function(){ // 通用实例，根据元素属性定制化参数 layui.code({ //about: 'code' // 右上角默认显示 code + tools: ['tips'], + preview: true }); // custom more about From 33fb2874a6d55bcf6781e077c9d1365fa490c05f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=B4=A4=E5=BF=83?= <3277200+sentsim@users.noreply.github.com> Date: Mon, 28 Aug 2023 11:01:54 +0800 Subject: [PATCH 17/22] =?UTF-8?q?=E4=BF=AE=E6=AD=A3=20`laydate.close()`=20?= =?UTF-8?q?=E6=96=87=E6=A1=A3=E4=B9=A6=E5=86=99=E9=94=99=E8=AF=AF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/laydate/index.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/laydate/index.md b/docs/laydate/index.md index 6768a17b..989c7723 100644 --- a/docs/laydate/index.md +++ b/docs/laydate/index.md @@ -34,7 +34,7 @@ toc: true | [laydate.render(options)](#render) | laydate 组件渲染，核心方法。 | | [laydate.hint(id, opts)](#hint) 2.8+ | 在对应的 laydate 组件面板上弹出提示层。 | | [laydate.getInst(id)](#getInst) 2.8+ | 获取组件对应的渲染实例。 | -| [laydate.unbind(id)](#close) 2.8+ | 对目标元素解除当前实例的绑定。 | +| [laydate.unbind(id)](#unbind) 2.8+ | 对目标元素解除当前实例的绑定。 | | [laydate.close(id)](#close) 2.7+ | 关闭日期面板。 | | [laydate.getEndDate(month, year)](#getEndDate) | 获取某月的最后一天。 | @@ -160,7 +160,7 @@ laydate.render({ // 其他属性 … }); // 关闭对应的日期面板 -laydate.cllose('test'); +laydate.close('test'); ```

    获取某月的最后一天

    From a4e2d69774e40816af01aa878f68391888213f8a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=B4=A4=E5=BF=83?= <3277200+sentsim@users.noreply.github.com> Date: Mon, 28 Aug 2023 11:02:18 +0800 Subject: [PATCH 18/22] =?UTF-8?q?=E6=9B=B4=E6=96=B0=20layer=20=E6=B5=8B?= =?UTF-8?q?=E8=AF=95=E7=94=A8=E4=BE=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- examples/layer.html | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/examples/layer.html b/examples/layer.html index e7ac981a..ab878860 100644 --- a/examples/layer.html +++ b/examples/layer.html @@ -25,10 +25,10 @@ - 更多例子 + 更多例子
    -