表格组件基本功能

src/assets/simulate-data/data.json

@@ -17,7 +17,8 @@
         "fullName": "测试  数据fullName",
         "name": "测试数据",
         "id": 199,
-        "code": "1231234"
+        "code": "1231234",
+        "lock": true
 
     },{
         "userJzts": [{
@@ -27,7 +28,8 @@
         "fullName": "测试数据fullName",
         "name": "测试数据",
         "id": "11",
-        "code": "1231234TDSFFASDTKYUK67"
+        "code": "1231234TDSFFASDTKYUK67",
+        "lock": true
 
     },{
         "userJzts": [{

src/custom-components/ui-grid/grid-icon.component.ts

@@ -0,0 +1,69 @@
+import {
+  Component,
+  Input,
+  OnInit,
+  NgModule,
+} from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+
+@Component({
+  selector     : 'grid-icon',
+  template     : `
+    <img *ngIf="field=='taskId' && data['tmail']" src="/assets/custom-img/mao-order.png" alt="天猫订单" width="15" />
+    <a *ngIf="field=='abnormalNum' && data['lock']" href="javascript:void(0);" title="锁定" class="operation-a operation-lock"><i></i></a>
+    <a *ngIf="field=='abnormalNum' && !data['lock']" href="javascript:void(0);" title="未锁定" class="operation-a operation-unlock"><i></i></a>
+  `,
+  styles   : [`
+    .column-link{
+      text-decoration:underline;
+      color: rgba(0, 0, 0,0.65);
+    }
+
+    a.operation-a {
+      display: inline-block;
+      height: 38px;
+      line-height: 38px;
+      text-align: left;
+      color: #728597;
+    }
+    a.operation-a>i {
+      width: 15px;
+      height: 15px;
+      display: inline-block;
+      margin-right: 5px;
+      vertical-align: middle;
+    }
+    a.operation-unlock>i {
+      background: url(/assets/custom-img/operation.png) no-repeat -1px -120px;
+      background-size: 122px;
+    }
+    a.operation-lock>i {
+      background: url(/assets/custom-img/operation.png) no-repeat 0px -49px;
+      background-size: 122px;
+    }
+  `]
+})
+export class GridIconComponent {
+
+  @Input() field = '';
+  @Input() data = {};
+
+  constructor() {}
+
+  ngOnInit() {}
+
+}
+
+@NgModule({
+    imports: [
+      CommonModule,
+      FormsModule,
+    ],
+    declarations: [
+        GridIconComponent
+    ],
+    exports: [GridIconComponent]
+})
+export class GridIconModule { }

src/custom-components/ui-grid/share/grid-util.service.ts

@@ -1,6 +1,6 @@
 export interface ColumnInter {
     field: string;
-    [propName:string]:any;
+    [propName: string]: any;
 }
 
 import { Injectable } from "@angular/core";
@@ -26,4 +26,84 @@ export class GridUtilService {
         }
         return key;
     }
+
+    /**
+     * 深克隆
+     * @param obj 传入需要克隆的对象
+     */
+    cloneDeep(obj) {
+        let str, newobj = obj.constructor === Array ? [] : {};
+        if (typeof obj !== 'object') {
+            return;
+        } else if ((<any>window).JSON) {
+            str = JSON.stringify(obj), //序列化对象
+                newobj = JSON.parse(str); //还原
+        } else {
+            for (var i in obj) {
+                newobj[i] = typeof obj[i] === 'object' ? this.cloneDeep(obj[i]) : obj[i];
+            }
+        }
+        return newobj;
+    };
+
+    //isEqual：判断两个对象是否键值对应相等
+    isEqual(a, b) {
+        //如果a和b本来就全等
+        if (a === b) {
+            //判断是否为0和-0
+            return a !== 0 || 1 / a === 1 / b;
+        }
+        //判断是否为null和undefined
+        if (a == null || b == null) {
+            return a === b;
+        }
+        //接下来判断a和b的数据类型
+        var classNameA = toString.call(a),
+            classNameB = toString.call(b);
+        //如果数据类型不相等，则返回false
+        if (classNameA !== classNameB) {
+            return false;
+        }
+        //如果数据类型相等，再根据不同数据类型分别判断
+        switch (classNameA) {
+            case '[object RegExp]':
+            case '[object String]':
+                //进行字符串转换比较
+                return '' + a === '' + b;
+            case '[object Number]':
+                //进行数字转换比较,判断是否为NaN
+                if (+a !== +a) {
+                    return +b !== +b;
+                }
+                //判断是否为0或-0
+                return +a === 0 ? 1 / +a === 1 / b : +a === +b;
+            case '[object Date]':
+            case '[object Boolean]':
+                return +a === +b;
+        }
+        //如果是对象类型
+        if (classNameA == '[object Object]') {
+            //获取a和b的属性长度
+            var propsA = Object.getOwnPropertyNames(a),
+                propsB = Object.getOwnPropertyNames(b);
+            if (propsA.length != propsB.length) {
+                return false;
+            }
+            for (var i = 0; i < propsA.length; i++) {
+                var propName = propsA[i];
+                //如果对应属性对应值不相等，则返回false
+                if (a[propName] !== b[propName]) {
+                    return false;
+                }
+            }
+            return true;
+        }
+        //如果是数组类型
+        if (classNameA == '[object Array]') {
+            if (a.toString() == b.toString()) {
+                return true;
+            }
+            return false;
+        }
+    }
 }

src/custom-components/ui-grid/ui-grid.component.html

@@ -18,10 +18,10 @@
             <ng-template #defaultTitle>
                 <div>
                     <button class="btn-editcol" nz-button [nzType]="'primary'" *ngIf="buttonGather.showEditColumn">
-                        <span><i class="anticon anticon-edit"></i>编辑列</span>
+                        <i class="anticon anticon-edit"></i><span>编辑列</span>
                     </button>
-                    <button class="btn-export" nz-button [nzType]="'primary'" [nzLoading]="_exportLoading" *ngIf="buttonGather.enableExport">
-                        <span><i class="anticon anticon-export"></i>导出</span>
+                    <button class="btn-export" nz-button [nzType]="'primary'" [nzLoading]="_exportLoading" *ngIf="buttonGather.enableExport" (click)="exportCSVIntenal()">
+                        <i class="anticon anticon-export"></i><span>导出</span>
                     </button>
                 </div>
             </ng-template>
@@ -30,8 +30,7 @@
         <ng-template #nzFixedHeader [ngIf]="!_fixScrollY">
             <thead nz-thead>
                 <tr>
-                    <!-- checkbox宽度大小要全局控制，添加到真正项目的时候要全局修改 -->
-                    <th nz-th nzCheckbox *ngIf="mulitipy" class="checkbox">
+                    <th nz-th nzCheckbox *ngIf="mulitipy">
                         <label nz-checkbox [(ngModel)]="_allChecked" [nzIndeterminate]="_indeterminate" (ngModelChange)="checkAll($event, nzTable.data)">
                         </label>
                     </th>
@@ -42,13 +41,27 @@
             </thead>
         </ng-template>
         <tbody nz-tbody>
-            <tr nz-tbody-tr *ngFor="let data of nzTable.data" (click)="onRowSelectChange(data)">
+            <tr nz-tbody-tr *ngFor="let data of nzTable.data; let ri = index" (click)="onRowSelectChange(data)" [style.background]="data.checked? '#eee':'#fff'">
                 <td nz-td nzCheckbox *ngIf="mulitipy">
-                    <label nz-checkbox [(ngModel)]="data.checked" (ngModelChange)="refreshStatus(data)">
+                    <label #checkbox_item nz-checkbox [(ngModel)]="data.checked" (click)="refreshStatus($event)">
                     </label>
                 </td>
                 <td nz-td *ngFor="let column of columns">
-                    <span>{{data[column.field]}}</span>
+                    <ng-template #default_cell>
+                        <grid-icon [field]="column.field" [data]="data"></grid-icon>
+                        <a href="javascript:;" *ngIf="column.link" class="column-link">
+                            <span (click)="onCellClick($event,data,column.field)">{{data[column.field]}}</span>
+                        </a>
+                        <nz-popover *ngIf="!column.link" [nzTrigger]="'hover'" nzOverlayStyle>
+                            <span nz-popover (mouseenter)="onCellMouseover($event,data,column.field)">{{replaceTextOmit(data[column.field], column.textLength?column.textLength: 20)}}</span>
+                            <div *ngIf="(data[column.field].length>(column.textLength?column.textLength: 20)) && !column.defaultTipsHidden">
+                               <ng-template #nzTemplate>
+                                    <p style="max-width: 300px;">{{data[column.field]}}</p>
+                                </ng-template>
+                            </div>
+                        </nz-popover>
+                    </ng-template>
+                    <ng-template [ngTemplateOutlet]="default_cell"></ng-template>
                 </td>
             </tr>
         </tbody>

src/custom-components/ui-grid/ui-grid.component.scss

@@ -1,4 +1,8 @@
 
+:host ::ng-deep .ant-table-thead > tr > th.ant-table-selection-column, :host ::ng-deep .ant-table-tbody > tr > td.ant-table-selection-column {
+    width: 20px;
+    min-width: 20px;
+}
 
 .grid-border {
     border: 1px solid #e9e9e9;
@@ -12,4 +16,9 @@
     .btn-export {
         float: right;
     }
+}
+
+.column-link {
+    text-decoration: underline;
+    color: rgba(0,0,0,0.65);
 }