angular2 primeNg 表格插件 排序

前端之家收集整理的这篇文章主要介绍了angular2 primeNg 表格插件 排序前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

1、HTML代码

  1. <!-- 表格 -->
  2. <!-- tabVal是一个数组对象,表格的数据,key就是field的名称 -->
  3. <p-dataTable [value]="tabVal" emptyMessage="无记录">
  4. <p-column field='user_name' header='用户姓名' sortable="custom" (sortFunction)="mySort($event)">
  5. <ng-template let-col let-row="rowData" pTemplate="body" style="width: 72px">
  6. <span class="nowrap" pTooltip='{{row.user_name}}' tooltipPosition="top">
  7. {{row.user_name}}
  8. </span>
  9. </ng-template>
  10. </p-column>
  11. <p-column field='reg_qq_number' header='QQ号码' sortable="custom" (sortFunction)="mySort($event)"></p-column>
  12. <p-column field='qq_name' header='QQ昵称'>
  13. <ng-template let-col let-row="rowData" pTemplate="body">
  14. <span class="nowrap" pTooltip='{{row.qq_name}}' tooltipPosition="top">
  15. {{row.qq_name}}
  16. </span>
  17. </ng-template>
  18. </p-column>
  19. <p-column field='orgin_fullname' header='机构全称'>
  20. <ng-template let-col let-row="rowData" pTemplate="body">
  21. <span class="nowrap" pTooltip='{{row.orgin_fullname}}' tooltipPosition="top">
  22. {{row.orgin_fullname}}
  23. </span>
  24. </ng-template>
  25. </p-column>
  26. <p-column field='operation' header='操作'>
  27. <!--
  28. let-col: col这个td的值对象
  29. let-row: row这一行tr的值对象
  30. -->
  31. <ng-template let-col let-row="rowData" pTemplate="body">
  32. <div class="text-center">
  33. <span class="fa fa-copy cursor" ngxClipboard [cbContent]="row.qq_name" (cbOnSuccess)="copyLineInfo($event)"></span>
  34. <span class="fa fa-edit cursor" (click)="editLineInfo(row)"></span>
  35. </div>
  36. </ng-template>
  37. </p-column>
  38. <p-column field='business_label' header='业务标签'>
  39. <ng-template let-col let-row="rowData" pTemplate="body">
  40. <span class="nowrap" pTooltip='{{row.business_label}}' tooltipPosition="top" style="width: 100px">
  41. {{row.business_label}}
  42. </span>
  43. </ng-template>
  44. </p-column>
  45. <p-column field='bind_number' header='代联号' [sortable]="true"></p-column>
  46. <p-column field='like_msg' header='欢迎信息' [sortable]="true"></p-column>
  47. <p-column field='user_come_from' header='用户来源' [sortable]="true"></p-column>
  48. <p-column field='reg_state' header='注册状态' [sortable]="true"></p-column>
  49. <p-column field='create_time' header='创建日期' [sortable]="true"></p-column>
  50. </p-dataTable>
  51. <p-paginator rows="30" totalRecords="100" [rowsPerPageOptions]="[10,30,50,100]" (onPageChange)="paginate($event)"></p-paginator>
  52. </div>

2、组件中的js代码

  1. // 表格数据
  2. this.tabVal = [
  3. {
  4. user_name: "zxc",reg_qq_number: "2212323232",qq_name: "爱篮球没理由",orgin_fullname: "陕西省西安市高新区招商银行支行",businessLabel: "首付款",bind_number: "232323",like_msg: "你好",user_come_from: "中国",reg_state: "已注册",create_time: "2017-7-8"
  5. },{
  6. user_name: "lzy",reg_qq_number: "1234766544",business_label: "资金,债券一级,债券二级",create_time: "2017-7-8"
  7. }
  8. ];

3、实现排序

  1. A. 使用primeNg默认功能,只需要添加[sortable]="true"
  2.  
  3. <p-column field='bind_number' header='代联号' [sortable]="true"></p-column>
  4.  
  5. B. 添加排序方法调用后台接口,需要如下配置 sortable="custom" (sortFunction)="mySortFun($event)",然后在mySortFun()函数中,获取参数,调用接口排序就可以了。
  6.  
  7. <p-column field='reg_qq_number' header='QQ号码' sortable="custom" (sortFunction)="mySort($event)"></p-column>

猜你在找的Angularjs相关文章