Bootstrap表格组件bootstrapTable的js代码

迷南。 2023-09-28 22:39 9阅读 0赞

**JS代码如下：**

$(function(){
 
 window.cellEvents={
 };
 $('#tb_user').bootstrapTable({
 
 url:'/user/findAllSimplePage', // 请求后台的url
 method: 'post', // 请求方式：post/get
 //striped: true, // 是否显示行间隔色
 classes: 'table table-bordered table-hover', // bootstrap的表格样式
 theadClasses: 'bg-info thead-dark', // 表头的背景色
 //toolbar: '#toolbar', // 工具按钮用哪个容器
 cache: false, // 是否使用缓存，默认为true，一般来说需要设置一下这个属性
 pagination:true, // 是否显示分页
 sortable:true, // 是否启用排序
 sortOrder:'asc', // 排序方式
 sidePaginnation: 'server', //分页方式，clien客户端分页，server服务端分页
 // queryParamsType: '',
 pageNumber: 1, // 初始化加载第几页，默认第一页
 pageSize:5, //每页的记录行数
 pageList: [5,10,20], // 每页的行数
 search: false, // 是否显示表格搜索，此搜索是客户端搜索，不会进服务端
 strictSearch: true, // 默认为false，为模糊搜索，true启用全匹配搜索
 showColumns: false, // 是否显示所有的列
 showRefresh: false, // 是否显示刷新按钮
 minimumCountColumns: 10, // 最少允许的列数
 clickToSelect: true, // 是否启用点击选中行
 // height : 500, // 行高，若未定义，则表格自动根据记录条数设置表格高度
 uniqueId: 'uuid', // 每一行的唯一标识，通常对应表的主键
 showToggle: false, // 是否显示详细试图和列表视图的切换按钮
 cardView: false, // 是否显示详细试图
 detailView: false, // 是否显示父子表
 onClickRow: function(row,$element){
 }, // 行点击事件
 rowStyle: function (row,index){
 
 var classes=[
 'bg-blue',
 'bg-navy',
 'bg-red'
 ]
 if(index %4 == 0 ){
 // 判断行号是第几行
 return {
 
 classes: classes[0]
 }
 }
 else if (index %4 == 1){
 
 return {
 
 css:{
 
 color:'black'
 }
 }
 }
 else if (index %4 == 2){
 
 return {
 
 classes: classes[2]
 }
 }
 else {
 
 return {
 }
 }
 },
 queryParams: function (params){
 // 查询的参数
 var param = {
 
 size : params.limit, // 一页的行数
 page : (params.offset / params.limit)+1, // 第几页，从1开始
 };
 return param;
 },
 columns: [{
 
 title: '编号',
 formatter:function (value,row,index){
 
 var pageSize = $('#tb_user').bootstrapTable('getOptions').pageSize;
 var pageNumber = $('#tb_user').bootstrapTable('getOptions').pageNumber;
 return pageSize * (pageNumber-1) +index +1;
 },
 align: 'center',
 width: 55
 },{
 
 field: 'uuid',
 title: 'UUID',
 visible: false
 },{
 
 field: 'username',
 title: '用户名称',
 },{
 
 field: 'gender',
 title: '用户性别',
 formatter:function (value,row,index){
 
 var ret = ''+value+'';
 if(value=='男'){
 
 ret = ''+value+'';
 }
 else if(value=='女'){
 
 ret = ''+value+'';
 }
 return ret;
 }
 },{
 
 field: 'age',
 title: '用户年龄',
 },{
 
 field: 'phone',
 title: '用户手机号',
 },{
 
 field: 'address',
 title: '用户地址',
 },{
 
 field: 'email',
 title: '用户邮箱',
 },{
 
 field: 'salary',
 title: '月薪',
 cellStyle:function (value,row,index){
 
 if(index %3 == 0 ){
 
 return {
 
 classes: 'bg-blue'
 }
 }
 else if (index %3 == 1){
 
 return {
 
 classes: 'bg-green'
 }
 }
 else {
 
 return {
 }
 }
 }
 },{
 
 field: '',
 title: '操作',
 events: cellEvents,
 formatter:function (value,row,index){
 
 return '   '+''
 }
 }]
 });
 })

**效果展示：**  
![在这里插入图片描述][f1d77ef6ad854d96929558a5a06f5ee6.png]

[f1d77ef6ad854d96929558a5a06f5ee6.png]: https://img-blog.csdnimg.cn/f1d77ef6ad854d96929558a5a06f5ee6.png