Skip to content

Commit

Permalink
格式化文件
Browse files Browse the repository at this point in the history
  • Loading branch information
@peng92055
peng92055 committed May 6, 2020
1 parent 250b404 commit c5c0da7
Showing 1 changed file with 105 additions and 41 deletions.
146 changes: 105 additions & 41 deletions lib/core/core.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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")
}
Expand All @@ -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")
}))

!!options.expandCallback && (querySelectorAll(thead, 'th[fixed]').forEach(column => {
removeAttribute(column, "fixed")
}))
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")
}))

const vm = this;
vm.$root = root
Expand Down Expand Up @@ -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));
Expand All @@ -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));
Expand All @@ -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))
Expand All @@ -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;

Expand All @@ -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 = [];
Expand Down Expand Up @@ -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)

Expand Down Expand Up @@ -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)
}))
}
Expand All @@ -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");
Expand Down Expand Up @@ -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) => {
Expand All @@ -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")
Expand All @@ -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')
Expand All @@ -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');
Expand All @@ -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 {
Expand All @@ -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 : ''
})
})
}
})
Expand All @@ -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: ''
})
})
})
}
Expand Down Expand Up @@ -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')
Expand Down Expand Up @@ -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) {
Expand Down

0 comments on commit c5c0da7

Please sign in to comment.