bootstraptable分组_bootstraptable表格请求的⼀点⼼得⼩弟今天接到⼀个需求，那就是要给后台添加⼀个页⾯
类似上⾯这种，其中下⾯的表格是卸载js中的。其主要⽅法为
$('#table').bootstrapTable({
url:'./loan/getFailTransfer.json',
sidePagination:'server',
queryParamsType:'pageSize',
queryParams: queryParams,
search:false,
pagination:true,
pageList:[10],
columns : [ {
field:"全选",
checkbox: true,
formatter: function (value, row, index) {
return index + 1;
}
},{
title : '全选',
formatter: function (value, row, index) {
return index + 1;
}
},{
field : 'name',
title : '项⽬名称'
},{
field : 'loanType',
title : '项⽬类型'
},{
field : 'uedId',
title : '投资⼈ID'
},{
title : '投资⼈姓名'
},{
field : 'uedType',
title : '⽤户类型'
},{
field : 'money',
title : '投资⾦额(元)'
},{
field : 'time',
title : '投资时间'
},{
field : 'deadline',
title : '项⽬期限(天)'
},{
field : 'amount',
title : '应发投资⼈奖励(元)'
},{
field : 'amountReal',
title : '实发奖励(元)'
},{
title : '操作',
formatter : operateFormatter
}]
});
html页⾯，只要⼀个id=table就可以展⽰。。
但是，当请求⽅式为post时，上⾯的配置参数传不到后台，使⽤postman是可以的，所以排除了后台代码的问题，查询bootstrap⽂档后才知道，需要设置传到后台服务器的数据类型，新增属性 contentType:"application/x-www-form-urlencoded; charset=UTF-8"，即可。
记得哦。。如果是post请求，⼀定要加上  contentType:"application/x-www-form-urlencoded; charset=UTF-8"，属性
最后附上它的⼀些常⽤api
var $table;
//初始化bootstrap-table的内容
function InitMainTable () {
//记录页⾯bootstrap-table全局变量$table，⽅便应⽤
$table = $('#grid').bootstrapTable({
url: queryUrl, //请求后台的URL(*)
method: 'GET', //请求⽅式(*)
//toolbar: '#toolbar', //⼯具按钮⽤哪个容器
striped: true, //是否显⽰⾏间隔⾊
cache: false, //是否使⽤缓存，默认为true，所以⼀般情况下需要设置⼀下这个属性(*) pagination: true, //是否显⽰分页(*)
sortable: true, //是否启⽤排序
sortOrder: "asc", //排序⽅式
sidePagination: "server", //分页⽅式：client客户端分页，server服务端分页(*) pageNumber: 1, //初始化加载第⼀页，默认第⼀页，并记录
pageSize: rows, //每页的记录⾏数(*)
pageList: [10, 25, 50, 100], //可供选择的每页的⾏数(*)
search: false, //是否显⽰表格搜索
strictSearch: true,
showColumns: true, //是否显⽰所有的列(选择显⽰的列)
showRefresh: true, //是否显⽰刷新按钮
minimumCountColumns: 2, //最少允许的列数
clickToSelect: true, //是否启⽤点击选中⾏
//height: 500, //⾏⾼，如果没有设置height属性，表格⾃动根据记录条数觉得表格⾼度uniqueId: "ID", //每⼀⾏的唯⼀标识，⼀般为主键列
showToggle: true, //是否显⽰详细视图和列表视图的切换按钮
cardView: false, //是否显⽰详细视图
detailView: false, //是否显⽰⽗⼦表
//得到查询的参数
queryParams : function (params) {
//这⾥的键的名字和控制器的变量名必须⼀直，这边改动，控制器也需要改成⼀样的
var temp = {
rows: params.limit, //页⾯⼤⼩
page: (params.offset / params.limit) + 1, //页码
sort: params.sort, //排序列名
sortOrder: der //排位命令(desc，asc)
};
},
columns: [{
checkbox: true,
visible: true //是否显⽰复选框}, {
field: 'Name',
title: '姓名',
sortable: true
bootstrap项目}, {
field: 'Mobile',
title: '⼿机',
sortable: true
}, {
field: 'Email',
title: '邮箱',
sortable: true,
formatter: emailFormatter }, {
field: 'Homepage',
title: '主页',
formatter: linkFormatter }, {
field: 'Hobby',
title: '兴趣爱好'
}, {
field: 'Gender',
title: '性别',
sortable: true
}, {
field: 'Age',
title: '年龄'
}, {
field: 'BirthDate',
formatter: dateFormatter
}, {
field: 'Height',
title: '⾝⾼'
}, {
field: 'Note',
title: '备注'
}, {
field:'ID',
title: '操作',
width: 120,
align: 'center',
valign: 'middle',
formatter: actionFormatter
}, ],
onLoadSuccess: function () {
},
onLoadError: function () {
showTips("数据加载失败！");
},
onDblClickRow: function (row, $element) { var id = row.ID;
EditViewById(id, 'view');
},
});
};

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。