From 741b987a33e7637ab90ffffd5367a854f734d0d8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A2=81=E7=81=8F?= <admin@aresn.com>
Date: Mon, 28 Nov 2016 14:23:49 +0800
Subject: [PATCH] update Table

update Table
---
 src/components/table/cell.vue       | 13 +++----
 src/components/table/table-body.vue | 20 +++++++----
 src/components/table/table-head.vue | 25 ++++++++++---
 src/components/table/table.vue      | 55 +++++++++++++++++++++++------
 src/styles/mixins/caret.less        |  4 +++
 test/routers/table.vue              | 21 ++++++-----
 6 files changed, 100 insertions(+), 38 deletions(-)

diff --git a/src/components/table/cell.vue b/src/components/table/cell.vue
index e31c6a63..7b82788f 100644
--- a/src/components/table/cell.vue
+++ b/src/components/table/cell.vue
@@ -1,8 +1,8 @@
 <template>
     <div :class="classes">
-        <template v-if="renderType === 'index'">{{index + 1}}</template>
+        <template v-if="renderType === 'index'">{{naturalIndex + 1}}</template>
         <template v-if="renderType === 'selection'">
-            <Checkbox :checked="checked" @on-change="toggleSelect(index)"></Checkbox>
+            <Checkbox :checked="checked" @on-change="toggleSelect">{{checked}}</Checkbox>
         </template>
         <template v-if="renderType === 'normal'">{{{ row[column.key] }}}</template>
     </div>
@@ -16,7 +16,8 @@
             prefixCls: String,
             row: Object,
             column: Object,
-            index: Number,
+            naturalIndex: Number,    // index of rebuildData
+            index: Number,           // _index of data
             checked: Boolean,
             fixed: Boolean
         },
@@ -62,8 +63,8 @@
                     }
                 }
             },
-            toggleSelect (index) {
-                this.$parent.$parent.toggleSelect(index);
+            toggleSelect () {
+                this.$parent.$parent.toggleSelect(this.index);
             }
         },
         compiled () {
@@ -84,7 +85,7 @@
             this.destroy();
         },
         watch: {
-            index () {
+            naturalIndex () {
                 this.destroy();
                 this.compile();
             }
diff --git a/src/components/table/table-body.vue b/src/components/table/table-body.vue
index 182cb65f..a472d8f5 100644
--- a/src/components/table/table-body.vue
+++ b/src/components/table/table-body.vue
@@ -5,8 +5,8 @@
         </colgroup>
         <tbody :class="[prefixCls + '-tbody']">
             <tr
-                v-for="(index, row) in cloneData"
-                :class="rowClasses(row, index)"
+                v-for="(index, row) in data"
+                :class="rowClasses(index, row._index)"
                 @mouseenter.stop="handleMouseIn(index)"
                 @mouseleave.stop="handleMouseOut(index)"
                 @click.stop="highlightCurrentRow(index)">
@@ -16,8 +16,9 @@
                         :prefix-cls="prefixCls"
                         :row="row"
                         :column="column"
-                        :index="index"
-                        :checked="cloneData[index] && cloneData[index]._isChecked"></Cell>
+                        :natural-index="index"
+                        :index="row._index"
+                        :checked="rowChecked(index, row._index)"></Cell>
                 </td>
             </tr>
         </tbody>
@@ -34,20 +35,27 @@
             prefixCls: String,
             style: Object,
             columns: Array,
+            data: Array,    // rebuildData
             cloneData: Array,
+            objData: Object,
             fixed: Boolean
         },
         methods: {
-            rowClasses (row, index) {
+            rowClasses (index, _index) {
                 return [
                     `${this.prefixCls}-row`,
-                    this.rowClsName(index),
+                    this.rowClsName(_index),
                     {
                         [`${this.prefixCls}-row-highlight`]: this.cloneData[index] && this.cloneData[index]._isHighlight,
                         [`${this.prefixCls}-row-hover`]: this.cloneData[index] && this.cloneData[index]._isHover
                     }
                 ]
             },
+            rowChecked (index, _index) {
+//                const data = this.cloneData.filter(row => row._index === _index);
+//                return data && data._isChecked;
+                return this.objData[_index]._isChecked;
+            },
             setCellWidth (column, index) {
                 return this.$parent.setCellWidth(column, index);
             },
diff --git a/src/components/table/table-head.vue b/src/components/table/table-head.vue
index 224ee168..b1eb2b13 100644
--- a/src/components/table/table-head.vue
+++ b/src/components/table/table-head.vue
@@ -11,8 +11,8 @@
                         <template v-else>
                             {{{ renderHeader(column, $index) }}}
                             <span :class="[prefixCls + '-sort']" v-if="column.sortable">
-                                <i class="ivu-icon ivu-icon-arrow-up-b" @click="handleSortAsc($index)"></i>
-                                <i class="ivu-icon ivu-icon-arrow-down-b" @click="handleSortDesc($index)"></i>
+                                <i class="ivu-icon ivu-icon-arrow-up-b" :class="{on: sortType === 'asc'}" @click="handleSortAsc($index)"></i>
+                                <i class="ivu-icon ivu-icon-arrow-down-b" :class="{on: sortType === 'desc'}" @click="handleSortDesc($index)"></i>
                             </span>
                         </template>
                     </div>
@@ -36,6 +36,11 @@
             cloneData: Array,
             fixed: Boolean
         },
+        data () {
+            return {
+                sortType: 'normal'
+            }
+        },
         computed: {
             isSelectAll () {
                 return !this.cloneData.some(data => !data._isChecked);
@@ -65,10 +70,22 @@
                 this.$parent.selectAll(status);
             },
             handleSortAsc (index) {
-                this.$parent.handleSort(index, 'asc');
+                if (this.sortType === 'asc') {
+                    this.sortType = 'normal';
+                    this.$parent.handleSort(index, 'normal');
+                } else {
+                    this.sortType = 'asc';
+                    this.$parent.handleSort(index, 'asc');
+                }
             },
             handleSortDesc (index) {
-                this.$parent.handleSort(index, 'desc');
+                if (this.sortType === 'desc') {
+                    this.sortType = 'normal';
+                    this.$parent.handleSort(index, 'normal');
+                } else {
+                    this.sortType = 'desc';
+                    this.$parent.handleSort(index, 'desc');
+                }
             }
         }
     }
diff --git a/src/components/table/table.vue b/src/components/table/table.vue
index b789ebad..1c599b97 100644
--- a/src/components/table/table.vue
+++ b/src/components/table/table.vue
@@ -1,4 +1,5 @@
 <template>
+    {{cloneData|json}}
     <div :class="classes" :style="styles">
         <div :class="[prefixCls + '-title']" v-if="showSlotHeader" v-el:title><slot name="header"></slot></div>
         <div :class="[prefixCls + '-header']" v-if="showHeader" v-el:header @mousewheel="handleMouseWheel">
@@ -14,6 +15,8 @@
                 :prefix-cls="prefixCls"
                 :style="tableStyle"
                 :columns="cloneColumns"
+                :data="rebuildData"
+                :obj-data="objData"
                 :clone-data="cloneData"></table-body>
         </div>
         <div :class="[prefixCls + '-fixed']">
@@ -31,6 +34,8 @@
                     :prefix-cls="prefixCls"
                     :style="fixedTableStyle"
                     :columns="leftFixedColumns"
+                    :data="rebuildData"
+                    :obj-data="objData"
                     :clone-data="cloneData"></table-body>
             </div>
         </div>
@@ -49,6 +54,8 @@
                     :prefix-cls="prefixCls"
                     :style="fixedRightTableStyle"
                     :columns="rightFixedColumns"
+                    :data="rebuildData"
+                    :obj-data="objData"
                     :clone-data="cloneData"></table-body>
             </div>
         </div>
@@ -116,7 +123,8 @@
                 columnsWidth: [],
                 prefixCls: prefixCls,
                 compiledUids: [],
-                cloneData: deepCopy(this.data),
+                cloneData: this.makeData(),
+                rebuildData: this.makeData(),    // for sort or filter
                 cloneColumns: deepCopy(this.columns),
                 leftFixedColumns: [],
                 rightFixedColumns: [],
@@ -170,6 +178,13 @@
                 let style = {};
                 if (this.bodyHeight !== 0) style.height = `${this.bodyHeight - 1}px`;
                 return style;
+            },
+            objData () {
+                let objData = {};
+                this.cloneData.forEach((data) => {
+                    objData[data._index] = data;
+                });
+                return objData;
             }
         },
         methods: {
@@ -235,19 +250,27 @@
                 });
                 this.cloneData.$set(index, row);
 
-                const oldData = oldIndex < 0 ? null : JSON.parse(JSON.stringify(this.data[oldIndex]));
-                this.$emit('on-current-change', JSON.parse(JSON.stringify(this.data[index])), oldData);
+                const oldData = oldIndex < 0 ? null : JSON.parse(JSON.stringify(this.data[this.rebuildData[oldIndex]._index]));
+                this.$emit('on-current-change', JSON.parse(JSON.stringify(this.data[this.rebuildData[index]._index])), oldData);
             },
             getSelection () {
                 let selectionIndexes = [];
-                this.cloneData.forEach((data, index) => {
-                    if (data._isChecked) selectionIndexes.push(index);
+                this.cloneData.forEach((data) => {
+                    if (data._isChecked) selectionIndexes.push(data._index);
                 });
-
                 return JSON.parse(JSON.stringify(this.data.filter((data, index) => selectionIndexes.indexOf(index) > -1)));
             },
-            toggleSelect (index) {
-                const status = !this.cloneData[index]._isChecked;
+            toggleSelect (_index) {    // _index
+                let data = {};
+                let index = -1;
+                for (let i = 0; i < this.cloneData.length; i++) {
+                    if (this.cloneData[i]._index === _index) {
+                        data = this.cloneData[i];
+                        index = i;
+                        break;
+                    }
+                }
+                const status = !data._isChecked;
                 const row = this.assignRow(index, {
                     _isChecked: status
                 });
@@ -255,7 +278,7 @@
 
                 const selection = this.getSelection();
                 if (status) {
-                    this.$emit('on-select', selection, JSON.parse(JSON.stringify(this.data[index])));
+                    this.$emit('on-select', selection, JSON.parse(JSON.stringify(this.data[_index])));
                 }
                 this.$emit('on-selection-change', selection);
             },
@@ -317,10 +340,19 @@
             },
             handleSort (index, type) {
                 if (type === 'asc') {
-
+                    this.rebuildData.sort((a, b) => {
+                        return a.age > b.age;
+                    })
                 } else if (type === 'desc') {
 
+                } else if (type === 'normal') {
+                    this.rebuildData = this.makeData();
                 }
+            },
+            makeData () {
+                let data = deepCopy(this.data);
+                data.forEach((row, index) => row._index = index);
+                return data;
             }
         },
         compiled () {
@@ -339,7 +371,8 @@
         watch: {
             data: {
                 handler () {
-                    this.cloneData = deepCopy(this.data);
+                    this.cloneData = this.makeData();
+                    this.rebuildData = this.makeData();
                     this.handleResize();
                 },
                 deep: true
diff --git a/src/styles/mixins/caret.less b/src/styles/mixins/caret.less
index d3217c9c..a3fb4eb8 100644
--- a/src/styles/mixins/caret.less
+++ b/src/styles/mixins/caret.less
@@ -23,6 +23,10 @@
             color: inherit;
         }
 
+        &.on{
+            color: @primary-color;
+        }
+
         &:first-child{
             top: 0;
         }
diff --git a/test/routers/table.vue b/test/routers/table.vue
index 3e100806..3061d882 100644
--- a/test/routers/table.vue
+++ b/test/routers/table.vue
@@ -8,8 +8,7 @@
         <!--<i-table size="large" border stripe :columns="columns" :data="data"></i-table>-->
         <br>
         <i-table
-                width="450"
-                :height="height"
+                width="550"
                 stripe
                 border
                 highlight-row
@@ -38,7 +37,7 @@
                 columns: [
                     {
                         type: 'selection',
-                        width: 50
+                        width: 150
                     },
                     {
                         type: 'index',
@@ -96,7 +95,7 @@
                     },
                     {
                         name: '段模',
-                        age: 26,
+                        age: 21,
                         address: '北京市海淀区',
                         edit: false
                     },
@@ -108,7 +107,7 @@
                     },
                     {
                         name: '胡国伟',
-                        age: 28,
+                        age: 22,
                         address: '北京市西城区',
                         edit: false
                     }
@@ -128,15 +127,15 @@
                 this.$Message.info(this.data[index].name);
             },
             current (newData, oldData) {
-                console.log(newData);
-                console.log(oldData);
+//                console.log(newData);
+//                console.log(oldData);
             },
             select (a,b){
-                console.log(a);
-                console.log(b);
+                console.log(JSON.stringify(b));
+//                console.log(b);
             },
             schange (a) {
-                console.log(a)
+//                console.log(a)
             },
             sall (a) {
                 console.log(a)
@@ -161,7 +160,7 @@
 //                    address: '北京市东城区2',
 //                    edit: false
 //                });
-//                this.data.splice(1, 1)
+//                this.data.splice(0, 1)
 //                this.columns.splice(2,1)
             }, 2000);
         }