18720358503 在线客服 人才招聘 返回顶部
企业动态 技术分享 行业动态

微信小程序来了_bootstrap table表格插件使用详解

2021-01-12分享 "> 对不起,没有下一图集了!">
bootstrap table表格插件使用详解       这篇文章主要为大家详细介绍了bootstrap table表格插件使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
queryParams: queryParams : function(params) { pany = $('#subcompany option:selected').val(); var name = $('#name').val(); return { pageNumber: params.offset+1, pageSize: params.limit, pany, name:name smartDisplay: false, idField: 'id', sortable: false, escape: true, idField: 'systemId', maintainSelected: true, toolbar: '#toolbar', columns: [ {field: 'state', checkbox: true}, {field: 'id', title: '编号', sortable: true, halign: 'center'}, {field: 'username', title: '账号', sortable: true, halign: 'center'}, {field: 'password', title: '密码', sortable: true, halign: 'center'}, {field: 'name', title: '姓名', sortable: true, halign: 'center'}, {field: 'sex', title: '性别', sortable: true, halign: 'center'}, {field: 'age', title: '年龄', sortable: true, halign: 'center'}, {field: 'phone', title: '手机', sortable: true, halign: 'center'}, {field: 'email', title: '邮箱', sortable: true, halign: 'center'}, {field: 'address', title: '地址', sortable: true, halign: 'center'}, {field: 'remark', title: '备注', sortable: true, halign: 'center'}, {field: 'action', title: '操作', halign: 'center', align: 'center', formatter: 'actionFormatter', events: 'actionEvents', clickToSelect: false} }).on('all.bs.table', function (e, name, args) { $('[data-toggle="tooltip"]').tooltip(); $('[data-toggle="popover"]').popover(); });

bootstrap-table是一种表格插件,可用作后管系统的数据处理和回显,当然,bootstrap-table的使用需要前后台协调进行。

在使用bootstrap-table过程中需要注意:

接口返回数据格式[json]包含的两个字段: total(数据总计)与rows(数据),即{"total":24,"rows":[...]}

分页包括服务器端和客户端两种情况,务器端分页的参数默认值为limit,offset,search,sort,order Else,通过queryParamsType参数可对其进行重写

columns字段中:file 表示返回字段的属性名;title表示th标题内容;formatter表示自定义列表显示内容,包含三个参数,value, row, index,对应 为file值,行数据,行数

function actionFormatter(value, row, index) {
 return [
 ' " rel="external nofollow" data-toggle="tooltip" title="详情" i /i /a ',
 ' a href="javascript:createAction()" rel="external nofollow" data-toggle="tooltip" title="修改密码" i /i /a ',
 ].join('');

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。


"> 对不起,没有下一图集了!">
在线咨询