- 增加单选功能

examples/index.html

@@ -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',

lib/core/core.js

@@ -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) {
+function bindRowEvents(vm) {
-  let data = [].concat(vm.data, vm.unsortData)
+  const { selection, selectionKey } = vm.options;
-  data.forEach(row => {
+  [].concat(vm.data, vm.unsortData).forEach(row => {
-    addHoverEventByEl(vm, row.$el, [row.$fixedLeftEl, row.$fixedRightEl])
+    addHoverEvent(vm, row.$el, [row.$fixedLeftEl, row.$fixedRightEl])
-    row.$fixedLeftEl && addHoverEventByEl(vm, row.$fixedLeftEl, [row.$el, row.$fixedRightEl])
+    row.$fixedLeftEl && addHoverEvent(vm, row.$fixedLeftEl, [row.$el, row.$fixedRightEl])
-    row.$fixedRightEl && addHoverEventByEl(vm, row.$fixedRightEl, [row.$el, row.$fixedLeftEl])
+    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 })