feat(table): table sort auto and loading

Closes #12

doc/components/component/data/view/table.vue

@@ -9,6 +9,12 @@
     <h3>TableItem定义模式</h3>
     <example demo="view/table2"></example>
 
+    <h3>排序与加载</h3>
+    <p>给<code>Column</code>设置<code>sort</code>为true，则使用自定义排序，根据sort事件对数据做出调整。</p>
+    <p>给<code>Column</code>设置<code>sort</code>为<code>auto</code>，则可以默认使用数据排序</p>
+    <p>使用<code>loading</code>可以设置数据的加载效果</p>
+    <example demo="view/table5"></example>
+
     <h3>Table open/hide row</h3>
     <p>给行数据 data 的某项设置 <code>_expand</code> 为 true，可以默认展开当前行</p>
     <example demo="view/table6"></example>
@@ -142,8 +148,8 @@
       <tr>
         <td>sort</td>
         <td>是否添加排序触发</td>
-        <td>Boolean</td>
-        <td>-</td>
+        <td>Boolean, String</td>
+        <td>true/auto</td>
         <td>false</td>
       </tr>
     </table>

doc/components/demos/view/table1.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <Table :datas="datas" :columns="columns" @sort="triggerSort">
+    <Table :datas="datas" :columns="columns">
       <div slot="empty">自定义提醒：暂时无数据</div>
     </Table>
   </div>
@@ -11,30 +11,21 @@ export default {
   data() {
     return {
       columns: [
-        { title: '序号', prop: '$index', width: 100 },
-        { title: 'ID', prop: 'id', width: 100, sort: true },
-        { title: '姓名', prop: 'name', sort: true },
-        { title: '年龄', prop: 'age', sort: true },
-        { title: '地址', prop: 'address' },
+        { title: 'Index', prop: '$index', width: 100 },
+        { title: 'ID', prop: 'id', width: 100, sort: 'auto' },
+        { title: 'Name', prop: 'name', sort: 'auto' },
+        { title: 'Age', prop: 'age', sort: 'auto' },
+        { title: 'Address', prop: 'address' },
       ],
       datas: [
-        { id: 5, name: '测试5', age: 12, address: "上海" },
-        { id: 6, name: '测试6', age: 13, address: "上海" },
+        { id: 5, name: '测试5', age: 9, address: "上海" },
+        { id: 6, name: '测试6', age: 8, address: "上海" },
         { id: 7, name: '测试7', age: 14, address: "上海" },
         { id: 5, name: '测试5', age: 17, address: "上海" },
         { id: 6, name: '测试6', age: 18, address: "上海" },
         { id: 7, name: '测试7', age: 12, address: "上海" },
       ]
     }
-  },
-  methods: {
-    triggerSort(data) {
-      this.datas.sort((a, b)=>{
-        let ad = a[data.prop], bd = b[data.prop];
-        let index = ad == bd ? 0 : (ad > bd) ? 1 : -1;
-        return data.type == 'asc' ? index: -index;
-      })
-    }
   }
 }
 </script>

doc/components/demos/view/table2.vue

@@ -1,29 +1,14 @@
 <template>
   <div>
-    <p>
-      <button class="h-btn h-btn-s h-btn-blue"
-              @click="add(datas)"><i class="h-icon-plus"></i><span>添加一行</span></button>
-    </p>
-    <Table :datas="datas" stripe checkbox @sort="triggerSort">
-      <TableItem title="序号" :tooltip="true"><template slot-scope="props">{{props.index}}</template></TableItem>
-      <TableItem title="姓名1" prop="name" :tooltip="true" :sort="true"></TableItem>
-      <TableItem title="年龄2" prop="age" :tooltip="true" content="测试" placement="right"></TableItem>
-      <TableItem title="地址" align="center">
+    <p> <Button color="blue" icon="h-icon-plus" @click="add(datas)">添加一行</Button></p>
+    <Table :datas="datas" stripe checkbox>
+      <TableItem title="Index" :tooltip="true"><template slot-scope="props">{{props.index}}</template></TableItem>
+      <TableItem title="Name" prop="name" sort="auto"></TableItem>
+      <TableItem title="Age" prop="age"></TableItem>
+      <TableItem title="Address" align="center" prop="address"></TableItem>
+      <TableItem title="Operate" :width="100">
         <template slot-scope="props">
-          <div v-tooltip>{{props.data.address}}</div>
-        </template>
-      </TableItem>
-      <TableItem title="操作" :width="100">
-        <template slot-scope="props">
-          <DropdownCustom :datas="menus" placement="bottom-end">
-            <span class="text-hover">更多</span>
-            <div slot="content" v-width="200">
-              <div v-padding="20">
-                <img :width="80" :height="80" style="border-radius:80px;float:left" src="http://www.ch-un.com/images/head.jpg">
-                <div style="height:80px;margin-left:90px;line-height:80px;">LAN</div>
-              </div>
-            </div>
-          </DropdownCustom>
+          <DropdownMenu :datas="menus" placement="bottom-end" className="h-text-dropdown">操作</DropdownMenu>
         </template>
       </TableItem>
       <div slot="empty">自定义提醒：暂时无数据</div>
@@ -60,13 +45,6 @@ export default {
     },
     onselect(data) {
       log(data);
-    },
-    triggerSort(data) {
-      this.datas.sort((a, b)=>{
-        let ad = a[data.prop], bd = b[data.prop];
-        let index = ad == bd ? 0 : (ad > bd) ? 1 : -1;
-        return data.type == 'asc' ? index: -index;
-      })
     }
   }
 }

doc/components/demos/view/table5.vue

@@ -1,17 +1,7 @@
 <template>
   <div>
-    <p>
-      <button class="h-btn h-btn-s h-btn-blue"
-              @click="add(datas)"><i class="h-icon-plus"></i><span>添加一行</span></button>
-    </p>
-    <Table :datas="datas" :columns="columns" checkbox>
-      <template slot-scope="props">
-        <td>{{props.index}}</td>
-        <td>{{props.data.id}}</td>
-        <td>{{props.data.name}}</td>
-        <td>{{props.data.age}}</td>
-        <td>{{props.data.address}}</td>
-      </template>
+    <p><hSwitch v-model="loading">loading</hSwitch></p>
+    <Table :datas="datas" :loading="loading" :columns="columns" @sort="triggerSort">
       <div slot="empty">自定义提醒：暂时无数据</div>
     </Table>
   </div>
@@ -21,29 +11,37 @@
 export default {
   data() {
     return {
+      loading: false,
       columns: [
-        { title: '序号', width: 100},
-        { title: 'ID', width: 100, tooltip: true },
-        { title: '姓名', tooltip: true, content: '测试'},
-        { title: '年龄' },
-        { title: '地址' },
+        { title: 'Index', prop: '$index', width: 100 },
+        { title: 'ID', prop: 'id', width: 100, sort: true },
+        { title: 'Name', prop: 'name', sort: true },
+        { title: 'Age', prop: 'age', sort: true },
+        { title: 'Address', prop: 'address' },
       ],
       datas: [
-        { id: 5, name: '测试5', age: 12, address: "上海" },
-        { id: 6, name: '测试6', age: 12, address: "上海" },
-        { id: 7, name: '测试7', age: 12, address: "上海" },
-        { id: 5, name: '测试5', age: 12, address: "上海" },
-        { id: 6, name: '测试6', age: 12, address: "上海" },
+        { id: 5, name: '测试5', age: 9, address: "上海" },
+        { id: 6, name: '测试6', age: 8, address: "上海" },
+        { id: 7, name: '测试7', age: 14, address: "上海" },
+        { id: 5, name: '测试5', age: 17, address: "上海" },
+        { id: 6, name: '测试6', age: 18, address: "上海" },
         { id: 7, name: '测试7', age: 12, address: "上海" },
       ]
     }
   },
   methods: {
-    remove(datas, data) {
-      datas.splice(datas.indexOf(data), 1);
+    loadData() {
+      this.loading = true;
+      setTimeout(()=>{
+        this.loading = false;
+      }, 5000);
     },
-    add(datas) {
-      datas.push({ id: 7, name: '添加', age: 12, address: "然后添加的" });
+    triggerSort(data) {
+      this.datas.sort((a, b)=>{
+        let ad = a[data.prop], bd = b[data.prop];
+        let index = ad == bd ? 0 : (ad > bd) ? 1 : -1;
+        return data.type == 'asc' ? index: -index;
+      })
     }
   }
 }

doc/components/demos/view/table7.vue

@@ -18,11 +18,11 @@ export default {
   data() {
     return {
       columns: [
-        { title: '序号', prop: '$index', width: 100 , tooltip: true, placement: 'top-start', content: '<div class="table-tr-tooltip">序号<hr>说明：数据的序列号</div>'},
+        { title: 'Index', prop: '$index', width: 100 , tooltip: true, placement: 'top-start', content: '<div class="table-tr-tooltip">序号<hr>说明：数据的序列号</div>'},
         { title: 'ID', prop: 'id', width: 100, tooltip: true, placement: 'top-start', content: '<div class="table-tr-tooltip">ID<hr>说明：数据的唯一ID</div>' },
-        { title: '姓名', prop: 'name', tooltip: true, placement: 'top-start', content: '<div class="table-tr-tooltip">姓名<hr>说明：用户的姓名</div>' },
-        { title: '年龄', prop: 'age', tooltip: true, placement: 'top-start', content: '<div class="table-tr-tooltip">年龄<hr>说明：用户的年龄</div>' },
-        { title: '地址', prop: 'address', tooltip: true, placement: 'top-start', content: '<div class="table-tr-tooltip">地址<hr>说明：用户的地址</div>' },
+        { title: 'Name', prop: 'name', tooltip: true, placement: 'top-start', content: '<div class="table-tr-tooltip">姓名<hr>说明：用户的姓名</div>' },
+        { title: 'Age', prop: 'age', tooltip: true, placement: 'top-start', content: '<div class="table-tr-tooltip">年龄<hr>说明：用户的年龄</div>' },
+        { title: 'Address', prop: 'address', tooltip: true, placement: 'top-start', content: '<div class="table-tr-tooltip">地址<hr>说明：用户的地址</div>' },
       ],
       datas: [
         { id: 5, name: '测试5', age: 12, address: "上海" },

doc/components_en/component/data/view/table.vue

@@ -9,6 +9,12 @@
     <h3>TableItem definition mode</h3>
     <example demo="view/table2"></example>
 
+    <h3>Sort and loading</h3>
+    <p>Set <code>sort</code> to <code>true</code> for Column, then use custom sort to adjust data according to sort event.</p>
+    <p>Set <code>sort</code> to <code>auto</code> for Column, you can use data sorting by default.</p>
+    <p>use <code>loading</code> to set up the load effect of the data.</p>
+    <example demo="view/table5"></example>
+
     <h3>Table open/hide row</h3>
     <p>To a setting rows of data <code>_expand</code> is true, the current row can be expanded by default</p>
     <example demo="view/table6"></example>
@@ -142,8 +148,8 @@
       <tr>
         <td>sort</td>
         <td>Whether to add sort trigger</td>
-        <td>Boolean</td>
-        <td>-</td>
+        <td>Boolean, String</td>
+        <td>true/auto</td>
         <td>false</td>
       </tr>
     </table>

doc/css/var.less

@@ -1,3 +1,7 @@
 @import (less) "../../themes/var.less";
 
-@primary-color: #3FC97A;
+@primary-color: #3FC97A;
+
+
+//hover
+@hover-background-color: #edfff4;

src/components/table/table-item.vue

@@ -1,11 +1,20 @@
 <template>
   <th :class="cls" @click="triggerSort()">
-    <div v-if="tooltip" v-tooltip :placement="placement" :content="content || title">{{title}}</div>
-    <div v-else>{{title}}</div>
-    <div class="h-table-sort-handler" v-if="sort">
-      <div class="h-table-sort-asc" v-if="sortStatus.type == 'asc' && sortStatus.prop == prop" :class="{'sort-selected': sortStatus.type == 'asc' && sortStatus.prop == prop}"><i class="h-icon-top"></i></div>
-      <div class="h-table-sort-desc" v-else :class="{'sort-selected': sortStatus.type == 'desc' && sortStatus.prop == prop}"><i class="h-icon-down"></i></div>
+    <div v-if="tooltip" v-tooltip :placement="placement" :content="content || title">
+      <span>{{title}}</span>
+      <span class="h-table-sort-handler" v-if="sort">
+        <span class="h-table-sort-asc" v-if="sortStatus.type == 'asc' && sortStatus.prop == prop" :class="{'sort-selected': sortStatus.type == 'asc' && sortStatus.prop == prop}"><i class="h-icon-top"></i></span>
+        <span class="h-table-sort-desc" v-else :class="{'sort-selected': sortStatus.type == 'desc' && sortStatus.prop == prop}"><i class="h-icon-down"></i></span>
+      </span>
     </div>
+    <div v-else>
+      <span>{{title}}</span>
+      <span class="h-table-sort-handler" v-if="sort">
+        <span class="h-table-sort-asc" v-if="sortStatus.type == 'asc' && sortStatus.prop == prop" :class="{'sort-selected': sortStatus.type == 'asc' && sortStatus.prop == prop}"><i class="h-icon-top"></i></span>
+        <span class="h-table-sort-desc" v-else :class="{'sort-selected': sortStatus.type == 'desc' && sortStatus.prop == prop}"><i class="h-icon-down"></i></span>
+      </span>
+    </div>
+
   </th>
 </template>
 
@@ -25,7 +34,7 @@ export default {
       default: false
     },
     sort: {
-      type: Boolean,
+      type: [Boolean, String],
       default: false
     },
     placement: String,
@@ -68,16 +77,16 @@ export default {
   methods: {
     triggerSort() {
       if(!this.sort) return false;
-      let sort = utils.copy(this.sortStatus);
+      let sortStatus = utils.copy(this.sortStatus);
       if(this.sortStatus.type && this.sortStatus.prop == this.prop) {
-        sort.type = this.sortStatus.type == 'asc' ? 'desc' : 'asc';
+        sortStatus.type = this.sortStatus.type == 'asc' ? 'desc' : 'asc';
       } else {
-        sort.type = 'desc';
-        sort.prop = this.prop
+        sortStatus.type = 'desc';
+        sortStatus.prop = this.prop
       }
       let parent = this.$parent;
       if (parent.$options._componentTag == 'Table' || parent.$options._componentTag == 'h-table') {
-        this.sortStatus = parent.triggerSort(sort);
+        this.sortStatus = parent.triggerSort(sortStatus, this.sort);
       }
     },
     init() {

src/components/table/table.vue

@@ -12,7 +12,7 @@
           </th>
           <slot v-if="!columns.length&&!$scopedSlots.default" ></slot>
           <template v-else>
-            <TableTh v-for="(c, index) of computeColumns" :key="index+update.columns" v-bind="c" :sortStatus="sortStatus" ></TableTh>
+            <TableTh v-for="(c, index) of computeColumns" :key="index+update.columns" v-bind="c" ></TableTh>
           </template>
         </tr>
       </table>
@@ -104,6 +104,7 @@
         </tr>
       </table>
     </div>
+    <Loading :loading="loading"></Loading>
   </div>
 </template>
 <script>
@@ -136,6 +137,10 @@ export default {
     stripe: {
       type: Boolean,
       default: false
+    },
+    loading: {
+      type: Boolean,
+      default: false
     }
   },
   data() {
@@ -277,11 +282,18 @@ export default {
       this.sortStatus.prop = null;
       this.sortStatus.type = null;
     },
-    triggerSort(data){
-      // log(1)
-      this.sortStatus.prop = data.prop;
-      this.sortStatus.type = data.type;
-      this.$emit('sort', utils.copy(data));
+    triggerSort(sortStatus, triggerType){
+      this.sortStatus.prop = sortStatus.prop;
+      this.sortStatus.type = sortStatus.type;
+      if (triggerType === true) {
+        this.$emit('sort', utils.copy(sortStatus));
+      } else if (triggerType == 'auto'){
+        this.datas.sort((a, b)=>{
+          let ad = a[sortStatus.prop], bd = b[sortStatus.prop];
+          let index = ad == bd ? 0 : (ad > bd) ? 1 : -1;
+          return sortStatus.type == 'asc' ? index: -index;
+        })
+      }
       return this.sortStatus;
     },
     setSelection(data) {

themes/components/table.less

@@ -131,23 +131,21 @@
     box-sizing: border-box;
     padding: 20px;
   }
-
   &-sort-handler{
-    position: absolute;
-    .middle-right;
-    right: 5px;
-    font-size: 14px;
+    display: inline-block;
     line-height: 1;
+    vertical-align: middle;
+    font-size: 12px;
     color: @gray1-color;
     transition: color @transition-time;
     th:hover &{
       color: @gray-color;
     }
-    >div{
+    >span{
       cursor: pointer;
-      &:hover {
-        color: @dark-color;
-      }
+      // &:hover {
+      //   color: @dark-color;
+      // }
       &.sort-selected{
         color: @primary-color;
       }