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; height: 50px;
} }
</style> </style>
<script type="text/javascript" src="smartTable.190a78fd.js"></script></head> <script type="text/javascript" src="smartTable.4c1d3136.js"></script></head>
<body> <body>
<h1 class="title">Smart Table Example<a href="https://github.com/peng92055/smart-table" target="_blank" rel="noopener noreferrer" class="repo-link"> <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 { import {
cloneNode, cloneNode,
appendChild, appendChild,
appendChildren,
removeChild, removeChild,
createElement, createElement,
querySelector, querySelector,
querySelectorAll querySelectorAll
} from './node-ops'; } from './node-ops';
import { import {
createTabelWrapper,
getEmptyIndexInArray,
getIntByAttr,
throttle, throttle,
debounce, debounce,
getIntByAttr,
refactorCell, refactorCell,
replaceColGroup replaceColGroup,
createTabelWrapper,
getEmptyIndexInArray
} from './utils'; } from './utils';
import scrollBarWidth from './scrollbar-width';
export default function initMixin(Table) { export default function initMixin(Table) {
Table.prototype._init = function(options = {}) { Table.prototype._init = function(options = {}) {
@@ -26,13 +28,13 @@ export default function initMixin(Table) {
} }
const vm = this; const vm = this;
vm.$options = options; vm.$options = options;
vm.scrollbarFit = 8;
const root = options.selector && querySelector(document, String(options.selector).trim()); const root = options.selector && querySelector(document, String(options.selector).trim());
if (!root) return; if (!root) return;
const table = querySelector(root, "table"); const table = querySelector(root, "table");
if (!table) return; if (!table) return;
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("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.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元素及宽度 //初始化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.$theadWrapper = createTabelWrapper("smart-table_header-wrapper", vm, "header", thead);
vm.$tbodyWrapper = createTabelWrapper("smart-table_body-wrapper", vm, "body", tbody); vm.$tbodyWrapper = createTabelWrapper("smart-table_body-wrapper", vm, "body", tbody);
appendChild(root, vm.$theadWrapper); appendChildren(root, [vm.$theadWrapper, vm.$tbodyWrapper])
appendChild(root, vm.$tbodyWrapper);
vm.size.theadHeight = thead.offsetHeight; vm.size.theadHeight = thead.offsetHeight;
vm.size.tbodyHeight = customHeight - thead.offsetHeight; vm.size.tbodyHeight = customHeight - thead.offsetHeight;
@@ -98,19 +99,15 @@ export default function initMixin(Table) {
initSortEvent(vm); initSortEvent(vm);
bindEvents(vm); bindEvents(vm);
if (vm.hasVerticalScroll) { if (vm.scrollY) {
let th = createElement("th"); let th = createElement("th");
th.setAttribute("width", vm.scrollbarFit); th.setAttribute("width", vm.gutterWidth);
th.setAttribute("rowspan", vm.props.shapes.length); th.setAttribute("rowspan", vm.props.shapes.length);
appendChild(querySelector(thead, "tr"), th); appendChild(querySelector(thead, "tr"), th);
} }
} }
} }
function refactorTable() {
}
function rollupFixed(vm, theadModel, tbodyModel) { function rollupFixed(vm, theadModel, tbodyModel) {
const { const {
fixedLeft, fixedLeft,
@@ -143,12 +140,11 @@ function rollupFixed(vm, theadModel, tbodyModel) {
}) })
let bodyWrapper = createTabelWrapper("smart-table_fixed-body-wrapper", vm, "body", tbody); let bodyWrapper = createTabelWrapper("smart-table_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.hasHorizontalScroll ? vm.scrollbarFit : 0)) + "px"; bodyWrapper.style.height = (vm.size.tbodyHeight - (vm.scrollX ? vm.gutterWidth : 0)) + "px";
let fixedContainer = createElement("div", "smart-table_fixed"); let fixedContainer = createElement("div", "smart-table_fixed");
appendChild(fixedContainer, headerWrapper); appendChildren(fixedContainer, [headerWrapper, bodyWrapper]);
appendChild(fixedContainer, bodyWrapper);
fixedContainer.style.width = fixedLeft.width + "px"; 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); appendChild(vm.$root, fixedContainer);
vm.$fixedLeft = bodyWrapper; vm.$fixedLeft = bodyWrapper;
} }
@@ -175,18 +171,17 @@ function rollupFixed(vm, theadModel, tbodyModel) {
}) })
let bodyWrapper = createTabelWrapper("smart-table_fixed-body-wrapper", vm, "body", tbody); let bodyWrapper = createTabelWrapper("smart-table_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.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"); let fixedContainer = createElement("div", "smart-table_fixed-right");
fixedContainer.style.right = (vm.hasVerticalScroll ? vm.scrollbarFit : 0) + "px"; fixedContainer.style.right = (vm.scrollY ? vm.gutterWidth : 0) + "px";
appendChild(fixedContainer, headerWrapper); appendChildren(fixedContainer, [headerWrapper, bodyWrapper]);
appendChild(fixedContainer, bodyWrapper);
fixedContainer.style.width = fixedRight.width + "px"; 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); appendChild(vm.$root, fixedContainer);
vm.$fixedRight = bodyWrapper; vm.$fixedRight = bodyWrapper;
if (vm.hasVerticalScroll) { if (vm.scrollY) {
let rightPatch = createElement("div", "smart-table_fixed-right-patch"); 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"; rightPatch.style.height = vm.size.theadHeight + "px";
appendChild(vm.$root, rightPatch) 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) { 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) { 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 { import {
createElement,
appendChild, appendChild,
querySelector removeChild,
createElement,
querySelector,
appendChildren,
} from './node-ops'; } from './node-ops';
export function refactorCell(cell) { export function refactorCell(cell) {
@@ -17,8 +19,7 @@ export function createTabelWrapper(className, vm, type, content) {
let wrapper = createElement("div", className); let wrapper = createElement("div", className);
let table = createElement("table", "smart-table_" + type); let table = createElement("table", "smart-table_" + type);
table.style.width = (vm.size.tabelWidth - 1) + "px"; table.style.width = (vm.size.tabelWidth - 1) + "px";
appendChild(table, createColgroup(vm.colgroup)); appendChildren(table, [createColgroup(vm.colgroup), content])
appendChild(table, content)
appendChild(wrapper, table) appendChild(wrapper, table)
return wrapper; return wrapper;
} }
@@ -55,10 +56,6 @@ export function throttle(delay, callback) {
callback.apply(self, args) callback.apply(self, args)
} }
function clear() {
timeoutID = undefined;
}
if (timeoutID) { if (timeoutID) {
clearTimeout(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) { function createColgroup(arr) {
if (!arr) return; if (!arr) return;
let colgroup = createElement("colgroup"); let colgroup = createElement("colgroup");