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

ace-components for ewms

<div id='button' class='page-content clearfix'>
    <h3>
        Table <small>表格 ace-table</small>
    </h3>
    <h5 class="text-danger">
        该table组件含有两种模式，一种是常规，一种是自动化（自动发起请求等）
    </h5>
    <h4 class="text-info" style="margin-top:30px;margin-bottom:20px;">
        插槽
    </h4>
    <table class='table-striped table-bordered table'>
        <tr>
            <th *ngFor='let th of slotTH'>{{th.text}}</th>
        </tr>
        <tr *ngFor='let item of slotSource'>
            <td *ngFor='let key of getSlotKeys(item)'>
                <p [innerHTML]='key'></p>
            </td>
        </tr>
    </table>

    <h4 class="text-info" style="margin-top:30px;margin-bottom:20px;">
        自动化 属性 及 事件
    </h4>
    <table class='table-striped table-bordered table'>
        <tr>
            <th *ngFor='let th of autoTH'>{{th.text}}</th>
        </tr>
        <tr *ngFor='let item of autoSource'>
            <td *ngFor='let key of getAutoKeys(item)'>
                <p [innerHTML]='key'></p>
            </td>
        </tr>
    </table>

    
    

    <h4 class="text-info" style="margin-top:30px;margin-bottom:20px;">
        常规属性
    </h4>
    <table class='table-striped table-bordered table'>
        <tr>
            <th *ngFor='let th of proTable.th'>{{th}}</th>
        </tr>
        <tr *ngFor='let item of proTable.tbody'>
            <td *ngFor='let key of getKeys(item)'>
                <p [innerHTML]='key'></p>
            </td>
        </tr>
    </table>
    <h4 class="text-info">
        事件
    </h4>
    <table class='table-striped table-bordered table'>
        <tr>
            <th *ngFor='let th of eventTable.th'>{{th}}</th>
        </tr>
        <tr *ngFor='let item of eventTable.tbody'>
            <td *ngFor='let key of getEventKeys(item)'>
                <p [innerHTML]='key'></p>
            </td>
        </tr>
    </table>

    <hr>

     <div class="block">
        <h5 class="text-warning">
            自动化
        </h5>
        <ace-table 
        [theadSource]='autoHeader'
        [cbParams]='cbParams'
        [setParamsFn]='tableSettingParams'
        (onAjaxOver)='onAjaxOver()'
        ajaxUrl='/xx'
        #table1
        >
            <ng-template>
                <button (click)='slotBtnClicked()'>开关</button>
                <p class='text-info'>查看</p>
            </ng-template>
        </ace-table>
    </div>

    <div class="block">
        <h5 class="text-warning">
            操作区域
        </h5>
        <ace-table [theadSource]='theadSource' [dataSource]='demo4.dataSource' [tbTitle]='demo4.tbTitle' [widths]='demo4.widths' [tableHeight]='300' [modalState]='demo4.modalState' [dataInf]='demo4.dataInf' [loading]='demo4.loading' operateState='true' changeState='true'
            [rowNumber]='demo4.rowNumber' (onChangeRows)='changeDemo4Rows($event)' (onChangePage)='changeDemo4Page($event)'></ace-table>
    </div>

    <div class="block">
        <h5 class="text-warning">
            设定每一列的宽度 [widths] 不能小于100，选择框行无法设置
        </h5>
        <ace-table [theadSource]='theadSource' [dataSource]='demo4.dataSource' [tbTitle]='demo4.tbTitle' [widths]='demo4.widths' [tableHeight]='300' [modalState]='demo4.modalState' [dataInf]='demo4.dataInf' [loading]='demo4.loading' [rowNumber]='demo4.rowNumber'
            (onChangeRows)='changeDemo4Rows($event)' (onChangePage)='changeDemo4Page($event)'>
            <div class='footer' style="line-height:40px;border-top:1px solid #ccc">
                <span style="margin-left:20px;font-size:16px;">总计：</span>
                <span style='float:right;margin-right:20px;font-size:15px;'>1000 元</span>
            </div>
        </ace-table>
    </div>

    <div class="block">
        <h5 class="text-warning">
            提示框 [modalState]
        </h5>
        <ace-table [theadSource]='theadSource' [dataSource]='demo1.dataSource' [tbTitle]='demo1.tbTitle' [widths]='demo1.widths' [tableHeight]='200' [modalState]='demo1.modalState'>
            
        </ace-table>
    </div>

    <div class="block">
        <h5 class="text-warning">
            表格高度 [tableHeight]
        </h5>
        <ace-table [theadSource]='theadSource' 
        [dataSource]='demo2.dataSource'
        [tbTitle]='demo2.tbTitle'
        [widths]='demo2.widths'
        [multipleChoice]='false'
        [modalState]='demo2.modalState'></ace-table>
    </div>

    <div class="block">
        <ace-table [theadSource]='theadSource' [dataSource]='demo3.dataSource' [tbTitle]='demo3.tbTitle' [widths]='demo3.widths' [modalState]='demo3.modalState' [tableHeight]='400'></ace-table>
    </div>

    <div class="block">
        <h5 class="text-warning">
            [multipleChoice] 多选框 默认是 true
        </h5>
        <ace-table [theadSource]='theadSource' [dataSource]='demo5.dataSource' [tbTitle]='demo5.tbTitle' [widths]='demo5.widths' [multipleChoice]='demo5.multipleChoice'></ace-table>
    </div>

    <div class="block">
        <h5 class="text-warning">
            EVENT onSelect($event)
        </h5>
        <ace-table [theadSource]='theadSource' [dataSource]='demo4.dataSource' [tbTitle]='"勾选的event事件"' [widths]='demo4.widths' [modalState]='demo4.modalState' [tableHeight]='200' (onSelect)='mySelector($event)'></ace-table>
        <br>
        <p>
            勾选的行数 [ <span *ngFor='let i of selectedRow;let idx=index;'>{{i.id}}<span *ngIf='idx!=(selectedRow.length-1)'>,</span> </span> ]
        </p>
    </div>

    <h5 class='text-danger'>
        组件相关属性
    </h5>
    <table class='table-striped table-bordered table'>
        <tr>
            <th *ngFor='let th of relateTh'>{{th}}</th>
        </tr>
        <tr *ngFor='let item of relateProp'>
            <td *ngFor='let key of getKeys(item)'>
                <p [innerHTML]='key'></p>
            </td>
        </tr>
    </table>
    <ace-modal [state]='modalState'>
        <div class='ng-modal-content'>
            <p class='text-info '>
            祝你早生贵子！！！
            </p>
        </div>
    </ace-modal>
</div>