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

增加scrollbar动态获取、增加appendChildren

Browse Source
This commit is contained in:
Julyp
2020-01-31 16:30:30 +08:00
parent 047343c6f6
commit ec05e477bb
6 changed files with 140 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
dist/index.html vendored
View File

@@ -39,7 +39,7 @@
height: 50px;
}
</style>
<script type="text/javascript" src="smartTable.190a78fd.js"></script></head>
<script type="text/javascript" src="smartTable.4c1d3136.js"></script></head>
<body>
<h1 class="title">Smart Table Example<a href="https://github.com/peng92055/smart-table" target="_blank" rel="noopener noreferrer" class="repo-link">

138
dist/smartTable.190a78fd.js → dist/smartTable.4c1d3136.js vendored
View File

File diff suppressed because one or more lines are too long

49
lib/core/core.js
View File

@@ -4,20 +4,22 @@ import {
import {
cloneNode,
appendChild,
appendChildren,
removeChild,
createElement,
querySelector,
querySelectorAll
} from './node-ops';
import {
createTabelWrapper,
getEmptyIndexInArray,
getIntByAttr,
throttle,
debounce,
getIntByAttr,
refactorCell,
replaceColGroup
replaceColGroup,
createTabelWrapper,
getEmptyIndexInArray
} from './utils';
import scrollBarWidth from './scrollbar-width';
export default function initMixin(Table) {
Table.prototype._init = function(options = {}) {
@@ -26,13 +28,13 @@ export default function initMixin(Table) {
}
const vm = this;
vm.$options = options;
vm.scrollbarFit = 8;
const root = options.selector && querySelector(document, String(options.selector).trim());
if (!root) return;
const table = querySelector(root, "table");
if (!table) return;
vm.gutterWidth = scrollBarWidth();
root.classList.add("smart-table");
options.size && root.classList.add("smart-table-custom-" + options.size)
@@ -73,17 +75,16 @@ export default function initMixin(Table) {
//根据头部列的二维数组 获取最小表格宽度
vm.size.tabelWidth = table.style.width = vm.colgroup.reduce((total, num) => total + num);
//垂直方向是否有滚动条
vm.hasVerticalScroll = customHeight < table.offsetHeight;
vm.scrollY = customHeight < table.offsetHeight;
//水平方向是否有滚动条
vm.hasHorizontalScroll = root.offsetWidth < vm.size.tabelWidth;
vm.scrollX = root.offsetWidth < vm.size.tabelWidth;
//初始化fixed元素及宽度
initFixed(thead, vm);
//初始化table 拆分table的thead和tbody
vm.$theadWrapper = createTabelWrapper("smart-table_header-wrapper", vm, "header", thead);
vm.$tbodyWrapper = createTabelWrapper("smart-table_body-wrapper", vm, "body", tbody);
appendChild(root, vm.$theadWrapper);
appendChild(root, vm.$tbodyWrapper);
appendChildren(root, [vm.$theadWrapper, vm.$tbodyWrapper])
vm.size.theadHeight = thead.offsetHeight;
vm.size.tbodyHeight = customHeight - thead.offsetHeight;
@@ -98,19 +99,15 @@ export default function initMixin(Table) {
initSortEvent(vm);
bindEvents(vm);
if (vm.hasVerticalScroll) {
if (vm.scrollY) {
let th = createElement("th");
th.setAttribute("width", vm.scrollbarFit);
th.setAttribute("width", vm.gutterWidth);
th.setAttribute("rowspan", vm.props.shapes.length);
appendChild(querySelector(thead, "tr"), th);
}
}
}
function refactorTable() {
}
function rollupFixed(vm, theadModel, tbodyModel) {
const {
fixedLeft,
@@ -143,12 +140,11 @@ function rollupFixed(vm, theadModel, tbodyModel) {
})
let bodyWrapper = createTabelWrapper("smart-table_fixed-body-wrapper", vm, "body", tbody);
bodyWrapper.style.top = vm.size.theadHeight + "px";
bodyWrapper.style.height = (vm.size.tbodyHeight - (vm.hasHorizontalScroll ? vm.scrollbarFit : 0)) + "px";
bodyWrapper.style.height = (vm.size.tbodyHeight - (vm.scrollX ? vm.gutterWidth : 0)) + "px";
let fixedContainer = createElement("div", "smart-table_fixed");
appendChild(fixedContainer, headerWrapper);
appendChild(fixedContainer, bodyWrapper);
appendChildren(fixedContainer, [headerWrapper, bodyWrapper]);
fixedContainer.style.width = fixedLeft.width + "px";
fixedContainer.style.height = (vm.size.fixWrapperHeigth - (vm.hasHorizontalScroll ? vm.scrollbarFit : 0)) + "px";
fixedContainer.style.height = (vm.size.fixWrapperHeigth - (vm.scrollX ? vm.gutterWidth : 0)) + "px";
appendChild(vm.$root, fixedContainer);
vm.$fixedLeft = bodyWrapper;
}
@@ -175,18 +171,17 @@ function rollupFixed(vm, theadModel, tbodyModel) {
})
let bodyWrapper = createTabelWrapper("smart-table_fixed-body-wrapper", vm, "body", tbody);
bodyWrapper.style.top = vm.size.theadHeight + "px";
bodyWrapper.style.height = (vm.size.tbodyHeight - (vm.hasHorizontalScroll ? vm.scrollbarFit : 0)) + "px";
bodyWrapper.style.height = (vm.size.tbodyHeight - (vm.scrollX ? vm.gutterWidth : 0)) + "px";
let fixedContainer = createElement("div", "smart-table_fixed-right");
fixedContainer.style.right = (vm.hasVerticalScroll ? vm.scrollbarFit : 0) + "px";
appendChild(fixedContainer, headerWrapper);
appendChild(fixedContainer, bodyWrapper);
fixedContainer.style.right = (vm.scrollY ? vm.gutterWidth : 0) + "px";
appendChildren(fixedContainer, [headerWrapper, bodyWrapper]);
fixedContainer.style.width = fixedRight.width + "px";
fixedContainer.style.height = (vm.size.fixWrapperHeigth - (vm.hasHorizontalScroll ? vm.scrollbarFit : 0)) + "px";
fixedContainer.style.height = (vm.size.fixWrapperHeigth - (vm.scrollX ? vm.gutterWidth : 0)) + "px";
appendChild(vm.$root, fixedContainer);
vm.$fixedRight = bodyWrapper;
if (vm.hasVerticalScroll) {
if (vm.scrollY) {
let rightPatch = createElement("div", "smart-table_fixed-right-patch");
rightPatch.style.width = vm.scrollbarFit + "px";
rightPatch.style.width = vm.gutterWidth + "px";
rightPatch.style.height = vm.size.theadHeight + "px";
appendChild(vm.$root, rightPatch)
}

9
lib/core/node-ops.js
View File

@@ -5,7 +5,14 @@ export function createElement(tagName, className) {
}
export function appendChild(node, child) {
return node.appendChild(child);
return node.appendChild(child)
}
export function appendChildren(node, children) {
children.forEach(child => {
node.appendChild(child)
})
return node
}
export function insertBefore(parentNode, newNode, referenceNode) {

34
lib/core/scrollbar-width.js Normal file
View File

@@ -0,0 +1,34 @@
import {
appendChild,
removeChild,
createElement,
} from './node-ops';
let scrollBarWidth;
export default function() {
if (scrollBarWidth !== undefined) return scrollBarWidth;
const wrapper = createElement('div', 'smart-table');
appendChild(document.body, wrapper);
const outer = createElement('div');
outer.style.visibility = 'hidden';
outer.style.width = '100px';
outer.style.position = 'absolute';
outer.style.top = '-9999px';
appendChild(wrapper, outer)
const widthNoScroll = outer.offsetWidth;
outer.style.overflow = 'scroll';
const inner = createElement('div');
inner.style.width = '100%';
appendChild(outer, inner);
const widthWithScroll = inner.offsetWidth;
removeChild(wrapper.parentNode, wrapper);
scrollBarWidth = widthNoScroll - widthWithScroll;
return scrollBarWidth;
};

25
lib/core/utils.js
View File

@@ -1,7 +1,9 @@
import {
createElement,
appendChild,
querySelector
removeChild,
createElement,
querySelector,
appendChildren,
} from './node-ops';
export function refactorCell(cell) {
@@ -17,8 +19,7 @@ export function createTabelWrapper(className, vm, type, content) {
let wrapper = createElement("div", className);
let table = createElement("table", "smart-table_" + type);
table.style.width = (vm.size.tabelWidth - 1) + "px";
appendChild(table, createColgroup(vm.colgroup));
appendChild(table, content)
appendChildren(table, [createColgroup(vm.colgroup), content])
appendChild(wrapper, table)
return wrapper;
}
@@ -55,10 +56,6 @@ export function throttle(delay, callback) {
callback.apply(self, args)
}
function clear() {
timeoutID = undefined;
}
if (timeoutID) {
clearTimeout(timeoutID)
}
@@ -81,18 +78,6 @@ export function debounce(delay, callback) {
}
}
export function isWindows() {
var agent = navigator.userAgent.toLowerCase();
if (agent.indexOf("win32") >= 0 || agent.indexOf("wow32") >= 0) {
return true;
}
if (agent.indexOf("win64") >= 0 || agent.indexOf("wow64") >= 0) {
return true;
}
return false;
}
//创建colgroup节点
function createColgroup(arr) {
if (!arr) return;
let colgroup = createElement("colgroup");