ace-component/src/app/components/ace-table/ace-table.component.html

ace-components for ewms

<div class='clearfix'>
  <div class='col-xs-12 ace-table'>
    <!-- 标题 -->
    <!-- <div class='ace-table-title' *ngIf='tbTitle'> -->
    <div class='ace-table-title' [style.display]='tbTitle?"block":"none"'>
      <span>{{tbTitle}}</span>
      <a *ngIf='false' class='arrow' (click)='close()'>
        <span class='fa fa-arrow-up' [ngStyle]='closeIconSty()'></span>
        </a>
      <ng-content select='.tbHeader'></ng-content>
    </div>

    <div class='ace-wrap'>

      <!-- thead -->
      <div class='ace-wrap-son'>
        <div class='ace-move-line'></div>
        <div class='ace-thead-wrap'>
          <div class='ace-table-thead' [ngStyle]='theadSty'>
            <table class='table table-bordered' [ngStyle]='{transform:"translateX("+thOffsetLeft+"px)"}'>
              <!--全选按钮  -->
              <tr>
                <th *ngIf='multipleChoice' class='ace-checkbox'>
                  <label>
                    <input id="cbxAllMain" type="checkbox" class="ace" [(ngModel)]='selectAll' (click)='onSelectedAll()'>
                    <span class="lbl"></span>
                  </label>
                </th>
                <th *ngFor='let item of theadSource;let idx=index;' [ngStyle]="getThSty(idx)" 
                (mousemove)='thMoving($event,idx)' 
                (mousedown)='tdisClilked($event,idx)'>
                  <div *ngIf='computedRowData(item.text)==true' [innerHTML]='item.text'>

                  </div>
                  <span *ngIf='computedRowData(item.text)==false'>{{item.text}}</span>
                </th>
                <th *ngIf='operateState' class='ace-table-opera'>
                  <span>控制开关</span>
                </th>
                <th *ngIf='changeState' class='ace-table-opera'>
                  <span>操作</span>
                </th>
              </tr>
            </table>
            <div class='ace-move-block' (mousemove)='moveBlockEvent($event)'></div>
          </div>
        </div>
        
        <!--   内容区  -->
        <div class='ace-table-content' (scroll)='tableScroll($event)'>
          <div class='ace-table-list'>
            <table class='table table-bordered'>
              <tr class='first-row'>
                <!-- 这个元素控制宽度，所有tr的宽度  -->
                <td *ngIf='multipleChoice' style="width:50px">
                </td>
                <td *ngFor='let item of theadSource;let idx=index;' [ngStyle]="getThSty(idx)"></td>
                <td *ngIf='operateState' class='ace-table-opera'></td>
                <td *ngIf='changeState' class='ace-table-edit'></td>
              </tr>
              <tr *ngFor='let data of dataSource.slice(0,rowNumber);let idx=index;'
               [ngClass]='"tr-"+idx'
               [class.ace-checked-row]='checkRow[idx]'
               
               >
                <!--多选框  -->
                <td *ngIf='multipleChoice' class='ace-checkbox'>
                  <label>
                  <input id="cbxAllMain" type="checkbox" class="ace" [(ngModel)]='checkRow[idx]' (click)='onCheckRow(idx)' >
                  <span class="lbl"></span>
                  </label>
                </td>
                <td *ngFor='let i of getKeys(data);let tdIdx=index' 
                [ngClass]='"td-"+tdIdx'
                [attr.rowspan]='i.rowspan'>
                  <ng-container *ngIf='i.slot&&i.position!="bottom"' [ngTemplateOutlet]="template"></ng-container>
                  <span *ngIf='i.text!==undefined&&!computedRowData(i.text)'>{{i.text}}</span>
                  <div *ngIf='i.text!==undefined&&computedRowData(i.text)' [innerHTML]='i.text'></div>
                  <ng-container *ngIf='i.slot&&i.position=="bottom"'   [ngTemplateOutlet]="template"></ng-container>
                </td>
                <td *ngIf='operateState' class='ace-table-opera'>
                  <div class='ace-table-reload' (click)='onChangeReflreshState(idx)'>
                    <i class='fa fa-refresh' [ngClass]='getReflreshSty(idx)'></i>
                    <span>{{operaRefresh&&operaRefresh[idx]?"刷新中":"刷新"}}</span>
                  </div>
                  <div class='ace-table-show-detail' (click)='onShowDetail($event,idx)'>
                    <i class='fa fa-angle-double-down'></i>
                    <span>展开</span>
                  </div>
                </td>
                <td *ngIf='changeState' class='ace-table-edit'>
                  <div class="ace-table-change" (click)='onChangeInfo(idx)'>
                    <span>修改</span>
                  </div>
                  <div class="ace-table-delete" (click)='onDelInfo(idx)'>
                    <span>删除</span>
                  </div>
                </td>

              </tr>
              <tr *ngIf='computeNotDataRow()'>
                <td [attr.colspan]='computeNotDataColspan()' style='border-right-color:transparent'>
                  暂无数据
                </td>
              </tr>
            </table>
          </div>
          <!--拖动线  -->
        </div>

        <ng-content select='.footer'></ng-content>
      </div>
      <!-- 底部  -->
      <div class='ace-table-footer'>


        <!--翻页区  -->
        <ul class='ace-button-area'>
          <li class='icon-btn' (click)='onToPage(1)' [ngClass]='onCheckChangePageAU("first")'>
            <span class='ui-icon ace-icon'>首页</span>
          </li>
          <li class='icon-btn' (click)='onToPage(dataInf.page-1)' [ngClass]='onCheckChangePageAU("pre")'>
            <span class='ui-icon ace-icon'>上一页</span>
          </li>

          <!-- 第一页 -->
          <li *ngFor='let row of computPagination()' class='icon-btn incon-num-btn' [ngClass]='row==this.dataInf.page?"active":""'
            (click)='onToPage(row)'>
            <span class='ui-icon ace-icon'>{{row}}</span>
          </li>

          <li class='icon-btn toLeft' (click)='onToPage(dataInf.page-0+1)' [ngClass]='onCheckChangePageAU("next")'>
            <span class='ui-icon ace-icon'>下一页</span>
          </li>
          <li class='icon-btn toLeft last-icon' (click)='onToPage(dataInf.totalPage)' [ngClass]='onCheckChangePageAU("last")'>
            <span class='ui-icon ace-icon '>末页</span>
          </li>

        </ul>

        <!--显示区  -->
        <div class='ace-table-footer-text'>
          <span>当前 {{(dataInf.startId||dataInf.startId==0)?dataInf.startId:"X"}} - {{(dataInf.endId||dataInf.endId==0)?dataInf.endId:"X"}} 行 ，
                       共 {{(dataInf.total||dataInf.total==0)?dataInf.total:"X"}} 行 </span>
        </div>

        <!-- 每页显示数量 -->
        <div class='select-page-block'>
          <span>每页显示数量：</span>
          <select (change)='onPageNumerChanged($event)'>
            <option *ngFor='let item of _selectOption' [attr.value]="item" [selected]='item==rowNumber'>{{item}}</option>
          </select>
        </div>

      </div>
      <!--加载动画  -->
      <div class='ace-table-loadding' *ngIf='loading'>
        <i class='ace-icon'></i>
      </div>
      <!--提示框  -->
      <div class="ace-table-modal" *ngIf='modalState.show'>
        <i class="fa fa-info-circle"></i> {{modalState.text||"初次打开页面不加载数据，请组合条件进行搜索数据..."}}

      </div>
    </div>
  </div>
</div>