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

ts

    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 + '条',
      });

表格分页设置

ts

  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>