bootstrap bootstrapTable 参数传递问题:
假设传递方法执行POST,则系列配置必须一起,否则后台获取不到数据.原因post默认会以application/json 方式传输,影响数据接收.
如果没有指定post方式,参数形式,或者request.getParameter(“XX”);都可以获取数据
method : "POST", //使用get请求到服务器获取数据
contentType: "application/x-www-form-urlencoded",
后台接收实例:
//参数接收形式自选
@ResponseBody
@RequestMapping(value = "/catedata")
public String catejson(HttpServletRequest request,Integer cateId,String pagesd) {
String id = request.getParameter("pagesd");
// int cateId = Integer.valueOf(id);
Map<String, Object> map = new HashMap<>();
map.put("cateId", cateId);
List<CateData> list = cateDataDao.selectByMap(map);
return UtilJson.toJson(list);
}
bootstrap bootstrapTable 使用实例
HTML jsp页面:
<div class="too">
<div id="toolbar" class="btn-group">
<button id="btn_add" type="button" class="btn btn-default">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
</button>
<button id="btn_edit" type="button" class="btn btn-default">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改
</button>
<button id="btn_delete" type="button" class="btn btn-default">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
</button>
</div>
<table id="table"></table>
</div>
bootstrap bootstrapTable 相关设置:
function initTable() {
//先销毁表格
$('#table').bootstrapTable('destroy');
//初始化表格,动态从服务器加载数据
$("#table")
.bootstrapTable(
{
method : "POST", //使用get请求到服务器获取数据
contentType: "application/x-www-form-urlencoded",
url : "${pageContext.request.contextPath}/resume/catedata/catedata",//获取数据的Servlet地址
queryParams: queryParams,
toolbar : '#toolbar', //工具按钮用哪个容器
striped : true, //表格显示条纹
pagination : true, //启动分页
pageSize : 5, //每页显示的记录数
pageNumber : 1, //当前第几页
pageList : [ 5, 10, 15, 20, 25 ], //记录数可选列表
//idField : "id", //指定主键列
uniqueId : "id",//每一行的唯一标识,一般为主键列
search : true, //是否启用查询
showColumns : true, //显示下拉框勾选要显示的列
showRefresh : true, //显示刷新按钮
sidePagination : "client", //表示客户端分页
columns : [ {
checkbox : true
}, {
field : 'id',
title : 'id',
visible : false
}, {
field : 'content',
title : '信息描述'
}, {
field : 'isopen',
title : '是否公开',
formatter : function(value, row, index) {
if ("1" == row.isopen) {
return "不公开";
} else {
return "公开";
}
}
}/* , {
field : 'button',
title : '操作',
events : actionEvents,
formatter : actionFormatter
} */],
onLoadSuccess : function(data) { //加载成功时执行
//alert("加载成功!" + data);
},
onLoadError : function(data) { //加载失败时执行
//alert("加载失败!" + data);
}
});
}
// 显示操作类型
function actionFormatter(value, row, index) {
return '<a class="mod" >修改</a> '
+ '<a id="delete">删除</a>';
}
//绑定事件操作 可通过ID 或者class 绑定(自选=书写形式参考jquery)
window.actionEvents = {
'click .mod' : function(e, value, row, index) {
window.open(
"${pageContext.request.contextPath}/user/updateuser?id="
+ row.id, "_self");
},
'click #delete' : function(e, value, row, index) {
if (row) {
$.ajax({
type : 'POST',
url : '${pageContext.request.contextPath}/user/deleteuser',
data : {
id : row.id
},
success : function(data) {
if (data) {
alert("删除成功!");
}
},
error : function() {
alert("删除失败!");
}
})
}
}
}
参数类:
$(document).ready(function() {
//调用函数,初始化表格
initTable();
});
function queryParams(params){
var temp = { //这里的键的名字和控制器的变量名必须一直,这边改动,控制器也需要改成一样的
cateId: "10",
pagesd:"234"
};
return temp;
}
按钮绑定,获取选中行数据:
$("#btn_edit").click(function() {
var row = $('#table').bootstrapTable('getSelections');
if (row.length == 0) {
alert("请先选中数据进行操作!");
}
if (row.length > 1) {
alert("只能选择一行,请重新选择!")
}
if (row.length == 1) {
//处理逻辑
var updateurl = '${pageContext.request.contextPath}/resume/catedata/update?id='
+ row[0].id;
content = '<iframe src="'
+ updateurl
+ '+" scrolling="auto" frameborder="0" style="width: 100%; height: 100%;"></iframe>';
$("#catedetail").html(content);
//绑定easyui弹窗,可选
$('#dlg').dialog({
title : '修改模块详细信息',
width : 650,
height : 400
});
}
})
分行情况下参数传递:
function queryData() {
var PageParam = new Object();
var ParamMap = attrDatas();
PageParam.page = params.pageSize ;
PageParam.pageSize = params.pageNumber;
var paramsMap = JSON.stringify(ParamMap);
var map = eval("(" + paramsMap + ")");
PageParam.searchContent = map;
var paramsShow = JSON.stringify(PageParam);
}
PageParam 对应的java类结构(适用自定义分页):
public class PageParam {
private int page;// 当前页
private int pageSize;// 每页显示的个数
private Map<String, Object> searchContent;// 查询map
private List<Order> sort;// 排序集合
// 存储用户信息 放到查询map中
public Map<String, Object> getSearchContent() {
return searchContent;
}
public void setSearchContent(Map<String, Object> searchContent) {
// if(searchContent.get("filter")!=""&&searchContent.get("filter")!=null)
// {
// System.out.println(searchContent.get("filter"));
// }
this.searchContent = searchContent;
}
public int getPage() {
return page;
}
public void setPage(int page) {
this.page = page;
}
public int getPageSize() {
return pageSize;
}
public void setPageSize(int pageSize) {
this.pageSize = pageSize;
}
public List<Order> getSort() {
return sort;
}
public void setSort(List<Order> sort) {
this.sort = sort;
}
}