bootstrap table表格插件使用详解

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

bootstrp-table学习,具体内容如下

Box: true},{field: 'id',title: '编号',sortable: true,halign: 'center'},{field: 'username',title: '账号',{field: 'password',title: '密码',{field: 'name',title: '姓名',{field: 'sex',title: '性别',{field: 'age',title: '年龄',{field: 'phone',title: '手机',{field: 'email',title: '邮箱',{field: 'address',title: '地址',{field: 'remark',title: '备注',{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值,行数据,行数

'<a class="like" href="detail.html" rel="external nofollow" data-toggle="tooltip" title="详情"><i class="glyphicon glyphicon-pencil"> ','<a class="edit ml10" href="javascript:createAction()" rel="external nofollow" data-toggle="tooltip" title="修改密码"><i class="glyphicon glyphicon-edit"> ',].join('');
}

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

原文链接:https://www.f2er.com/bootstrap/39435.html

猜你在找的Bootstrap相关文章