ng-alain中的st表格

后端控制分页的st表格使用

数据列初始化

ts

  columns: STColumn[] = [
    { title: '', index: 'id', type: 'checkbox' },
    { title: '姓名', index: 'name', width: '80px' },
    { title: '电话', index: 'phone', width: '180px' },
    {
      title: '性别', index: 'gender',
      filter: {
        menus:[ { text: '男', value: '男', checked: false },
                { text: '女', value: '女', checked: false }],
        clearText: '清空',
        multiple: false,
      },
      width: '150px'
    },
    { title: '职位', index: 'position', width: '80px' },
    { title: '工资', index: 'salary', width: '150px' },
    { title: '住址', index: 'address', width: '150px' }
  ];

后端接口获取data


    this.http.post('接口地址', {
        pageNum: pagenum,
        pageSize: pagesize,
        gender: ''
      }).subscribe((res: any) => {
      
        //打印后端返回的结果
        console.log(res)
        
        //将返回的结果list赋给data
        this.data = Array(res.data.list.length)
          .fill({}).map((item: any, idx: number) => {
            return {
              id: res.data.list[idx].id,
              name: res.data.list[idx].name,
              phone: res.data.list[idx].phoneNo,
              gender: res.data.list[idx].gender,
              position: res.data.list[idx].position,
              salary: res.data.list[idx].salary,
              address: res.data.list[idx].address,
            }
          })
        //如果是后端分页,把后端返回的总的数据赋给total,
        //当前页码赋给pi,每页展示条数赋给ps
        this.pi = res.data.pageNum;
        this.total = res.data.total; 
        this.ps = res.data.pageSize;
        //分页栏中显示总的数据条数
        this.pages.total = '共' + this.total + '条',
      });

表格分页设置

  pages: STPage = {
    total: '',//分页显示多少条数据,字符串型
    show: true,//显示分页
    front: false //关闭前端分页,true是前端分页,false后端控制分页
  };

change回调

st表格变化时回调包括:pi、ps、checkbox、radio、sort、filter、click、dblClick 变动

  change(ret: STChange) {
   //打印变化的所有信息
    console.log('change', ret);
    //filter变化
    if (ret.filter) {
      if (ret.filter.title == '性别') {
        let i = 0;
        ret.filter.filter.menus.map(item => {
          if (item.checked) {
           选中操作逻辑
          } else {
            i++;
            if (i == ret.filter.filter.menus.length) {
             filter清空操作逻辑
            }
          }
        })
      }
    }


    if (ret.checkbox) {
      ret.checkbox.forEach(item => {
         选中逻辑
      })
    } 
    
    if(ret.pi){
     页码变化逻辑
    }
  }

滚动

//y轴滚动
scroll = { y: '350px' };

html数据绑定展示

data为后端获取的数据,ps展示条数,pi当前页码,total数据总条数,columns数据列,page翻页配置,change数据变化回调。

 <st #st
    [data]="data"
    [ps]="ps"
    [pi]="pi" 
    [total]="total"
    [columns]="columns"
    [scroll]="scroll"
    [page]="pages"
    (change)="change($event)">
</st>```

  • 2
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值