版权声明：本文为博主原创文章，转载请附上博文链接！ https://blog.csdn.net/csdnluolei/article/details/84191733
bootstrapTable可以自定义ajax方法，通过ajax请求获得数据返回展示在bootstrapTable表格中，这种方式我自认为比较简单常用。本篇还加了简单增删改操作，获得表格选中的数据，以及按钮可用与否。这些比较常用。
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>bootstrap-table-demo</title>
<!-- 引入bootstrap样式 -->
<link rel="stylesheet" href="css/bootstrap.min.css" />
<!-- 引入bootstrap-table样式 -->
<link rel="stylesheet" href="css/plugins/bootstrap-table/bootstrap-table.min.css" />
<!-- layer -->
<link rel="stylesheet" href="js/plugins/layer/skin/layer.css" />
<style type="text/css">
.form-inline .form-group input[type=text], .form-inline .form-group select{
width:120px;
}
</style>
</head>
<body style="width: 90%;margin: 0 auto;">
<h2>bootstrap-table</h2>
<form id="form1" action="" method="get" class="form-inline">
<div class="form-group">
<label class="control-label ">ID：</label>
<input type="text" id="id" class="form-control" name="id" />
</div>
<div class="form-group">
<label class="control-label ">Name：</label>
<input type="text" id="name" class="form-control" name="name" />
</div>
<div class="form-group">
<label class="control-label ">Price：</label>
<!--<input type="text" id="price" class="form-control" name="price" />-->
<select class="form-control" id="price" name="price">
<option value="0">请选择</option>
<option value="1">$1</option>
<option value="2">$2</option>
<option value="3">$3</option>
<option value="4">$4</option>
</select>
</div>
<input type="submit" class="btn btn-primary" value="搜索"/>
</form>
<br/>
<div id="toolbar" class="btn-group">
<button class="btn btn-success" id="add">新增</button>
<button class="btn btn-warning" id="edit">编辑</button>
<button class="btn btn-info" id="look">查看</button>
<button class="btn btn-danger" id="delete">删除</button>
<button class="btn btn-primary" id="refresh">刷新</button>
</div>
<!--bootstrap-table表格-->
<table id="table"
data-toolbar="#toolbar"
data-toggle="table"
data-ajax="ajaxRequest"
data-search="false"
data-side-pagination="server"
data-pagination="true"
data-click-to-select="true"
data-single-select="true"
data-page-size= "10"
>
<thead style="background:#efefef;">
<tr>
<th data-checkbox="true"></th>
<th data-field="id">ID</th>
<th data-field="name">Name</th>
<th data-field="price">Price</th>
</tr>
</thead>
</table>
<!-- jquery -->
<script type="text/javascript" src="js/jquery.min.js" ></script>
<!-- bootstrap -->
<script type="text/javascript" src="js/bootstrap.min.js" ></script>
<!-- bootstrap-table -->
<script type="text/javascript" src="js/plugins/bootstrap-table/bootstrap-table.min.js" ></script>
<!-- 引入中文语言包 -->
<script type="text/javascript" src="js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js" ></script>
<!-- layer -->
<script type="text/javascript" src="js/plugins/layer/layer.min.js" ></script>
<script type="text/javascript">
//自定义ajax方法
function ajaxRequest(params){
//debugger;
$.ajax({
url: "/bootstrap-table/data4.json",
type: "POST",
dataType: "json",
success: function(rs){
console.log(rs)
var message = rs.array;
params.success({ //注意
total: rs.total,
rows: message
});
//debugger;
},
error: function(rs){
console.log(rs)
}
});
}
var $table = $("#table"),
$add = $("#add"),
$edit = $("#edit"),
$look = $("#look"),
$delete = $("#delete"),
$refresh = $("#refresh");
//按钮可用与否
$edit.prop('disabled', true);
$look.prop('disabled', true);
$delete.prop('disabled', true);
$table.on('check.bs.table uncheck.bs.table ' +
'check-all.bs.table uncheck-all.bs.table',
function() {
var bool = !($table.bootstrapTable('getSelections').length && $table.bootstrapTable('getSelections').length == 1);
$edit.prop('disabled', bool);
$look.prop('disabled', bool);
$delete.prop('disabled', bool);
});
/**
* 获得选中的数据，为一个对象数组
*/
function getSelections() {
return $.map($table.bootstrapTable('getSelections'), function(row) {
return row;
});
}
//刷新
$refresh.on('click', function(){
$table.bootstrapTable('refresh');
});
//添加
$add.on('click', function(){
layer.open({
type: 2,
title: '添加商品',
shadeClose: false,
shade: 0.8,
area: ['50%', '60%'],
content: 'add.html'
});
});
//查看
$look.on('click', function(){
var row = getSelections()[0];
var id = row.id;
var name = row.name;
var price = row.price; //debugger;
layer.open({
type: 2,
title: '查看商品',
shadeClose: false,
shade: 0.8,
area: ['50%', '60%'],
content: 'edit.html?id=' + id + '&name=' + name + '&price='+ price +'&type=look'
});
});
//编辑
$edit.on('click', function(){
var row = getSelections()[0];
var id = row.id;
var name = row.name;
var price = row.price;
layer.open({
type: 2,
title: '编辑商品',
shadeClose: false,
shade: 0.8,
area: ['50%', '60%'],
content: 'edit.html?id=' + id + '&name=' + name + '&price='+ price ,
end: function () { //最后执行reload
location.reload();
}
});
});
//删除
$delete.on('click', function(){
var ids = getSelections();
layer.confirm('您是否要删除当前 ' + ids.length + '条数据？', {
btn: ['是', '否']
}, function() {
delServer(ids);
});
});
//删除
function delServer(ids){
layer.msg('删除成功');
}
</script>
</body>
</html>
data4.json
{
"code": 0,
"total": 1314,
"message": "success",
"array" :
[
{
"id": 0,
"name": "Item 0",
"price": "$1"
},
{
"id": 1,
"name": "Item 1",
"price": "$1"
},
{
"id": 2,
"name": "Item 2",
"price": "$2"
},
{
"id": 3,
"name": "Item 3",
"price": "$3"
},
{
"id": 4,
"name": "Item 4",
"price": "$1"
},
{
"id": 5,
"name": "Item 5",
"price": "$1"
},
{
"id": 6,
"name": "Item 6",
"price": "$1"
},
{
"id": 7,
"name": "Item 7",
"price": "$1"
},
{
"id": 8,
"name": "Item 8",
"price": "$1"
},
{
"id": 9,
"name": "Item 9",
"price": "$1"
}
]
}edit.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>编辑</title>
<!-- 引入bootstrap样式 -->
<link rel="stylesheet" href="css/bootstrap.min.css" />
<!-- 引入bootstrap-table样式 -->
<link rel="stylesheet" href="css/plugins/bootstrap-table/bootstrap-table.min.css" />
<!-- layer -->
<link rel="stylesheet" href="js/plugins/layer/skin/layer.css" />
<style type="text/css">
.form-group{
width:90%;
margin: 15px auto;
}
</style>
</head>
<body>
<div>
<form id="form1" action="" method="get" class="">
<div class="form-group">
<label class="control-label ">ID：</label>
<input type="text" id="id" class="form-control" name="id" />
</div>
<div class="form-group">
<label class="control-label ">Name：</label>
<input type="text" id="name" class="form-control" name="name" />
</div>
<div class="form-group">
<label class="control-label ">Price：</label>
<!--<input type="text" id="price" class="form-control" name="price" />-->
<select class="form-control" id="price" name="price">
<option value="$0">请选择</option>
<option value="$1">$1</option>
<option value="$2">$2</option>
<option value="$3">$3</option>
<option value="$4">$4</option>
</select>
</div>
<div class="form-group">
<input type="button" id="submit" class="btn btn-primary" style="width: 25%;" value="修改"/>
<input type="button" id="close" class="btn btn-danger" style="width: 25%;" value="关闭"/>
</div>
</form>
</div>
<!-- jquery -->
<script type="text/javascript" src="js/jquery.min.js" ></script>
<script type="text/javascript" src="js/jquery-1.11.3.min.js" ></script>
<!-- layer -->
<script type="text/javascript" src="js/plugins/layer/layer.min.js" ></script>
<script type="text/javascript">
//给jq扩展方法
(function ($) {
$.getUrlParam = function (name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if (r != null) return unescape(r[2]); return null;
}
})(jQuery);
//alert($.getUrlParam('id'));
var index = parent.layer.getFrameIndex(window.name);
$("#close").on('click', function(){
parent.layer.close(index);
});
//
var typelook = $.getUrlParam("type");
//初始化数据
initData();
if(typelook){
$("#submit").hide();
$("input").attr('disabled',true);
$("select").attr('disabled',true);
$('#close').attr('disabled', false);
}
function initData(){
var id = $.getUrlParam('id');
var name = $.getUrlParam('name');
var price = $.getUrlParam('price');
$('#id').val(id);
$('#name').val(name);
$('#price').val(price);
}
$("#submit").click(function(){
layer.msg("修改成功");
setTimeout(function (){
parent.layer.close(index);
}, 1000);
});
</script>
</body>
</html>