Bootstrap table表格初始化表格数据的方法

2023-09-09 21:56:05 313

一、项目说明

①此项目是ASP.NET项目，开发语言是C#

②bootstrap-table使用需要下载对应的css和js插件

③具体详情还需查看api文档

二、前端代码

【说明】①text-nowrap设置表格超出不换行而显示滚动条，避免表格列过多

②table-responsive：有table-responsive，表格有滚动条没有table-responsive，网页有滚动条

$('#table').bootstrapTable({
url:'/B_Product/GetProductData',//请求后台的URL（*）
method:'get',//请求方式（*）
toolbar:'#toolbar',//工具按钮用哪个容器
striped:true,//是否显示行间隔色
cache:false,//是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
pagination:true,//是否显示分页（*）
sortable:false,//是否启用排序
sortOrder:"asc",//排序方式
queryParams:function(pageRequest){
returnpageRequest;
},//
//传递参数（*）
sidePagination:"server",//分页方式：client客户端分页，server服务端分页（*）
pageNumber:1,//初始化加载第一页，默认第一页
pageSize:10,//每页的记录行数（*）
pageList:[10,25,50,100],//可供选择的每页的行数（*）
search:true,//是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
strictSearch:true,
showColumns:true,//是否显示所有的列
showRefresh:true,//是否显示刷新按钮
minimumCountColumns:2,//最少允许的列数
clickToSelect:true,//是否启用点击选中行
height:tableHeight(),//行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
uniqueId:"Id",//每一行的唯一标识，一般为主键列
showToggle:false,//是否显示详细视图和列表视图的切换按钮
cardView:false,//是否显示详细视图
detailView:false,//是否显示父子表
showExport:true,//是否显示导出按钮
buttonsAlign:"right",//按钮位置
exportTypes:['excel'],//导出文件类型
Icons:'glyphicon-export',
columns:[{
checkbox:true
},{
field:'ID',
title:'编号',
visible:false
},{
field:'PRODUCTID',
title:'产品编号'
},{
field:'PRODUCTNAME',
title:'产品名称'
},{
field:'PRODUCTUSER',
title:'货主名称'
},{
field:'PRICE',
title:'单价（元）'},{
field:'BARCODERULE',
title:'条码规则'
},{
field:'ISUSING',
title:'启用状态',
formatter:function(value,row,index){
if(value=="启用")
return'启用';
else
return'不启用';
}

},{
field:'REMARK1',
title:'备注'
},
]
});

【说明】以上是表格初始化方法

①请求网址返回的数据是json数组

②传递的默认参数有页数和页的大小，如果在服务端分页，分页方式为：server

③表格随动（随着页面大小的改变，表格的大小随之改变）

这里写了一个tableHeight（）方法获取屏幕的高度，同时利用Windows的resize方法重新传递参数，刷新表格

functiontableHeight(){
varh=$(window).height();
returnh-25;
}

【重新设置表格属性值并刷新】

$(window).resize(function(){
$("#table").bootstrapTable('resetView',{
height:tableHeight()
});
});
$("#table").bootstrapTable("refresh");//表格刷新数据

④为表格设置checkbox

在columns:中设置第一列checkbox:true，将会用全选功能
field:'ID', 此名称需和json对应的key值相同才会显示对应的value值
title:'编号', title是列名，显示的名称
visible:false 表示初始为不可见，可通过表格右上方的按钮设置列的显示和不显示

⑤在表格中设置样式

表格中显示按钮等不同状态的

formatter:function(value,row,index){
if(value=="启用")
return'启用';
else
return'不启用';
}

返回的参数有三个，value代表当前值，row表示当前行，index当前行数

总结

以上所述是小编给大家介绍的Bootstraptable表格初始化表格数据的方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！

Bootstrap table表格初始化表格数据的方法

热门推荐

随机推荐