格式化文件

This commit is contained in:
julyp
2020-05-06 10:02:34 +08:00
parent 250b404fae
commit c5c0da76a3

View File

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