fix(abc:simple-table): should clean check,radio,filter,sort satus val…

…ues when call reset #610
ng-alain · Aug 3, 2018 · 09d154e · 09d154e
1 parent 192f841
commit 09d154e
Show file tree

Hide file tree

Showing 10 changed files with 139 additions and 103 deletions.
diff --git a/packages/abc/simple-table/demo/basic.md b/packages/abc/simple-table/demo/basic.md
@@ -27,7 +27,7 @@ export class DemoComponent {
     { title: "头像", type: "img", width: "50px", index: "picture.thumbnail" },
     { title: "邮箱", index: "email" },
     { title: "电话", index: "phone" },
-    { title: "注册时间", type: "date", index: "registered" }
+    { title: "注册时间", type: "date", index: "registered.date" }
   ];
 }
 ```
diff --git a/packages/abc/simple-table/demo/checkbox.md b/packages/abc/simple-table/demo/checkbox.md
@@ -10,30 +10,30 @@ import { Component } from '@angular/core';
 import { SimpleTableColumn, SimpleTableData } from '@delon/abc';
 
 @Component({
-    selector: 'app-demo',
-    template: `<simple-table [data]="url" [extraParams]="params" [total]="total" [columns]="columns"
-                [preDataChange]="dataChange" [resReName]="{list: 'results' }"
-                (checkboxChange)="checkboxChange($event)"></simple-table>`
+  selector: 'app-demo',
+  template: `<simple-table [data]="url" [extraParams]="params" [total]="total" [columns]="columns"
+        [preDataChange]="dataChange" [resReName]="{list: 'results' }"
+        (checkboxChange)="checkboxChange($event)"></simple-table>`
 })
 export class DemoComponent {
-    url = `https://randomuser.me/api/?results=3`;
-    params = { a: 1, b: 2 };
-    total = 100;
-    columns: SimpleTableColumn[] = [
-        { title: '编号', index: 'id.value', type: 'checkbox' },
-        { title: '头像', type: 'img', width: '50px', index: 'picture.thumbnail' },
-        { title: '邮箱', index: 'email' },
-        { title: '电话', index: 'phone' },
-        { title: '注册时间', type: 'date', index: 'registered' }
-    ];
-    checkboxChange(list: any[]) {
-        console.log('checkboxChange', list);
-    }
-    dataChange(data: SimpleTableData[]) {
-        return data.map((i: SimpleTableData, index: number) => {
-            i.disabled = index === 0;
-            return i;
-        });
-    }
+  url = `https://randomuser.me/api/?results=3`;
+  params = { a: 1, b: 2 };
+  total = 100;
+  columns: SimpleTableColumn[] = [
+    { title: '编号', index: 'id.value', type: 'checkbox' },
+    { title: '头像', type: 'img', width: '50px', index: 'picture.thumbnail' },
+    { title: '邮箱', index: 'email' },
+    { title: '电话', index: 'phone' },
+    { title: '注册时间', type: 'date', index: 'registered.date' }
+  ];
+  checkboxChange(list: any[]) {
+    console.log('checkboxChange', list);
+  }
+  dataChange(data: SimpleTableData[]) {
+    return data.map((i: SimpleTableData, index: number) => {
+      i.disabled = index === 0;
+      return i;
+    });
+  }
 }
 ```
diff --git a/packages/abc/simple-table/demo/export.md b/packages/abc/simple-table/demo/export.md
@@ -37,7 +37,7 @@ export class DemoComponent {
     { title: '电话', index: 'phone' },
     { title: '数字', index: 'price', type: 'number' },
     { title: '货币', index: 'price', type: 'currency' },
-    { title: '注册时间', type: 'date', index: 'registered' },
+    { title: '注册时间', type: 'date', index: 'registered.date' },
   ];
   // mock export data
   exportData: any[] = Array(10000)

diff --git a/packages/abc/simple-table/demo/form.md b/packages/abc/simple-table/demo/form.md
@@ -10,28 +10,28 @@ import { Component } from '@angular/core';
 import { SimpleTableColumn } from '@delon/abc';
 
 @Component({
-    selector: 'app-demo',
-    template: `
-    <div class="mb-md">
-        <input nz-input [(ngModel)]="params.name" name="name" nzPlaceHolder="请输入姓名" style="width: 100px;">
-        <button nz-button (click)="st.load(1)" [nzType]="'primary'">搜索</button>
-        <button nz-button (click)="params = {}; st.reset()">重置</button>
-    </div>
-    <simple-table #st [data]="url" [extraParams]="params" [total]="total" [columns]="columns"
-                [resReName]="{list: 'results' }"></simple-table>
-    `
+  selector: 'app-demo',
+  template: `
+  <div class="mb-md">
+    <input nz-input [(ngModel)]="params.name" name="name" nzPlaceHolder="请输入姓名" style="width: 100px;">
+    <button nz-button (click)="st.load(1)" [nzType]="'primary'">搜索</button>
+    <button nz-button (click)="params = {}; st.reset()">重置</button>
+  </div>
+  <simple-table #st [data]="url" [extraParams]="params" [total]="total" [columns]="columns"
+        [resReName]="{list: 'results' }"></simple-table>
+  `
 })
 export class DemoComponent {
-    url = `https://randomuser.me/api/?results=3`;
-    params: any = { name: 'asdf' };
-    // mock
-    total = 100;
-    columns: SimpleTableColumn[] = [
-        { title: '编号', index: 'id.value', default: '-' },
-        { title: '头像', type: 'img', width: '50px', index: 'picture.thumbnail' },
-        { title: '邮箱', index: 'email' },
-        { title: '电话', index: 'phone' },
-        { title: '注册时间', type: 'date', index: 'registered' }
-    ];
+  url = `https://randomuser.me/api/?results=3`;
+  params: any = { name: 'asdf' };
+  // mock
+  total = 100;
+  columns: SimpleTableColumn[] = [
+    { title: '编号', index: 'id.value', default: '-' },
+    { title: '头像', type: 'img', width: '50px', index: 'picture.thumbnail' },
+    { title: '邮箱', index: 'email' },
+    { title: '电话', index: 'phone' },
+    { title: '注册时间', type: 'date', index: 'registered.date' }
+  ];
 }
 ```
diff --git a/packages/abc/simple-table/demo/head.md b/packages/abc/simple-table/demo/head.md
@@ -7,13 +7,16 @@ title: 后端筛选和排序
 
 ```ts
 import { Component } from '@angular/core';
-import { SimpleTableColumn, SimpleTableFilter } from '@delon/abc';
+import { SimpleTableColumn } from '@delon/abc';
 
 @Component({
   selector: 'app-demo',
-  template: `<simple-table [data]="url" [extraParams]="params" [total]="total" [columns]="columns"
+  template: `
+  <button nz-button (click)="st.reset()">重置</button>
+  <simple-table #st [data]="url" [extraParams]="params" [total]="total" [columns]="columns"
                 [resReName]="{list: 'results' }"
-                multiSort></simple-table>`,
+                multiSort></simple-table>
+  `,
 })
 export class DemoComponent {
   url = `https://randomuser.me/api/?results=3`;
@@ -26,7 +29,7 @@ export class DemoComponent {
       title: '姓名',
       index: 'name.last',
       format: (item: any) => `${item.name.last} ${item.name.first}`,
-      sorter: (a, b) => true,
+      sorter: () => true,
     },
     {
       title: '国家',
@@ -37,7 +40,7 @@ export class DemoComponent {
         { text: '德国', value: 'DE' },
       ],
       filter: () => true,
-      sorter: (a, b) => true,
+      sorter: () => true,
     },
     {
       title: '性别',
@@ -48,9 +51,9 @@ export class DemoComponent {
       ],
       filterMultiple: false,
       filter: () => true,
-      sorter: (a, b) => true,
+      sorter: () => true,
     },
-    { title: '注册时间', type: 'date', index: 'registered' },
+    { title: '注册时间', type: 'date', index: 'registered.date' },
   ];
 }
 ```
diff --git a/packages/abc/simple-table/demo/radio.md b/packages/abc/simple-table/demo/radio.md
@@ -10,31 +10,31 @@ import { Component } from '@angular/core';
 import { SimpleTableColumn, SimpleTableData } from '@delon/abc';
 
 @Component({
-    selector: 'app-demo',
-    template: `<simple-table [data]="url" [extraParams]="params" [total]="total" [columns]="columns"
-                [preDataChange]="dataChange" [resReName]="{list: 'results' }"
-                (radioChange)="radioChange($event)"></simple-table>`
+  selector: 'app-demo',
+  template: `<simple-table [data]="url" [extraParams]="params" [total]="total" [columns]="columns"
+        [preDataChange]="dataChange" [resReName]="{list: 'results' }"
+        (radioChange)="radioChange($event)"></simple-table>`
 })
 export class DemoComponent {
-    url = `https://randomuser.me/api/?results=3`;
-    params = { a: 1, b: 2 };
-    total = 100;
-    columns: SimpleTableColumn[] = [
-        { title: '编号', index: 'id.value', type: 'radio' },
-        { title: '头像', type: 'img', width: '50px', index: 'picture.thumbnail' },
-        { title: '邮箱', index: 'email' },
-        { title: '电话', index: 'phone' },
-        { title: '注册时间', type: 'date', index: 'registered' }
-    ];
-    radioChange(ret: any) {
-        console.log('radioChange', ret);
-    }
-    dataChange(data: SimpleTableData[]) {
-        return data.map((i: SimpleTableData, index: number) => {
-            i.disabled = index === 0;
-            i.hidden = index === 1;
-            return i;
-        });
-    }
+  url = `https://randomuser.me/api/?results=3`;
+  params = { a: 1, b: 2 };
+  total = 100;
+  columns: SimpleTableColumn[] = [
+    { title: '编号', index: 'id.value', type: 'radio' },
+    { title: '头像', type: 'img', width: '50px', index: 'picture.thumbnail' },
+    { title: '邮箱', index: 'email' },
+    { title: '电话', index: 'phone' },
+    { title: '注册时间', type: 'date', index: 'registered.date' }
+  ];
+  radioChange(ret: any) {
+    console.log('radioChange', ret);
+  }
+  dataChange(data: SimpleTableData[]) {
+    return data.map((i: SimpleTableData, index: number) => {
+      i.disabled = index === 0;
+      i.hidden = index === 1;
+      return i;
+    });
+  }
 }
 ```
diff --git a/packages/abc/simple-table/index.md b/packages/abc/simple-table/index.md
@@ -85,7 +85,7 @@ config: AdSimpleTableConfig
 ----|-----|-----
 `load(pi = 1, extraParams?: any)` | `void` | 根据页码重新加载数据<br>`pi` 指定当前页码，`-1` 表示不重置页码，只对当前页进行刷新，默认：`1`
 `reload(extraParams?: any)` | `void` | 刷新当前页
-`reset(extraParams?: any)` | `void` | 重置且重新设置 `pi` 为 `1`
+`reset(extraParams?: any)` | `void` | 重置且重新设置 `pi` 为 `1`，包含单多选、排序、过滤状态（同默认状态一并清除）
 `clearCheck()` | `void` | 清除所有 `checkbox`
 `clearRadio()` | `void` | 清除所有 `radio`
 `export(urlOrData?: string | any[], opt?: STExportOptions)` | `void` | 导出Excel，确保已经注册 `AdXlsxModule`

diff --git a/packages/abc/simple-table/simple-table.component.html b/packages/abc/simple-table/simple-table.component.html
@@ -38,16 +38,16 @@
               </ng-container>
               <ng-container *ngIf="!c.filterMultiple">
                 <li nz-menu-item *ngFor="let filter of c.filters">
-                  <label nz-radio [ngModel]="filter.checked" (ngModelChange)="filterRadio(c, filter, $event)">{{filter.text}}</label>
+                  <label nz-radio [ngModel]="filter.checked" (ngModelChange)="_filterRadio(c, filter, $event)">{{filter.text}}</label>
                 </li>
               </ng-container>
             </ul>
             <div class="ant-table-filter-dropdown-btns">
               <a class="ant-table-filter-dropdown-link confirm" (click)="c.filterVisible = false">
-                <span (click)="filterConfirm(c)">{{c.filterConfirmText}}</span>
+                <span (click)="_filterConfirm(c)">{{c.filterConfirmText}}</span>
               </a>
               <a class="ant-table-filter-dropdown-link clear" (click)="c.filterVisible = false">
-                <span (click)="filterClear(c)">{{c.filterClearText}}</span>
+                <span (click)="_filterClear(c)">{{c.filterClearText}}</span>
               </a>
             </div>
           </nz-dropdown>
@@ -84,29 +84,29 @@
             <ng-container *ngFor="let btn of c.buttons; let last=last">
               <ng-container *ngIf="btn.iif(i, btn, c)" [ngSwitch]="btn._type">
                 <ng-container *ngSwitchCase="2">
-                  <nz-popconfirm [nzTitle]="btn.popTitle" (nzOnConfirm)="btnClick($event, i, btn)">
-                    <a nz-popconfirm [innerHTML]="btnText(i, btn)"></a>
+                  <nz-popconfirm [nzTitle]="btn.popTitle" (nzOnConfirm)="_btnClick($event, i, btn)">
+                    <a nz-popconfirm [innerHTML]="_btnText(i, btn)"></a>
                   </nz-popconfirm>
                 </ng-container>
                 <ng-container *ngSwitchCase="3">
                   <nz-dropdown>
                     <a class="ant-dropdown-link" nz-dropdown>
-                      <span [innerHTML]="btnText(i, btn)"></span>
+                      <span [innerHTML]="_btnText(i, btn)"></span>
                       <i class="anticon anticon-down"></i>
                     </a>
                     <ul nz-menu>
                       <ng-container *ngFor="let subBtn of btn.children">
                         <li nz-menu-item *ngIf="subBtn.iif(i, subBtn, c)">
-                          <nz-popconfirm *ngIf="subBtn._type === 2" [nzTitle]="subBtn.popTitle" (nzOnConfirm)="btnClick($event, i, subBtn)">
-                            <span nz-popconfirm [innerHTML]="btnText(i, subBtn)"></span>
+                          <nz-popconfirm *ngIf="subBtn._type === 2" [nzTitle]="subBtn.popTitle" (nzOnConfirm)="_btnClick($event, i, subBtn)">
+                            <span nz-popconfirm [innerHTML]="_btnText(i, subBtn)"></span>
                           </nz-popconfirm>
-                          <span *ngIf="subBtn._type !== 2" (click)="btnClick($event, i, subBtn)" [innerHTML]="btnText(i, subBtn)"></span>
+                          <span *ngIf="subBtn._type !== 2" (click)="_btnClick($event, i, subBtn)" [innerHTML]="_btnText(i, subBtn)"></span>
                         </li>
                       </ng-container>
                     </ul>
                   </nz-dropdown>
                 </ng-container>
-                <a *ngSwitchDefault (click)="btnClick($event, i, btn)" [innerHTML]="btnText(i, btn)"></a>
+                <a *ngSwitchDefault (click)="_btnClick($event, i, btn)" [innerHTML]="_btnText(i, btn)"></a>
                 <nz-divider *ngIf="!last" nzType="vertical"></nz-divider>
               </ng-container>
             </ng-container>