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

格式化文件

Browse Source
This commit is contained in:
julyp
2020-05-06 10:02:34 +08:00
parent 250b404fae
commit c5c0da76a3
1 changed files with 104 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

118
lib/core/core.js
View File

@@ -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) => {
@@ -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) {