peng92055/smart-table
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

-- 增加hoverBgColor

Browse Source 
-- 优化结构
This commit is contained in:
Julyp
2020-02-04 11:59:05 +08:00
parent b827701dec
commit 52d66acf80
7 changed files with 119 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@@ -56,6 +56,7 @@
```javascript ```javascript
new SmartTable({ new SmartTable({
selector: '#smartTable', selector: '#smartTable',
hoverBgColor: '#C5DFFF',
height: 300, height: 300,
align: 'left', align: 'left',
size: 'middle' size: 'middle'
@@ -80,6 +81,7 @@
| height | number or function | no | 可指定表格的高度 | | | height | number or function | no | 可指定表格的高度 | |
| align | string | no | 表格文本的水平排列方式(left、center、right) | center | | align | string | no | 表格文本的水平排列方式(left、center、right) | center |
| size | string | no | 每一行的垂直高度风格(large、middle、small) | small | | size | string | no | 每一行的垂直高度风格(large、middle、small) | small |
| hoverBgColor | string | no | body中每行hover时的背景色 | '#EFF8FF' |
## 本地开发 ## 本地开发
### 启动项目 ### 启动项目

2
dist/smartTable.min.js vendored
View File

File diff suppressed because one or more lines are too long

7
examples/index.html
View File

@@ -37,8 +37,8 @@
} }
td img { td img {
width: 50px; width: 30px;
height: 50px; height: 30px;
} }
</style> </style>
</head> </head>
@@ -228,7 +228,8 @@
<script> <script>
new SmartTable({ new SmartTable({
selector: '#smartTable1' selector: '#smartTable1',
hoverBgColor: '#C5DFFF'
}) })
new SmartTable({ new SmartTable({
selector: '#smartTable2', selector: '#smartTable2',

42
lib/core/core.js
View File

@@ -31,11 +31,15 @@ export default function initMixin(Table) {
const table = querySelector(root, "table"); const table = querySelector(root, "table");
if (!table) return; if (!table) return;
vm.style = {
hoverBgColor: options.hoverBgColor || '#EFF8FF'
}
vm.gutterWidth = scrollBarWidth(); vm.gutterWidth = scrollBarWidth();
root.classList.add("smart-table"); root.classList.add("smart-table");
options.size && root.classList.add("smart-table-custom-" + options.size) options.size && root.classList.add("stb-cust-" + options.size)
options.align && root.classList.add("smart-table-custom-" + options.align) options.align && root.classList.add("stb-cust-" + options.align)
const thead = querySelector(table, "thead") const thead = querySelector(table, "thead")
const tbody = querySelector(table, "tbody") const tbody = querySelector(table, "tbody")
@@ -78,8 +82,8 @@ export default function initMixin(Table) {
//初始化fixed元素及宽度 //初始化fixed元素及宽度
initFixed(thead, vm); initFixed(thead, vm);
//初始化table 拆分table的thead和tbody //初始化table 拆分table的thead和tbody
vm.$theadWrapper = createTabelWrapper("smart-table_header-wrapper", vm, "header", thead, vm.scrollY); vm.$theadWrapper = createTabelWrapper("stb_header-wrapper", vm, "header", thead, vm.scrollY);
vm.$tbodyWrapper = createTabelWrapper("smart-table_body-wrapper", vm, "body", tbody); vm.$tbodyWrapper = createTabelWrapper("stb_body-wrapper", vm, "body", tbody);
appendChildren(root, [vm.$theadWrapper, vm.$tbodyWrapper]); appendChildren(root, [vm.$theadWrapper, vm.$tbodyWrapper]);
@@ -145,8 +149,8 @@ function bindEvents(vm) {
function replaceFixedColGroup(vm, selector, newTableWidth) { function replaceFixedColGroup(vm, selector, newTableWidth) {
if (selector) { if (selector) {
let fixedHeader = querySelector(selector, '.smart-table_header'); let fixedHeader = querySelector(selector, '.stb_header');
let fixedBody = querySelector(selector, '.smart-table_body'); let fixedBody = querySelector(selector, '.stb_body');
replaceColGroup(vm, fixedHeader); replaceColGroup(vm, fixedHeader);
replaceColGroup(vm, fixedBody); replaceColGroup(vm, fixedBody);
const columns = querySelectorAll(selector, "tr:first-child>th"); const columns = querySelectorAll(selector, "tr:first-child>th");
@@ -180,18 +184,18 @@ function bindScrollEvents(vm) {
function bindHoverEvents(vm) { function bindHoverEvents(vm) {
let trs = querySelectorAll(vm.$tbodyWrapper, 'tr'); let trs = querySelectorAll(vm.$tbodyWrapper, 'tr');
let fixedLeftTrs = querySelectorAll(vm.$root, '.smart-table_fixed .smart-table_fixed-body-wrapper tr'); let fixedLeftTrs = querySelectorAll(vm.$root, '.stb_fixed .stb_fixed-body-wrapper tr');
let fixedRightTrs = querySelectorAll(vm.$root, '.smart-table_fixed-right .smart-table_fixed-body-wrapper tr'); let fixedRightTrs = querySelectorAll(vm.$root, '.stb_fixed-right .stb_fixed-body-wrapper tr');
trs.forEach((tr, trIndex) => { trs.forEach((tr, trIndex) => {
tr.addEventListener('mouseenter', () => { tr.addEventListener('mouseenter', () => {
tr.className = 'smart-table_hover-tr'; tr.style.background = vm.style.hoverBgColor;
if (fixedLeftTrs.length > 0) fixedLeftTrs[trIndex].className = 'smart-table_hover-tr'; if (fixedLeftTrs.length > 0) fixedLeftTrs[trIndex].style.background = vm.style.hoverBgColor;
if (fixedRightTrs.length > 0) fixedRightTrs[trIndex].className = 'smart-table_hover-tr'; if (fixedRightTrs.length > 0) fixedRightTrs[trIndex].style.background = vm.style.hoverBgColor;
}) })
tr.addEventListener('mouseleave', () => { tr.addEventListener('mouseleave', () => {
tr.className = '' tr.style.background = ''
if (fixedLeftTrs.length > 0) fixedLeftTrs[trIndex].className = ''; if (fixedLeftTrs.length > 0) fixedLeftTrs[trIndex].style.background = '';
if (fixedRightTrs.length > 0) fixedRightTrs[trIndex].className = ''; if (fixedRightTrs.length > 0) fixedRightTrs[trIndex].style.background = '';
}) })
}) })
} }
@@ -230,8 +234,8 @@ function bindResizeEvents(vm) {
let oldTableWidth = vm.size.tabelWidth; let oldTableWidth = vm.size.tabelWidth;
let newWrapperWidth = table.offsetWidth; let newWrapperWidth = table.offsetWidth;
let newTableWidth = parseInt(oldTableWidth * (newWrapperWidth / oldWrapperWidth)); let newTableWidth = parseInt(oldTableWidth * (newWrapperWidth / oldWrapperWidth));
let headerWrapper = querySelector(vm.$theadWrapper, '.smart-table_header'); let headerWrapper = querySelector(vm.$theadWrapper, '.stb_header');
let bodyWrapper = querySelector(vm.$tbodyWrapper, '.smart-table_body'); let bodyWrapper = querySelector(vm.$tbodyWrapper, '.stb_body');
vm.colgroup.forEach(function(item, index) { vm.colgroup.forEach(function(item, index) {
vm.colgroup[index] = parseInt(newTableWidth * (item / oldTableWidth)) + 1 vm.colgroup[index] = parseInt(newTableWidth * (item / oldTableWidth)) + 1
}) })
@@ -242,8 +246,8 @@ function bindResizeEvents(vm) {
// 替换colgroup // 替换colgroup
replaceColGroup(vm, headerWrapper); replaceColGroup(vm, headerWrapper);
replaceColGroup(vm, bodyWrapper); replaceColGroup(vm, bodyWrapper);
replaceFixedColGroup(vm, querySelector(table, '.smart-table_fixed'), newTableWidth); replaceFixedColGroup(vm, querySelector(table, '.stb_fixed'), newTableWidth);
replaceFixedColGroup(vm, querySelector(table, '.smart-table_fixed-right'), newTableWidth); replaceFixedColGroup(vm, querySelector(table, '.stb_fixed-right'), newTableWidth);
})) }))
} }
@@ -359,7 +363,7 @@ function initData(vm, tbody) {
$fixedRightEl: fixedRightRows && fixedRightRows[index], $fixedRightEl: fixedRightRows && fixedRightRows[index],
$key: '$$rowkey' + index $key: '$$rowkey' + index
}; };
querySelectorAll(row, "td .smart-table_cell").forEach((cell, index) => { querySelectorAll(row, "td .stb_cell").forEach((cell, index) => {
rowData["field-" + index] = cell.innerHTML; rowData["field-" + index] = cell.innerHTML;
}) })
data.push(rowData) data.push(rowData)

11
lib/core/fixed.js
View File

@@ -3,7 +3,6 @@ import {
appendChild, appendChild,
appendChildren, appendChildren,
createElement, createElement,
querySelector,
querySelectorAll querySelectorAll
} from './node-ops'; } from './node-ops';
import { import {
@@ -20,7 +19,7 @@ export default function(vm, theadModel, tbodyModel) {
rootMinWidth = rootMinWidth > fixedLeft.width ? rootMinWidth : fixedLeft.width; rootMinWidth = rootMinWidth > fixedLeft.width ? rootMinWidth : fixedLeft.width;
const headerWrapper = createHeaderWrapper(vm, theadModel, fixedLeft); const headerWrapper = createHeaderWrapper(vm, theadModel, fixedLeft);
const bodyWrapper = createBodyWrapper(vm, tbodyModel, fixedLeft, 'left'); const bodyWrapper = createBodyWrapper(vm, tbodyModel, fixedLeft, 'left');
appendChild(vm.$root, createContainer(vm, headerWrapper, bodyWrapper, fixedLeft, 'smart-table_fixed', 'left')); appendChild(vm.$root, createContainer(vm, headerWrapper, bodyWrapper, fixedLeft, 'stb_fixed', 'left'));
vm.$fixedLeft = bodyWrapper; vm.$fixedLeft = bodyWrapper;
} }
//右边有固定列 //右边有固定列
@@ -28,11 +27,11 @@ export default function(vm, theadModel, tbodyModel) {
rootMinWidth = rootMinWidth + fixedRight.width; rootMinWidth = rootMinWidth + fixedRight.width;
const headerWrapper = createHeaderWrapper(vm, theadModel, fixedRight); const headerWrapper = createHeaderWrapper(vm, theadModel, fixedRight);
const bodyWrapper = createBodyWrapper(vm, tbodyModel, fixedRight, 'right'); const bodyWrapper = createBodyWrapper(vm, tbodyModel, fixedRight, 'right');
appendChild(vm.$root, createContainer(vm, headerWrapper, bodyWrapper, fixedRight, 'smart-table_fixed-right', 'right')); appendChild(vm.$root, createContainer(vm, headerWrapper, bodyWrapper, fixedRight, 'stb_fixed-right', 'right'));
vm.$fixedRight = bodyWrapper; vm.$fixedRight = bodyWrapper;
if (vm.scrollY) { if (vm.scrollY) {
let rightPatch = createElement("div", "smart-table_fixed-right-patch"); let rightPatch = createElement("div", "stb_fixed-right-patch");
rightPatch.style.width = vm.gutterWidth + "px"; rightPatch.style.width = vm.gutterWidth + "px";
rightPatch.style.height = vm.size.theadHeight + "px"; rightPatch.style.height = vm.size.theadHeight + "px";
appendChild(vm.$root, rightPatch) appendChild(vm.$root, rightPatch)
@@ -48,7 +47,7 @@ function createHeaderWrapper(vm, model, meta) {
column.classList.add('is-hidden') column.classList.add('is-hidden')
} }
}) })
return createTabelWrapper("smart-table_fixed-header-wrapper", vm, "header", thead); return createTabelWrapper("stb_fixed-header-wrapper", vm, "header", thead);
} }
function createBodyWrapper(vm, model, meta, type) { function createBodyWrapper(vm, model, meta, type) {
@@ -67,7 +66,7 @@ function createBodyWrapper(vm, model, meta, type) {
} }
}) })
}) })
let bodyWrapper = createTabelWrapper("smart-table_fixed-body-wrapper", vm, "body", tbody); let bodyWrapper = createTabelWrapper("stb_fixed-body-wrapper", vm, "body", tbody);
bodyWrapper.style.top = vm.size.theadHeight + "px"; bodyWrapper.style.top = vm.size.theadHeight + "px";
bodyWrapper.style.height = (vm.size.tbodyHeight - (vm.scrollX ? vm.gutterWidth : 0)) + "px"; bodyWrapper.style.height = (vm.size.tbodyHeight - (vm.scrollX ? vm.gutterWidth : 0)) + "px";
return bodyWrapper return bodyWrapper

35
lib/core/utils.js
View File

@@ -1,6 +1,5 @@
import { import {
appendChild, appendChild,
removeChild,
createElement, createElement,
querySelector, querySelector,
appendChildren, appendChildren,
@@ -8,7 +7,7 @@ import {
export function refactorCell(cell) { export function refactorCell(cell) {
let nodes = cell.childNodes; let nodes = cell.childNodes;
let wrapper = createElement("div", "smart-table_cell"); let wrapper = createElement("div", "stb_cell");
while (nodes.length) { while (nodes.length) {
appendChild(wrapper, nodes[0]) appendChild(wrapper, nodes[0])
} }
@@ -17,7 +16,7 @@ export function refactorCell(cell) {
export function createTabelWrapper(className, vm, type, content, hasGutter) { export function createTabelWrapper(className, vm, type, content, hasGutter) {
let wrapper = createElement("div", className); let wrapper = createElement("div", className);
let table = createElement("table", "smart-table_" + type); let table = createElement("table", "stb_" + type);
table.style.width = (vm.size.tabelWidth - 1) + "px"; table.style.width = (vm.size.tabelWidth - 1) + "px";
appendChildren(table, [createColgroup(vm.colgroup, vm.gutterWidth, hasGutter), content]) appendChildren(table, [createColgroup(vm.colgroup, vm.gutterWidth, hasGutter), content])
appendChild(wrapper, table) appendChild(wrapper, table)
@@ -47,18 +46,16 @@ export function throttle(delay, callback) {
function wrapper() { function wrapper() {
let self = this; const self = this;
let elapsed = new Date().getTime() - lastExec; const elapsed = new Date().getTime() - lastExec;
let args = arguments; const args = arguments;
function exec() { function exec() {
lastExec = new Date().getTime(); lastExec = new Date().getTime();
callback.apply(self, args) callback.apply(self, args)
} }
if (timeoutID) { timeoutID && clearTimeout(timeoutID)
clearTimeout(timeoutID)
}
if (elapsed > delay) { if (elapsed > delay) {
exec() exec()
@@ -71,11 +68,23 @@ export function throttle(delay, callback) {
} }
export function debounce(delay, callback) { export function debounce(delay, callback) {
let timeout = null; let timeoutID;
return function() {
if (timeout !== null) clearTimeout(timeout); function wrapper() {
timeout = setTimeout(callback, delay);
const self = this;
const args = arguments;
function exec() {
callback.apply(self, args)
}
timeoutID && clearTimeout(timeoutID)
timeoutID = setTimeout(exec, delay)
} }
return wrapper;
} }
function createColgroup(arr, gutterWidth, hasGutter) { function createColgroup(arr, gutterWidth, hasGutter) {

124
lib/index.scss
View File

@@ -5,15 +5,15 @@
width: 100%; width: 100%;
max-width: 100%; max-width: 100%;
background-color: #fff; background-color: #fff;
color: #606266; color: #6A6B6F;
border: 1px solid #EBEEF5; border: 1px solid #ECF0F5;
border-right: none; border-right: none;
border-bottom: none; border-bottom: none;
&:after, &:after,
&:before { &:before {
content: ""; content: "";
position: absolute; position: absolute;
background-color: #ebeef5; background-color: #ECF0F5;
z-index: 1; z-index: 1;
} }
&:before { &:before {
@@ -32,20 +32,32 @@
border-spacing: 0; border-spacing: 0;
border: 0; border: 0;
} }
thead {
background: #F5F7FB;
font-size: 13px;
}
tbody {
font-size: 12px;
&.stripe {
tr:nth-child(2n) {
background-color: #F9FBFF;
}
}
}
tr { tr {
transition: background-color .25s ease; transition: background-color .25s ease;
} }
thead { td,
color: #909399; th {
font-weight: 500; padding: 5px 0;
background: #F5F7FA; text-overflow: ellipsis;
tr { vertical-align: middle;
background: #F5F7FA; position: relative;
} border-bottom: 1px solid #ECF0F5;
} border-right: 1px solid #ECF0F5;
tbody.stripe { text-align: center;
tr:nth-child(2n) { &.is-hidden>* {
background-color: #F5F7FA; visibility: hidden;
} }
} }
th { th {
@@ -69,82 +81,70 @@
} }
} }
} }
td, &.stb-cust-large {
th { thead {
padding: 6px 0; font-size: 16px;
min-width: 50px; }
box-sizing: border-box; tbody {
text-overflow: ellipsis; font-size: 15px;
vertical-align: middle;
position: relative;
text-align: left;
border-bottom: 1px solid #EBEEF5;
border-right: 1px solid #EBEEF5;
text-align: center;
&.is-hidden>* {
visibility: hidden;
} }
}
&.smart-table-custom-large {
td, td,
th { th {
padding: 12px 0; padding: 12px 0;
} }
} }
&.smart-table-custom-middle { &.stb-cust-middle {
thead {
font-size: 15px;
}
tbody {
font-size: 14px;
}
td, td,
th { th {
padding: 10px 0; padding: 10px 0;
} }
} }
&.smart-table-custom-left { &.stb-cust-left {
td, td,
th { th {
text-align: left; text-align: left;
} }
} }
&.smart-table-custom-right { &.stb-cust-right {
td, td,
th { th {
text-align: right; text-align: right;
} }
} }
.smart-table_cell { .stb_cell {
-webkit-box-sizing: border-box;
box-sizing: border-box;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: normal; white-space: normal;
word-break: break-all; word-break: break-all;
padding: 0 4px;
line-height: 23px; line-height: 23px;
padding-left: 4px;
padding-right: 4px;
} }
th>.smart-table_cell { th>.stb_cell {
display: inline-block; display: inline-block;
-webkit-box-sizing: border-box;
box-sizing: border-box;
position: relative; position: relative;
vertical-align: middle; vertical-align: middle;
padding-left: 4px;
padding-right: 4px;
width: 100%;
} }
.smart-table_body, .stb_body,
.smart-table_footer, .stb_footer,
.smart-table_header { .stb_header {
table-layout: fixed; table-layout: fixed;
border-collapse: separate; border-collapse: separate;
background: #fff; background: #fff;
} }
.smart-table_header-wrapper { .stb_header-wrapper {
overflow: hidden; overflow: hidden;
} }
.smart-table_body-wrapper { .stb_body-wrapper {
overflow: auto; overflow: auto;
} }
.smart-table_fixed, .stb_fixed,
.smart-table_fixed-right { .stb_fixed-right {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
@@ -152,39 +152,36 @@
overflow-y: hidden; overflow-y: hidden;
box-shadow: 0 -1px 8px rgba(0, 0, 0, .08); box-shadow: 0 -1px 8px rgba(0, 0, 0, .08);
} }
.smart-table_fixed-right { .stb_fixed-right {
top: 0; top: 0;
left: auto; left: auto;
right: 0; right: 0;
box-shadow: -1px 0 8px rgba(0, 0, 0, .08); box-shadow: -1px 0 8px rgba(0, 0, 0, .08);
.smart-table_fixed-body-wrapper, .stb_fixed-body-wrapper,
.smart-table_fixed-footer-wrapper, .stb_fixed-footer-wrapper,
.smart-table_fixed-header-wrapper { .stb_fixed-header-wrapper {
left: auto; left: auto;
right: 0; right: 0;
} }
} }
.smart-table_fixed-right-patch { .stb_fixed-right-patch {
position: absolute; position: absolute;
top: -1px; top: -1px;
right: 0; right: 0;
background-color: #F5F7FA; background-color: #F5F7FB;
} }
.smart-table_fixed-header-wrapper { .stb_fixed-header-wrapper {
position: absolute; position: absolute;
left: 0; left: 0;
top: 0; top: 0;
z-index: 3; z-index: 3;
} }
.smart-table_fixed-body-wrapper { .stb_fixed-body-wrapper {
position: absolute; position: absolute;
left: 0; left: 0;
top: 37px; top: 37px;
overflow: hidden; overflow: hidden;
z-index: 3; z-index: 3;
}
.smart-table_hover-tr {
background-color: #f0f5fd !important;
} }
::-webkit-scrollbar { ::-webkit-scrollbar {
width: 8px; width: 8px;
@@ -201,4 +198,7 @@
::-webkit-scrollbar-thumb:hover { ::-webkit-scrollbar-thumb:hover {
background-color: #9bbbfa; background-color: #9bbbfa;
} }
* {
box-sizing: border-box;
}
} }