- 新增动态展开数据行

README.md

@@ -25,6 +25,7 @@
   - 树形结构
   - 单选
   - 多选
+  - 开展动态行
 
 ## 体验
 可直接访问https://peng92055.github.io/smart-table
@@ -69,9 +70,9 @@
       height: 300,
       align: 'left',
       size: 'middle',
-      selection: 'radio',
       selectionKey: 1,
       expandCallback: function(slot, value) {
+        //模拟异步 可直接写同步代码
         setTimeout(function() {
           var content = "<span>我是展开内容第一次,当前展开的值为：" + value + "</span>"
           slot.open(content, true) //第二个参数为是否需要parseDom 当传递的content为字符串时，该值必须传递true

examples/index.html

@@ -488,7 +488,6 @@
     new SmartTable({
       selector: '#smartTable4',
       height: 320,
-      selection: 'radio',
       expandCallback: function(slot, value) {
         setTimeout(function() {
           var content = "<span>我是展开内容第一次,当前展开的值为：" + value + "</span>"
@@ -497,7 +496,7 @@
           var content2 = document.createElement("span")
           content2.innerText = "我是展开内容第二次,当前展开的值为：" + value
           slot.open(content2)
-        })
+        }, 2000)
       }
     })
   </script>

lib/core/core.js

@@ -355,13 +355,14 @@ function addExpandTriggerEvent(vm, row, key, value) {
   const trigger = querySelector(row, ".expand-cell>.stb_cell")
   if (!trigger) return;
   trigger.addEventListener('click', ($event) => {
+    if (trigger.hasAttribute("loading")) return;
     if (trigger.hasAttribute("open")) {
       removeAttribute(trigger, "open")
       querySelectorAll(vm.$root, "tr.expand-" + key).forEach(expandRow => {
         removeChild(expandRow.parentNode, expandRow)
       })
     } else {
-      setAttribute(trigger, "open")
+      setAttribute(trigger, "loading", true)
       options.expandCallback.call(this, {
         open: function(content, needParse) {
           let cell = createElement("td")
@@ -372,6 +373,8 @@ function addExpandTriggerEvent(vm, row, key, value) {
           let expandRow = createElement("tr", `std-expand-row expand-${key}`)
           appendChild(expandRow, cell)
           insertBefore(row.parentNode, expandRow, row.nextSibling)
+          setAttribute(trigger, "open")
+          removeAttribute(trigger, "loading")
         }
       }, value)
     }
@@ -496,6 +499,9 @@ function bindSortEvents(vm) {
       querySelectorAll(vm.$root, ".expand-cell>.stb_cell[open]").forEach(el => {
         removeAttribute(el, "open")
       })
+      querySelectorAll(vm.$root, ".expand-cell>.stb_cell[loading]").forEach(el => {
+        removeAttribute(el, "loading")
+      })
       sort(vm, getAttribute(el, "sortkey"), sortType, sortOrder)
     })
   })

lib/index.scss

@@ -79,6 +79,20 @@
           transform: rotate(90deg);
         }
       }
+      &[loading] {
+        .expand-trigger {
+          margin-left: 0;
+          width: 1em;
+          height: 1em;
+          border-color: none;
+          transform-origin: center;
+          border: .2em solid transparent;
+          border-left-color: currentcolor;
+          border-right-color: currentcolor;
+          border-radius: 50%;
+          animation: 1s loading linear infinite;
+        }
+      }
     }
     &.stripe {
       tr:nth-child(2n) {
@@ -321,4 +335,24 @@
   * {
     box-sizing: border-box;
   }
+  @-webkit-keyframes loading {
+    0% {
+      -webkit-transform: rotate(0deg);
+      transform: rotate(0deg);
+    }
+    100% {
+      -webkit-transform: rotate(360deg);
+      transform: rotate(360deg);
+    }
+  }
+  @keyframes loading {
+    0% {
+      -webkit-transform: rotate(0deg);
+      transform: rotate(0deg);
+    }
+    100% {
+      -webkit-transform: rotate(360deg);
+      transform: rotate(360deg);
+    }
+  }
 }