diff --git a/lib/core/core.js b/lib/core/core.js index 9ac574c..98a98a5 100644 --- a/lib/core/core.js +++ b/lib/core/core.js @@ -30,7 +30,7 @@ import { import scrollBarWidth from './scrollbar-width'; export default function initMixin(Table) { - Table.prototype._init = function(options = {}) { + Table.prototype._init = function (options = {}) { if (!options.selector) { return console.error("Smart Table init need a selector") } @@ -50,18 +50,18 @@ export default function initMixin(Table) { hasAttribute(table, "stripe") && tbody.classList.add("stripe") options.expand ? (querySelectorAll(thead, 'th[sort]').forEach(column => { - removeAttribute(column, "sort") - }), querySelectorAll(thead, 'th[fixed]').forEach(column => { - removeAttribute(column, "fixed") - })) : (querySelectorAll(tbody, 'tr[expand]').forEach(column => { - removeAttribute(column, "expand") - }), querySelectorAll(thead, 'tr[expand-parent]').forEach(column => { - removeAttribute(column, "expand-parent") - })) + removeAttribute(column, "sort") + }), querySelectorAll(thead, 'th[fixed]').forEach(column => { + removeAttribute(column, "fixed") + })) : (querySelectorAll(tbody, 'tr[expand]').forEach(column => { + removeAttribute(column, "expand") + }), querySelectorAll(thead, 'tr[expand-parent]').forEach(column => { + removeAttribute(column, "expand-parent") + })) - !!options.expandCallback && (querySelectorAll(thead, 'th[fixed]').forEach(column => { - removeAttribute(column, "fixed") - })) + !!options.expandCallback && (querySelectorAll(thead, 'th[fixed]').forEach(column => { + removeAttribute(column, "fixed") + })) const vm = this; vm.$root = root @@ -97,20 +97,27 @@ export default function initMixin(Table) { bindEvents(vm) const th = createElement("th"); - styled(th, { display: 'none' }) + styled(th, { + display: 'none' + }) setAttribute(th, "width", vm.gutterWidth); setAttribute(th, "rowspan", vm.props.shapes.length); appendChild(querySelector(vm.$thead, "tr"), th); vm.$scrollTH = th; if (vm.scrollY) { - styled(vm.$scrollTH, { display: 'table-cell' }) + styled(vm.$scrollTH, { + display: 'table-cell' + }) resize(vm) } } } function appendExpandTrigger(vm) { - const { $thead, $tbody } = vm; + const { + $thead, + $tbody + } = vm; let theadRow = querySelector($thead, "tr"); let th = theadRow.querySelector("th"); let cell = createExpandTrigger("th", getAttrNumber(th, "rowspan", 1)); @@ -123,7 +130,10 @@ function appendExpandTrigger(vm) { } function appendCheckbox(vm) { - const { $thead, $tbody } = vm; + const { + $thead, + $tbody + } = vm; let theadRow = querySelector($thead, "tr"); let th = theadRow.querySelector("th"); let cell = createCheckbox("th", getAttrNumber(th, "rowspan", 1)); @@ -136,8 +146,15 @@ function appendCheckbox(vm) { } function layout(vm, table) { - const { $root, $thead, $tbody, options } = vm; - const { height } = options; + const { + $root, + $thead, + $tbody, + options + } = vm; + const { + height + } = options; querySelectorAll($thead, "th").forEach(cell => refactorCell(cell)) querySelectorAll($tbody, "td").forEach(cell => refactorCell(cell)) @@ -153,7 +170,9 @@ function layout(vm, table) { const theadHeight = offsetHeight($thead); const custHeight = (typeof height === 'function' ? height.call() : height) || offsetHeight($root); const tbodyWrapperHeight = custHeight > theadHeight ? (custHeight - theadHeight - 1) : (theadHeight + 150) - styled(vm.$tbodyWrapper, { height: tbodyWrapperHeight + "px" }) + styled(vm.$tbodyWrapper, { + height: tbodyWrapperHeight + "px" + }) vm.size.tbodyWrapperHeight = tbodyWrapperHeight; @@ -165,7 +184,10 @@ function layout(vm, table) { //根据表格中的tbody第一行 查出每列的宽度并记录 function initColgroupData(vm) { - const { $root, props } = vm; + const { + $root, + props + } = vm; const rootWidth = offsetWidth($root) - 1; const clientWidth = rootWidth - (vm.scrollY ? vm.gutterWidth : 0); let arr = []; @@ -230,7 +252,10 @@ function bindEvents(vm) { function resize(vm) { debounce(500, () => { - const { fixedLeft, fixedRight } = vm.props; + const { + fixedLeft, + fixedRight + } = vm.props; initColgroupData(vm) replaceColGroup(vm) @@ -307,7 +332,9 @@ function bindExpandTreeEvents(vm) { function expanding(item, expanded) { expanded ? setAttribute(item.$el, "expanded") : removeAttribute(item.$el, "expanded"); item.children && (item.children.forEach(child => { - styled(child.$el, { display: expanded ? '' : 'none' }) + styled(child.$el, { + display: expanded ? '' : 'none' + }) expanding(child, expanded) })) } @@ -322,7 +349,10 @@ function bindScrollEvents(vm) { } function bindRowEvents(vm) { - let { selection, selectionKey } = vm.options; + let { + selection, + selectionKey + } = vm.options; selectionKey = selectionKey || 0; vm.hasExpandCb && (selectionKey++) const totalCheckbox = querySelector(vm.$fixedLeft || vm.$thead, "th>.stb_cell>label.std-checkbox"); @@ -351,7 +381,9 @@ function bindRowEvents(vm) { } function addExpandTriggerEvent(vm, row, key, value) { - const { options } = vm; + const { + options + } = vm; const trigger = querySelector(row, ".expand-cell>.stb_cell") if (!trigger) return; trigger.addEventListener('click', ($event) => { @@ -364,7 +396,7 @@ function addExpandTriggerEvent(vm, row, key, value) { } else { setAttribute(trigger, "loading", true) options.expandCallback.call(this, { - open: function(content, needParse) { + open: function (content, needParse) { let cell = createElement("td") setAttribute(cell, "colspan", vm.colgroup.length) let wrapper = createElement("div", "std-dialog_content") @@ -387,7 +419,9 @@ function addCheckboxEvent(vm, row, totalCheckbox, value) { const trigger = querySelector(row, "label.std-checkbox") if (!trigger || !totalCheckbox) return; trigger.addEventListener('click', () => { - let { selected } = vm; + let { + selected + } = vm; selected = selected || []; const target = !hasAttribute(trigger, "checked"); target ? setAttribute(trigger, 'checked', true) : removeAttribute(trigger, 'checked') @@ -405,9 +439,13 @@ function addCheckboxEvent(vm, row, totalCheckbox, value) { function addTotalCheckboxEvent(vm, totalCheckbox) { if (!totalCheckbox) return; - const { selectionKey } = vm.options; + const { + selectionKey + } = vm.options; totalCheckbox.addEventListener('click', () => { - let { selected } = vm; + let { + selected + } = vm; selected = []; const target = !hasAttribute(totalCheckbox, "checked"); target ? setAttribute(totalCheckbox, 'checked', true) : removeAttribute(totalCheckbox, 'checked'); @@ -425,11 +463,15 @@ function addTotalCheckboxEvent(vm, totalCheckbox) { function addRadioEvent(vm, trigger, relates, radioValue) { if (!trigger) return; trigger.addEventListener('click', () => { - let { selected } = vm; + let { + selected + } = vm; let target = false; if (selected === radioValue && !hasAttribute(trigger, "checked")) return; if (selected !== radioValue) { - querySelectorAll(vm.$root, 'tr[checked]>td').forEach(item => styled(item, { background: '' })) + querySelectorAll(vm.$root, 'tr[checked]>td').forEach(item => styled(item, { + background: '' + })) querySelectorAll(vm.$root, 'tr[checked]').forEach(item => removeAttribute(item, "checked")) target = true; } else { @@ -440,13 +482,17 @@ function addRadioEvent(vm, trigger, relates, radioValue) { selected = target ? radioValue : null; target ? setAttribute(trigger, "checked", true) : removeAttribute(trigger, "checked"); trigger.querySelectorAll("td").forEach(column => { - styled(column, { background: target ? vm.style.radioBgColor : '' }) + styled(column, { + background: target ? vm.style.radioBgColor : '' + }) }) relates.forEach(item => { if (item) { target ? setAttribute(item, "checked", true) : removeAttribute(item, "checked") item.querySelectorAll("td").forEach(column => { - styled(column, { background: target ? vm.style.radioBgColor : '' }) + styled(column, { + background: target ? vm.style.radioBgColor : '' + }) }) } }) @@ -458,15 +504,23 @@ function addRadioEvent(vm, trigger, relates, radioValue) { function addHoverEvent(vm, trigger, relates) { if (!trigger) return; trigger.addEventListener('mouseenter', () => { - styled(trigger, { background: vm.style.hoverBgColor }) + styled(trigger, { + background: vm.style.hoverBgColor + }) relates.forEach(el => { - el && styled(el, { background: vm.style.hoverBgColor }) + el && styled(el, { + background: vm.style.hoverBgColor + }) }) }) trigger.addEventListener('mouseleave', () => { - styled(trigger, { background: '' }) + styled(trigger, { + background: '' + }) relates.forEach(el => { - el && styled(el, { background: '' }) + el && styled(el, { + background: '' + }) }) }) } @@ -617,7 +671,11 @@ function initExpand(vm, tbody) { let paddingLength = parents.length; let expand = hasAttribute(row, "expand"); let hasParent = hasAttribute(row, "expand-parent"); - let node = { $el: row, id: getAttribute(row, "expand"), expand: expand }; + let node = { + $el: row, + id: getAttribute(row, "expand"), + expand: expand + }; if (expand) { if (expandAll) { setAttribute(row, 'expanded') @@ -650,12 +708,18 @@ function initExpand(vm, tbody) { data.push(node) } if (hasParent) { - styled(querySelector(row, "td"), { paddingLeft: 32 * paddingLength + "px" }) - styled(row, { display: expandAll ? '' : 'none' }) + styled(querySelector(row, "td"), { + paddingLeft: 32 * paddingLength + "px" + }) + styled(row, { + display: expandAll ? '' : 'none' + }) } }) vm.expandData = data; - styled(vm.$tbodyWrapper, { height: '' }) + styled(vm.$tbodyWrapper, { + height: '' + }) } function initData(vm, tbody) {