Merge pull request #216 from kaola-fed/hotfix_KLTable

[KLTable] hiding column using template syntax
kaola-fed · Aug 14, 2017 · bba5f71 · bba5f71
2 parents 58d28f0 + 27ecc60
commit bba5f71
Show file tree

Hide file tree

Showing 3 changed files with 105 additions and 26 deletions.
diff --git a/src/js/components/layout/KLTable/KLTableCol/index.js b/src/js/components/layout/KLTable/KLTableCol/index.js
@@ -32,6 +32,8 @@ const KLTableCol = Component.extend({
       _innerColumns: [],
       colSpan: 1,
       custom: data,
+      columnData: {},
+      outerColumns: [],
     });
   },
   init() {
@@ -47,38 +49,67 @@ const KLTableCol = Component.extend({
   },
   _register2Table() {
     const _outer = this.$outer;
+    this.data.outerColumns = _outer.data.columns;
     this._push2Columns(_outer.data.columns);
   },
   _register2TableCol() {
     const _outer = this.$outer;
+    this.data.outerColumns = _outer.data._innerColumns;
     this._push2Columns(_outer.data._innerColumns);
   },
   _push2Columns(columns) {
     const data = this.data;
-    columns &&
-      columns.push(_.extend({
-        name: data.name,
-        key: data.key,
-        type: data.type,
-        width: data.width,
-        tip: data.tip,
-        tdClass: data.tdClass,
-        thClass: data.thClass,
-        sortable: data.sortable,
-        expandable: data.expandable,
-        children: data._innerColumns,
-        align: data.align,
-        fixed: data.fixed,
+    const index = +data.index;
 
-        filter: data.filter,
-        template: data._template || data.template,
-        formatter: data.formatter,
-        format: data.format,
-        headerTemplate: data._headerTemplate || data.headerTemplate,
-        headerFormatter: data.headerFormatter,
-        headerFormat: data.headerFormat,
-        expandTemplate: data._expandTemplate,
-      }, data.custom));
+    data.columnData = this.createColumnData(data);
+
+    if (columns) {
+      let insertIndex = -1;
+      columns.some((item, i) => {
+        if (index < item.index) {
+          insertIndex = i;
+          return true;
+        }
+        return false;
+      });
+      if (insertIndex !== -1) {
+        columns.splice(insertIndex, 0, data.columnData);
+      } else {
+        columns && columns.push(data.columnData);
+      }
+    }
+  },
+  createColumnData(data) {
+    return _.extend({
+      name: data.name,
+      key: data.key,
+      index: +data.index,
+      type: data.type,
+      width: +data.width,
+      tip: data.tip,
+      tdClass: data.tdClass,
+      thClass: data.thClass,
+      sortable: data.sortable,
+      expandable: data.expandable,
+      children: data._innerColumns,
+      align: data.align,
+      fixed: data.fixed,
+
+      filter: data.filter,
+      template: data._template || data.template,
+      formatter: data.formatter,
+      format: data.format,
+      headerTemplate: data._headerTemplate || data.headerTemplate,
+      headerFormatter: data.headerFormatter,
+      headerFormat: data.headerFormat,
+      expandTemplate: data._expandTemplate,
+    }, data.custom);
+  },
+  destroy() {
+    const data = this.data;
+    const index = data.outerColumns.indexOf(data.columnData);
+    data.outerColumns.splice(index, 1);
+    this.supr();
   },
 }).component('kl-table-tempalte', KLTableTemplate);
 

diff --git a/src/js/components/layout/KLTable/index.js b/src/js/components/layout/KLTable/index.js
@@ -169,7 +169,7 @@ const KLTable = Component.extend({
 
     this._onBodyScroll = u.throttle(this._onBodyScroll.bind(this), 16);
 
-    this._onWindowScroll = u.throttle(this._onWindowScroll.bind(this), 300);
+    this._onWindowScroll = u.throttle(this._onWindowScroll.bind(this), 50);
     this._getScrollParentNode().addEventListener('scroll', this._onWindowScroll);
 
     this._onWindowResize = u.throttle(this._onWindowResize.bind(this), 50);

diff --git a/src/js/components/layout/KLTable/index.md b/src/js/components/layout/KLTable/index.md
@@ -477,7 +477,7 @@ var component = new NEKUI.Component({
 
 ### 多选
 
-通过 `enableCheckAll`
+通过 `enableCheckAll` 使能全选按钮
 
 <!-- demo_start -->
 <div class="m-example"></div>
@@ -514,6 +514,55 @@ var component = new NEKUI.Component({
 ```
 <!-- demo_end -->
 
+### 隐藏列
+
+需要通过 `index` 指定顺序，否则会乱序。
+
+<!-- demo_start -->
+<div class="m-example"></div>
+
+```xml
+<kl-table source={table.source} >
+    {#if col[0]}
+    <kl-table-col index=1 placeholder="" width=200 />
+    {/if}
+    {#if col[1]}
+    <kl-table-col index=2 name="title" key="title" width=200 />
+    {/if}
+    {#if col[2]}
+    <kl-table-col index=3 name="value" key="value" width=200 />
+    {/if}
+</kl-table>
+{#list [0,1,2] as index}
+<kl-button title={'col'+index} on-click={this.toggle(index)}/>
+{/list}
+```
+
+```javascript
+var component = new NEKUI.Component({
+    template: template,
+    data: {
+        table: {
+            source: []
+        },
+        col: [1, 1, 1]
+    },
+    init: function() {
+        this.data.table.source = [];
+        for(var i = 0; i < 3; ++i) {
+            this.data.table.source.push({
+                title: 'test' + i,
+                value: 10 * i
+            });
+        }
+    },
+    toggle: function(index) {
+        this.data.col[index] = !this.data.col[index];
+    }
+});
+```
+<
+
 ### 数据配置
 
 在进行数据配置时，模版的配置方式更为灵活。
@@ -704,4 +753,3 @@ var component = new NEKUI.Component({
 });
 ```
 <!-- demo_end -->
-