Bootstrap table表格初始化表格数据的方法表格初始化表格数据的方法
主要介绍了Bootstrap-table表格初始化表格数据的方法,非常不错,具有一定的参考借鉴价值,需要的朋友可以
参考下
一、项目说明一、项目说明
①此项目是ASP.NET项目,开发语言是C#
②bootstrap-table使用需要下载对应的css和js插件
③具体详情还需查看api文档
二、前端代码二、前端代码
<div class="table-responsive">
<table id="table" class="text-nowrap"> </table>
</div>
【说明】 ①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) {
return pageRequest;
},//
//传递参数(*)
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',
评论1