angular2 全局搜索 pipe
angular2 全局搜索 pipe
今天来找bug 发表于1年前
angular2 全局搜索 pipe
  • 发表于 1年前
  • 阅读 295
  • 收藏 0
  • 点赞 0
  • 评论 0

新睿云服务器60天免费使用,快来体验!>>>   

摘要: 该pipe实现了对table内容的全局搜索
import {Pipe, PipeTransform} from "@angular/core";
@Pipe({
    name: 'tableFilter',
    pure: false
})

export class PipeTableFilter implements PipeTransform {

    transform(items:any[], args:any):any[] {
        var isSearch = (data:any): boolean => {
            var isAll = false;
            if(typeof data === 'object' ){
                for (var z in data) {
                    if(isAll = isSearch(data[z]) ){
                        break;
                    }
                }
            } else {
                if(typeof args === 'number'){
                    isAll = data === args;
                } else {
                    isAll = data.toString().match( new RegExp(args, 'i') );
                }
            }
            return isAll;
        };
        return items.filter(isSearch);
    }

}

使用样例:

<div class="form">
    <div class="form-group row">
        <div class="col-sm-6">
            <div class="input-group">
                <span class="input-group-addon" id="sizing-addon2"><i class="fa fa-search"></i> 全局搜索</span>
                <input type="text" class="form-control" placeholder="search" aria-describedby="sizing-addon2" [(ngModel)]="searchText">
            </div>
        </div>
    </div>
</div>
<table class="table table-hover table-striped table-sortable">
    <thead>
    <tr>
        <th *ngFor="let column of columns" [class]="selectedClass(column.variable)" (click)="changeSorting(column.variable)">
            {{column.display}}
        </th>
    </tr>
    </thead>
    <tbody>
    <tr *ngFor="let object of data | tableFilter: searchText | orderBy : convertSorting() | paging: page: pageSize" (click)="selectOneRow(object)" style="cursor: pointer">
        <td *ngFor="let column of columns">
            {{object[column.variable] | format : column.filter}}
        </td>
    </tr>
    </tbody>
</table>

效果:

标签: AngularJS
  • 打赏
  • 点赞
  • 收藏
  • 分享
共有 人打赏支持
粉丝 6
博文 195
码字总数 34837
×
今天来找bug
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: