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-02-07 17:32:19 +08:00
parent c952a55c12
commit b4c3b62b6e
2 changed files with 64 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
examples/index.html
View File

@@ -369,13 +369,16 @@
<script>
new SmartTable({
selector: '#smartTable1',
height: 320
height: 320,
selection: 'radio',
})
new SmartTable({
selector: '#smartTable2',
align: 'left',
height: 320,
size: 'middle'
size: 'middle',
selection: 'checkbox',
selectionKey: 1,
})
new SmartTable({
selector: '#smartTable3',

69
lib/core/core.js
View File

@@ -63,6 +63,7 @@ export default function initMixin(Table) {
vm.options = options
vm.gutterWidth = scrollBarWidth()
vm.style = {
radioBgColor: options.radioBgColor || '#D1E7FF',
hoverBgColor: options.hoverBgColor || '#EFF8FF'
}
vm.size = {}
@@ -97,7 +98,7 @@ export default function initMixin(Table) {
function layout(vm, table) {
const { $root, $thead, $tbody, options } = vm;
const { height } = options;
const { height, selection } = options;
querySelectorAll($thead, "th").forEach(cell => refactorCell(cell))
querySelectorAll($tbody, "td").forEach(cell => refactorCell(cell))
@@ -178,7 +179,7 @@ function bindResizeEvents(vm) {
function bindEvents(vm) {
bindScrollEvents(vm);
bindHoverEvents(vm);
bindRowEvents(vm);
vm.options.expand ? bindExpandEvents(vm) : bindSortEvents(vm);
bindResizeEvents(vm);
}
@@ -276,17 +277,65 @@ function bindScrollEvents(vm) {
})
}
function bindHoverEvents(vm) {
let data = [].concat(vm.data, vm.unsortData)
data.forEach(row => {
addHoverEventByEl(vm, row.$el, [row.$fixedLeftEl, row.$fixedRightEl])
row.$fixedLeftEl && addHoverEventByEl(vm, row.$fixedLeftEl, [row.$el, row.$fixedRightEl])
row.$fixedRightEl && addHoverEventByEl(vm, row.$fixedRightEl, [row.$el, row.$fixedLeftEl])
function bindRowEvents(vm) {
const { selection, selectionKey } = vm.options;
[].concat(vm.data, vm.unsortData).forEach(row => {
addHoverEvent(vm, row.$el, [row.$fixedLeftEl, row.$fixedRightEl])
row.$fixedLeftEl && addHoverEvent(vm, row.$fixedLeftEl, [row.$el, row.$fixedRightEl])
row.$fixedRightEl && addHoverEvent(vm, row.$fixedRightEl, [row.$el, row.$fixedLeftEl])
if (selection === 'radio') {
let value = row['field-' + (selectionKey || 0)]
addRadioEvent(vm, row.$el, [row.$fixedLeftEl, row.$fixedRightEl], value)
row.$fixedLeftEl && addRadioEvent(vm, row.$fixedLeftEl, [row.$el, row.$fixedRightEl], value)
row.$fixedRightEl && addRadioEvent(vm, row.$fixedRightEl, [row.$el, row.$fixedLeftEl], value)
}
})
}
function addHoverEventByEl(vm, trigger, relates) {
function addRadioEvent(vm, trigger, relates, radioValue) {
if (!trigger) return;
trigger.addEventListener('click', () => {
let { selected } = vm;
if (selected !== radioValue) {
selected = radioValue;
querySelectorAll(vm.$root, 'tr[checked]>td').forEach(item => styled(item, { background: '' }))
querySelectorAll(vm.$root, 'tr[checked]').forEach(item => removeAttribute(item, "checked"))
setAttribute(trigger, "checked", true)
trigger.querySelectorAll("td").forEach(column => {
styled(column, { background: vm.style.radioBgColor })
})
relates.forEach(item => {
if (item) {
setAttribute(item, "checked", true)
item.querySelectorAll("td").forEach(column => {
styled(column, { background: vm.style.radioBgColor })
})
}
})
} else {
if (hasAttribute(trigger, "checked")) {
selected = null;
removeAttribute(trigger, "checked");
trigger.querySelectorAll("td").forEach(column => {
styled(column, { background: '' })
})
relates.forEach(item => {
if (item) {
removeAttribute(item, "checked")
item.querySelectorAll("td").forEach(column => {
styled(column, { background: '' })
})
}
})
}
}
selected ? setAttribute(vm.$root, 'selected', selected) : removeAttribute(vm.$root, 'selected');
vm.selected = selected;
})
}
function addHoverEvent(vm, trigger, relates) {
if (!trigger) return;
trigger.addEventListener('mouseenter', () => {
styled(trigger, { background: vm.style.hoverBgColor })