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
new SmartTable({
selector: '#smartTable',
hoverBgColor: '#C5DFFF',
height: 300,
align: 'left',
size: 'middle'
@@ -80,6 +81,7 @@
| height | number or function | no | 可指定表格的高度 | |
| align | string | no | 表格文本的水平排列方式(left、center、right) | center |
| 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 {
width: 50px;
height: 50px;
width: 30px;
height: 30px;
}
</style>
</head>
@@ -228,7 +228,8 @@
<script>
new SmartTable({
selector: '#smartTable1'
selector: '#smartTable1',
hoverBgColor: '#C5DFFF'
})
new SmartTable({
selector: '#smartTable2',

42
lib/core/core.js
View File

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

11
lib/core/fixed.js
View File

@@ -3,7 +3,6 @@ import {
appendChild,
appendChildren,
createElement,
querySelector,
querySelectorAll
} from './node-ops';
import {
@@ -20,7 +19,7 @@ export default function(vm, theadModel, tbodyModel) {
rootMinWidth = rootMinWidth > fixedLeft.width ? rootMinWidth : fixedLeft.width;
const headerWrapper = createHeaderWrapper(vm, theadModel, fixedLeft);
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;
}
//右边有固定列
@@ -28,11 +27,11 @@ export default function(vm, theadModel, tbodyModel) {
rootMinWidth = rootMinWidth + fixedRight.width;
const headerWrapper = createHeaderWrapper(vm, theadModel, fixedRight);
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;
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.height = vm.size.theadHeight + "px";
appendChild(vm.$root, rightPatch)
@@ -48,7 +47,7 @@ function createHeaderWrapper(vm, model, meta) {
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) {
@@ -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.height = (vm.size.tbodyHeight - (vm.scrollX ? vm.gutterWidth : 0)) + "px";
return bodyWrapper

35
lib/core/utils.js
View File

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

122
lib/index.scss
View File

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