一、bootstrap table 最简单实例
二、bootstrap table 获取点击行数据+弹窗显示编辑
<script type="text/javascript">
$(function () {
$('#table1').bootstrapTable({
url: '/sell/managerSellJson?pageNum=1',
cache:false,
striped:true,
pagination: true, // 在表格底部显示分页组件，默认false
contentType: "application/x-www-form-urlencoded",//请求内容格式 默认是 application/json 自己根据格式自行服务端处理
dataType: "json",//期待返回数据类型
method:"post",
columns: [{
field: 'id',
title: 'Item ID'
}, {
field: 'name',
title: 'Item Name'
}, {
field: 'contact',
title: 'Item Name'
}, {
field: 'phone',
title: 'Item Price'
}, {
field: 'twitter',
title: 'Item Name'
}, {
field: 'address',
title: 'Item Price'
},
]
});
}）；
<body>
<div id="table1" class="table table-bordered table-hover"></div>
</body>
//后端controller
@RequestMapping(value = "/managerSellJson",method = RequestMethod.POST)
@ResponseBody
public List<Goods> managerModelJson(Model model,@RequestParam(defaultValue ="1") String pageNum ){
List<Goods> goodsList=new ArrayList<Goods>();
Page<Goods> pages=goodsService.findGoodsNoCriteria(Integer.parseInt(pageNum),20,"commentNum");
for(Goods g:pages){
goodsList.add(g);
}
return goodsList;
}
//实体类Goods 的属性跟前端js中 columns: [{ field: 'id',....}] 的field一一对应即可bootstrap table 获取点击行数据+弹窗显示编辑】
//js：
// edit method
$("#btn_edit").click(function () {
var a = $.map($("#table1").bootstrapTable('getSelections'), function (row) {
/*alert("选中行==" + row.id)*/
$("#edit_name").val(row.name);
$("#edit_sn").val(row.sn);
$("#edit_weight").val(row.weight);
$("#edit_marketPrice").val(row.marketPrice);
$("#edit_shopPrice").val(row.shopPrice);
$("#edit_unit").val(row.unit);
$("#edit_number").val(row.number);
$("#edit_goods_sn").val(row.sn);
$("#myModal").modal({
keyboard: true
})
});
})
//html
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<form enctype="multipart/form-data" method="post" action="/sell/imageUpload">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
×
</button>
<h4 class="modal-title" id="myModalLabel">Edit goods information</h4>
</div>
<div class="modal-body">
<div class="input-group">
<label class="col-lg-4">name:</label>
<input class="col-lg-8" id="edit_name" value="${goods.name}" name="name"/>
</div>
<div class="input-group">
<label class="col-lg-4">code:</label>
<input class="col-lg-8" id="edit_sn" name="sn" value="${goods.sn}" />
</div>
<div class="input-group">
<label class="col-lg-4">weight:</label>
<input class="col-lg-8" id="edit_weight" name="weight" value="${goods.weight}" />
</div>
<div class="input-group">
<label class="col-lg-4">marketPrice:</label>
<input class="col-lg-8" id="edit_marketPrice" name="marketPrice" value="${goods.marketPrice}" />
</div>
<div class="input-group">
<label class="col-lg-4">shopPrice:</label>
<input class="col-lg-8" id="edit_shopPrice" name="shopPrice" value="${goods.shopPrice}" />
</div>
<div class="input-group">
<label class="col-lg-4">unit:</label>
<input class="col-lg-8" id="edit_unit" name="unit" value="${goods.unit}" />
</div>
<div class="input-group">
<label class="col-lg-4">number:</label>
<input class="col-lg-8" id="edit_number" name="number" value="${goods.number}" />
</div>
<div class="input-group">
<label class="col-lg-4">detail:</label>
<textarea class="col-lg-8" id="edit_detail" name="detail" value="${goods.detail}" />
</div>
<div class="input-group">
image<input type="file" id="edit_image" name="file"/>
<input type="submit" value="upload"/>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">close</button>
<input type="submit" class="btn btn-primary" id="edit_save" value="submit">提交更改</input>
</div>
</form>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>