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

数据列初始化

  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赋给datathis.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，每页展示条数赋给psthis.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>```

ng-alain中的st表格相关推荐

Angular 中后台前端解决方案 - Ng Alain 介绍
Angular 中后台前端解决方案 - Ng Alain 介绍参考文章: (1)Angular 中后台前端解决方案 - Ng Alain 介绍 (2)https://www.cnblogs.com/ ...
走进AngularJs(二) ng模板中常用指令的使用方式
通过使用模板,我们可以把model和controller中的数据组装起来呈现给浏览器,还可以通过数据绑定,实时更新视图,让我们的页面变成动态的.ng的模板真是让我爱不释手.学习ng道路还很漫长,从模板 ...
angular项目集成ng zorro 和ng alain
angular项目集成 ng zorro和ng alain(mock 和acl权限)学习笔记这段时间,比较忙,很久没有写博客了.作为后端开发人员,第一次接触angular,以下是个人的学习心得和D ...
python读取excelsheet-python读取excel文件中所有sheet表格
sales: store: """ (1)用load_workbook函数打开excel文件,返回一个工作簿对象 (2)用工作簿对象获取所有的sheet (3)第一个fo ...
计算机配件制作表格,CAD教程中望CAD表格功能创建零件明细表
CAD教程分享:中望CAD表格功能创建零件明细表中望CAD的最新版本中望CAD2011新增加了很多实用的功能,表格功能就是其中之一.利用中望CAD2011的表格功能可以极大地提高工作效率,今天就和大家 ...
html 让表格在右侧显示不出来,css中怎么解决表格边框不显示的问题？
css中怎么解决表格边框不显示的问题? html中的表格默认是不显示边框的,可以设置表格的border属性来添加边框,设置cellspacing属性为0来将边框合并,显示单一边框. css中也可以设置 ...
计算机怎么删除表格,电脑中删除Excel2010表格多余图片的三种方法
为了让表格看起来更加直观,很多朋友都会在Excel中插入图片.那么,当我们大批量插入图片时,如果想要删除的话,应该怎么办呢?以下是系统城小编为您带来的电脑中删除Excel2010表格多余图片的三种方法 ...
删除word中所有的表格_如何在Word中删除表格
删除word中所有的表格 If you've inserted a table in Word and you now want to delete it, you may have found it ...
python 编辑excel需要什么包_Python 中操作EXCEL表格的包
今天,马云爸爸又来贡献金句了,比王健林公公一亿一个小目标还高,"一个月挣一二十个亿很难受!!!",作为在传统企业主要为电商部门提供数据分析的数据分析师,体验太深刻了. 双11前后, ...

ng-alain中的st表格

数据列初始化

后端接口获取data

表格分页设置

change回调

滚动

html数据绑定展示

ng-alain中的st表格相关推荐

最新文章

热门文章