From 54eaae5d0389ae18abf209cfb625ca7e9a7e897f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=A4=9C=E7=AC=99=E6=AD=8C?= <2277317060@qq.com> Date: Fri, 15 Jul 2022 17:57:05 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=95=B0=E6=8D=AE=E8=AF=B7?= =?UTF-8?q?=E6=B1=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../main/resources/static/js/scrollTable.js | 448 +++++++++--------- 1 file changed, 225 insertions(+), 223 deletions(-) diff --git a/ruoyi-admin/src/main/resources/static/js/scrollTable.js b/ruoyi-admin/src/main/resources/static/js/scrollTable.js index c9ac7ae..ed1c777 100644 --- a/ruoyi-admin/src/main/resources/static/js/scrollTable.js +++ b/ruoyi-admin/src/main/resources/static/js/scrollTable.js @@ -1,6 +1,6 @@ /** * dynamicTable 动态表格 - * @param { Object } resource + * @param { Object } resource * @param { String } el : 指定元素 * @param { Array } header : 表头 * @param { Array } data : 数据行 @@ -15,47 +15,47 @@ * @param { Array } colWidth : 每列的宽度 */ let dynamicTable = resource => { - 'use strict'; + 'use strict'; - //检查参数类型 - if (typeof resource !== 'object') { - console.error('未传入参数,或者参数不是Object类型'); - return - } + //检查参数类型 + if (typeof resource !== 'object') { + console.error('未传入参数,或者参数不是Object类型'); + return + } - // 检查是否传入元素 - const ele = resource.el; - if (!ele) { - console.error('元素获取不正确！'); - return - } - /** - * 检查是否传入动画触发时长 - * 当时间小于 10 计算为秒级单位， - * 大于 10 计算为毫秒级单位 - */ - let timeout = resource.timeout; - if (!timeout) { - timeout = 2000 - } else if (timeout < 10) { - timeout = timeout * 1000 - } + // 检查是否传入元素 + const ele = resource.el; + if (!ele) { + console.error('元素获取不正确！'); + return + } + /** + * 检查是否传入动画触发时长 + * 当时间小于 10 计算为秒级单位， + * 大于 10 计算为毫秒级单位 + */ + let timeout = resource.timeout; + if (!timeout) { + timeout = 2000 + } else if (timeout < 10) { + timeout = timeout * 1000 + } - // 检查 配置元素是否传入数据 - const colName = resource.header === undefined ? '' : resource.header; - const rowData = resource.data === undefined ? '' : resource.data; - const rowNum = resource.rowNum === undefined ? '20%' : 100 / resource.rowNum + '%'; - const headerBGC = resource.headerBGC === undefined ? '#999' : resource.headerBGC; - const oddRowBGC = resource.oddRowBGC === undefined ? '#bbb' : resource.oddRowBGC; - const evenRowBGC = resource.evenRowBGC === undefined ? '#ddd' : resource.evenRowBGC; - const fontColor = resource.fontColor === undefined ? 'black' : resource.fontColor; - const indexBGC = resource.indexBGC === undefined ? '#555' : resource.indexBGC; - const colIndex = resource.index === undefined ? true : resource.index; - const colWidth = resource.colWidth === undefined ? false : resource.colWidth; - const indexColor = fontColor.search(/('black')|(0{3,6})/) ? "white" : fontColor; + // 检查 配置元素是否传入数据 + const colName = resource.header === undefined ? '' : resource.header; + const rowData = resource.data === undefined ? '' : resource.data; + const rowNum = resource.rowNum === undefined ? '20%' : 100 / resource.rowNum + '%'; + const headerBGC = resource.headerBGC === undefined ? '#999' : resource.headerBGC; + const oddRowBGC = resource.oddRowBGC === undefined ? '#bbb' : resource.oddRowBGC; + const evenRowBGC = resource.evenRowBGC === undefined ? '#ddd' : resource.evenRowBGC; + const fontColor = resource.fontColor === undefined ? 'black' : resource.fontColor; + const indexBGC = resource.indexBGC === undefined ? '#555' : resource.indexBGC; + const colIndex = resource.index === undefined ? true : resource.index; + const colWidth = resource.colWidth === undefined ? false : resource.colWidth; + const indexColor = fontColor.search(/('black')|(0{3,6})/) ? "white" : fontColor; - //基本table html - const html = ` + //基本table html + const html = `
@@ -63,203 +63,205 @@ let dynamicTable = resource => {
`; - //Css样式集 - const boxCSS = { - overflow: 'hidden', - background: headerBGC - }; - const tableCSS = { - color: fontColor, - width: '100%', - height: '100%' - }; - const theadCSS = { - width: '100%', - height: '20%' - }; - const thead_trCSS = { - display: "flex", - flexWrap: "nowrap", - width: "100%", - height: "100%", - background: headerBGC, - justifyContent: "space-around" - }; - const thCSS = { - justifyContent: "space-around", - fontWeight: "bold" - }; - const tbodyCSS = { - width: "100%", - height: '80%', - boxSizing: 'border-box' - }; - const tbody_trCSS = { - flexWrap: "nowrap", - width: "100%", - height: rowNum, - justifyContent: "space-around" - }; - const trOddCSS = { - display: "flex", - background: oddRowBGC - }; - const trEvenCSS = { - display: "flex", - background: evenRowBGC - }; - const th_tdCSS = { - color:'#59B2F6', - margin: 'auto 0', - whiteSpace: 'nowrap', - overflow: "hidden", - textOverflow: 'ellipsis', - textAlign: 'center', - padding: '0 4px 0 4px' - }; - const indexCSS = { - display: 'inline-block', - width: '90%', - height: "90%", - background: indexBGC, - color: indexColor, - borderRadius: '20%', - margin: 'auto' - }; - //插入table元素 - $(ele).append(html); + //Css样式集 + const boxCSS = { + overflow: 'hidden', + background: headerBGC + }; + const tableCSS = { + color: fontColor, + width: '100%', + height: '100%' + }; + const theadCSS = { + width: '100%', + height: '20%' + }; + const thead_trCSS = { + display: "flex", + flexWrap: "nowrap", + width: "100%", + height: "100%", + background: headerBGC, + justifyContent: "space-around" + }; + const thCSS = { + justifyContent: "space-around", + fontWeight: "bold" + }; + const tbodyCSS = { + width: "100%", + height: '80%', + boxSizing: 'border-box' + }; + const tbody_trCSS = { + flexWrap: "nowrap", + width: "100%", + height: rowNum, + justifyContent: "space-around" + }; + const trOddCSS = { + display: "flex", + background: oddRowBGC + }; + const trEvenCSS = { + display: "flex", + background: evenRowBGC + }; + const th_tdCSS = { + color: '#59B2F6', + margin: 'auto 0', + whiteSpace: 'nowrap', + overflow: "hidden", + textOverflow: 'ellipsis', + textAlign: 'center', + padding: '0 4px 0 4px' + }; + const indexCSS = { + display: 'inline-block', + width: '90%', + height: "90%", + background: indexBGC, + color: indexColor, + borderRadius: '20%', + margin: 'auto' + }; + //插入table元素 + $(ele).append(html); - //核心代码 - //遍历插入数据 表头 - if (colIndex) { - $(ele + '>.table>.thead>.tr').append('
#
') - } - colName.forEach(element => { - $(ele + '>.table>.thead>.tr').append(`
${element}
`) - }); + //核心代码 + //遍历插入数据 表头 + if (colIndex) { + $(ele + '>.table>.thead>.tr').append('
#
') + } + colName.forEach(element => { + $(ele + '>.table>.thead>.tr').append(`
${element}
`) + }); - //遍历插入数据 数据行 - for (let i = 0; i < rowData.length; i++) { + //遍历插入数据 数据行 + for (let i = 0; i < rowData.length; i++) { - $(ele + '>.table>.tbody').append('
'); - if (colIndex) { - $(ele + '>.table>.tbody>.tr:eq(' + i + ')').append( - `
${i+1}
`) - } - rowData[i].forEach(element => { - if (element == "一级") { - $(ele + '>.table>.tbody>.tr:eq(' + i + ')').append( - `
一级报警
` - ) - } else if (element == "二级") { - $(ele + '>.table>.tbody>.tr:eq(' + i + ')').append( - `
二级报警
` - ) - } else if (element == "三级") { - $(ele + '>.table>.tbody>.tr:eq(' + i + ')').append( - `
三级报警
` - ) - } else if (element == "未处理") { - $(ele + '>.table>.tbody>.tr:eq(' + i + ')').append( - `
${element}
` - ) - } else if (element == "处理中") { - $(ele + '>.table>.tbody>.tr:eq(' + i + ')').append( - `
${element}
` - ) - } else if (element == "已结束") { - $(ele + '>.table>.tbody>.tr:eq(' + i + ')').append( - `
${element}
` - ) - } else { - $(ele + '>.table>.tbody>.tr:eq(' + i + ')').append(`
${element}
`) - } + $(ele + '>.table>.tbody').append('
'); + if (colIndex) { + $(ele + '>.table>.tbody>.tr:eq(' + i + ')').append( + `
${i + 1}
`) + } + rowData[i].forEach(element => { + if (element == "一级") { + $(ele + '>.table>.tbody>.tr:eq(' + i + ')').append( + `
一级报警
` + ) + } else if (element == "二级") { + $(ele + '>.table>.tbody>.tr:eq(' + i + ')').append( + `
二级报警
` + ) + } else if (element == "三级") { + $(ele + '>.table>.tbody>.tr:eq(' + i + ')').append( + `
三级报警
` + ) + } else if (element == "未处理") { + $(ele + '>.table>.tbody>.tr:eq(' + i + ')').append( + `
${element}
` + ) + } else if (element == "处理中") { + $(ele + '>.table>.tbody>.tr:eq(' + i + ')').append( + `
${element}
` + ) + } else if (element == "已结束") { + $(ele + '>.table>.tbody>.tr:eq(' + i + ')').append( + `
${element}
` + ) + } else { + $(ele + '>.table>.tbody>.tr:eq(' + i + ')').append(`
${element}
`) + } - }) + }) - } + } - //设置CSS样式 - $(ele).css(boxCSS); - $(ele + '>.table').css(tableCSS); - $(ele + '>.table>.thead').css(theadCSS); - $(ele + '>.table>.thead>.tr').css(thead_trCSS); - $(ele + '>.table>.thead>.tr>.th').css(th_tdCSS).css(thCSS); - $(ele + '>.table>.tbody').css(tbodyCSS); - $(ele + '>.table>.tbody>.tr').css(tbody_trCSS); - $(ele + '>.table>.tbody>.tr:odd').css(trOddCSS); - $(ele + '>.table>.tbody>.tr:even').css(trEvenCSS); - $(ele + '>.table>.tbody>.tr>.td').css(th_tdCSS); - $(ele + '>.table span.index').css(indexCSS) + //设置CSS样式 + $(ele).css(boxCSS); + $(ele + '>.table').css(tableCSS); + $(ele + '>.table>.thead').css(theadCSS); + $(ele + '>.table>.thead>.tr').css(thead_trCSS); + $(ele + '>.table>.thead>.tr>.th').css(th_tdCSS).css(thCSS); + $(ele + '>.table>.tbody').css(tbodyCSS); + $(ele + '>.table>.tbody>.tr').css(tbody_trCSS); + $(ele + '>.table>.tbody>.tr:odd').css(trOddCSS); + $(ele + '>.table>.tbody>.tr:even').css(trEvenCSS); + $(ele + '>.table>.tbody>.tr>.td').css(th_tdCSS); + $(ele + '>.table span.index').css(indexCSS) - //统一计量单位 - const emptyUnit = element => element.replace(/[^0-9]/g, ''); - const hendlen = $(`${ele}>.table>.thead>.tr>.th`).length; - const bodylen = $(`${ele}>.table>.tbody>.tr:nth-child(1)>.td`).length; - const ceil = Math.ceil; + //统一计量单位 + const emptyUnit = element => element.replace(/[^0-9]/g, ''); + const hendlen = $(`${ele} > .table > .thead > .tr > .th`).length; + const bodylen = $(`${ele} > .table > .tbody > .tr:nth-child(1) > .td`).length; + const ceil = Math.ceil; - /** - * 设置每列的宽度 - * eq() 是在匹配的元素中取下标为n的元素 - * nth-child() 是在匹配元素的父元素中选择第n个元素 - */ - if (!colWidth) { - $(`${ele}>.table>.thead>.tr>.th`).css({ - width: ceil(100 / hendlen) + '%' - }); - $(`${ele}>.table>.tbody>.tr>.td`).css({ - width: ceil(100 / bodylen) + '%' - }); - } else { - for (let i = 0; i < colWidth.length; i++) { - let emptyUnitColWidth = emptyUnit(colWidth[i]); - console.log(emptyUnitColWidth) - $(`${ele}>.table>.thead>.tr>.th:nth-child(${i+1})`).width(`${emptyUnitColWidth}%`); - $(`${ele}>.table>.tbody>.tr>.td:nth-child(${i+1})`).width(`${emptyUnitColWidth}%`); - } - } + /** + * 设置每列的宽度 + * eq() 是在匹配的元素中取下标为n的元素 + * nth-child() 是在匹配元素的父元素中选择第n个元素 + */ + if (!colWidth) { + $(`${ele} > .table > .thead > .tr > .th`).css({ + width: ceil(100 / hendlen) + '%' + }); + $(`${ele} > .table > .tbody > .tr > .td`).css({ + width: ceil(100 / bodylen) + '%' + }); + } else { + for (let i = 0; i < colWidth.length; i++) { + let emptyUnitColWidth = emptyUnit(colWidth[i]); + console.log(emptyUnitColWidth) + $(`${ele} > .table > .thead > .tr > .th:nth-child(${i + 1})`).width(`${emptyUnitColWidth}%`); + $(`${ele} > .table > .tbody > .tr > .td:nth-child(${i + 1})`).width(`${emptyUnitColWidth}%`); + } + } - // 组件销毁钩子 - $(`${ele}`).bind('DOMNodeRemoved', (e) => { - if (e.target.classList[0] === 'asit-table') { - clearInterval(animation); - } - }); + // 组件销毁钩子 + $(`${ele}`).bind('DOMNodeRemoved', (e) => { + if (e.target.classList[0] === 'asit-table') { + clearInterval(animation); + } + }); } const tableAnimation = (el) => { - const evenRowBGC = 'rgba(6,25,57,0.2)' === undefined ? '#ddd' : 'rgba(6,25,57,0.2)'; - const oddRowBGC = 'rgba(8,36,75,0.2)' === undefined ? '#bbb' : 'rgba(8,36,75,0.2)'; - const trEvenCSS = { - display: "flex", - background: evenRowBGC - }; - const trOddCSS = { - display: "flex", - background: oddRowBGC - }; - let oddORevenCheck = $(`${el}>.table>.tbody>.tr`).length % 2 == 0 ? 'even' : 'odd'; - setInterval(function () { - $(el + '>.table>.tbody>.tr:eq(0)').slideToggle(100, function () { - switch (oddORevenCheck) { - case 'even': - $(this).clone().css(trEvenCSS).appendTo(el + '>.table>.tbody'); - oddORevenCheck = 'odd'; - break; - case 'odd': - $(this).clone().css(trOddCSS).appendTo(el + '>.table>.tbody'); - oddORevenCheck = 'even'; - break; - } - $(this).remove(); - }); - }, 2000); + const evenRowBGC = 'rgba(6,25,57,0.2)' === undefined ? '#ddd' : 'rgba(6,25,57,0.2)'; + const oddRowBGC = 'rgba(8,36,75,0.2)' === undefined ? '#bbb' : 'rgba(8,36,75,0.2)'; + const trEvenCSS = { + display: "flex", + background: evenRowBGC + }; + const trOddCSS = { + display: "flex", + background: oddRowBGC + }; + let oddORevenCheck = $(`${el} > .table > .tbody > .tr`).length % 2 == 0 ? 'even' : 'odd'; + setInterval(function () { + $(el + '>.table>.tbody>.tr:eq(0)').slideToggle(100, function () { + switch (oddORevenCheck) { + case 'even': + $(this).clone().css(trEvenCSS).appendTo(el + '>.table>.tbody'); + oddORevenCheck = 'odd'; + break; + case 'odd': + $(this).clone().css(trOddCSS).appendTo(el + '>.table>.tbody'); + oddORevenCheck = 'even'; + break; + } + $(this).remove(); + }); + }, 2000); } -const flip = (el,time = 2000) => { - console.log($(el + '>.table>.tbody').scrollTop()) - console.log($(el + '>.table>.tbody').outerHeight(true)) - $(el + '>.table>.tbody').animate({ - scrollTop: $(el + '>.table>.tbody').scrollTop() + $(el + '>.table>.tbody').outerHeight(true) - },time) +const flip = (el, time = 2000) => { + console.log($(el + '>.table>.tbody').scrollTop()) + console.log($(el + '>.table>.tbody').outerHeight(true)) + setInterval(function () { + $(el + '>.table>.tbody').animate({ + scrollTop: $(el + '>.table>.tbody').scrollTop() + $(el + '>.table>.tbody').outerHeight(true) + }, 2000) + }, time) } \ No newline at end of file