废话不多说，先上一个基本示例，然后逐步介绍功能和配置。
1、远程加载列表数据：
1）引入库：
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.16.0/bootstrap-table.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.16.0/bootstrap-table.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.16.0/locale/bootstrap-table-zh-CN.min.js"></script>
<!--表头颜色、奇偶行不通颜色-->
<style type="text/css">
#mytab thead{background: #5488c4;}
#mytab tr:nth-child(even){
background:#f4f8fb;
}
</style>2）html代码：
<html>
<body>
<!--container 让整个页面居中，而且左右留白适中-->
<div class="container">
<div class="row">
<div class="table-responsive">
<div id="toolbar">
<form class="form-inline" onsubmit="return func()">
<div class="form-group">
<div class="input-group">
<div class="input-group-addon">产品名</div>
<select id="search_service" class="form-control" onchange="searchProduct();">
<option value="0">请选择产品线...</option>
</select>
</div>
</div>
<!--<button type="button" class="btn btn-primary queryButton">查询</button>-->
<button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#addInterfaceModal">添加数据</button>
</form>
</div>
<!--表格-->
<table id="mytab" class="table table-hover" style="word-break:break-all; word-wrap:break-all;"></table>
</div>
</div>
</div>
<!--bootstrap modal弹出框-->
<form class="form-horizontal" role="form" id="form_data" style="margin: 20px;">
<div class="modal fade" id="addInterfaceModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header"><!--header-->
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">新增接口信息</h4>
</div>
<div class="modal-body"><!--body-->
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="serviceId" class="col-sm-3 control-label">服务</label>
<div class="col-sm-9">
<select class="form-control" name="serviceId" id="serviceId">
<option value="0">请选择服务</option>
</select>
</div>
</div>
<div class="form-group">
<label for="interfaceName" class="col-sm-3 control-label">接口名</label>
<div class="col-sm-9">
<input type="text" class="form-control" name="interfaceName" id="interfaceName" placeholder="输入接口名">
</div>
</div>
<div class="form-group">
<label for="interfaceUrl" class="col-sm-3 control-label">接口URL</label>
<div class="col-sm-9">
<input type="text" class="form-control" name="interfaceUrl" id="interfaceUrl" placeholder="输入接口URL">
</div>
</div>
<div class="form-group">
<label for="header" class="col-sm-3 control-label">接口URL HEAD</label>
<div class="col-sm-9">
<input type="text" class="form-control" name="header" id="header" placeholder="格式如下，没有可不填! key:value;key:value">
</div>
</div>
</form>
</div>
<div class="modal-footer"><!--footer-->
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary" onClick=check_form();>提交</button>
<span id="tip"> </span>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>
</form>
<!--加载table列表数据、以及下拉列表数据-->
<script>
//todo1
</script>
</body>
<!--事件函数-->
<script>
//todo2
</script>
</html>3）scripts代码：
//todo1
$('#mytab').bootstrapTable({
url: 'url...',
toolbar: "#toolbar",
sidePagination: "false",
striped: true, // 是否显示行间隔色
search : "true",
showRefresh: true,
showToggle:true,
showColumns:true,
showHeader:true,
//uniqueId: "ID",
pagination: false, // 是否分页
sortable: false, // 是否启用排序
dataField : "data",//ajax返回json数据中，数组的key
columns: [{
field: 'id',
title: 'XXX'
},{
field: 'serviceId',
title: 'XXX'
},{
field: 'interfaceName',
title: 'XXX名'
},{
field: 'interfaceUrl',
title: 'XXX',
formatter: function(value, row, index) {
return "<a href='"+value+"' target='_blank'>连接</a>";
}
},{
field: 'header',
title: 'XXX'
},{
field: 'operation',
title: '操作',
width: 120,
align: 'center',
valign: 'middle',
formatter: function(value, row, index) {
var result = "";
result += "<a href='javascript:;' class='btn btn-xs btn_view' style='color:green' title='查看'><span class='glyphicon glyphicon-search'></span></a>";
result += "<a href='javascript:;' class='btn btn-xs btn_edit' style='color:#1890ff' title='编辑'><span class='glyphicon glyphicon-pencil'></span></a>";
result += "<a href='javascript:;' class='btn btn-xs btn_del' style='color:red' title='删除'><span class='glyphicon glyphicon-remove'></span></a>";
return result;
},
events: {
'click .btn_view': function(e, value, row, index) {
EditViewById(row,0);
},
'click .btn_edit': function(e, value, row, index) {
EditViewById(row,1);
},
'click .btn_del': function(e, value, row, index) {
DelById(row);
}
}
}
]
});
$.ajax({
url: "url...",
type: "get",
success:function(_data){
if (_data.code == 'A00000') {
var data = _data.data;
for (var i = 0; i < data.length; i++) {
$('#serviceId').append("<option value=" + data[i].id + ">" + data[i].serviceName + "</option>");
}
} else {
alert('获取服务列表请求出错');
return;
}
},error:function() {
alert('获取服务列表请求出错');
}
});事件函数代码：
function func() {
return false;
}
function searchProduct() {
var sid = $('#search_service').val();
var my_url = "url?serviceId="+sid;
if ( sid === "0") {
my_url = 'url2';
}
$.ajax({
url: my_url,
type: "get",
success:function(_data){
if (_data.code == 'A00000') {
var data = _data.data;
$("#mytab").bootstrapTable('load', data);
} else {
alert('查询接口列表请求出错');
return;
}
},error:function() {
alert('查询接口列表请求出错');
}
});
}
function check_form() {
var serviceId = $.trim($('#serviceId').val());
var interfaceName = $.trim($('#interfaceName').val());
var interfaceUrl = $.trim($('#interfaceUrl').val());
if(!interfaceName || !interfaceUrl){
alert('请输入接口名|接口URL！');
return;
}
if (serviceId === "0") {
alert('请选择服务！');
return;
}
var header = $.trim($('#header').val());
$.ajax({
url: "url3",
data:{"serviceId":serviceId,"interfaceName":interfaceName,"interfaceUrl":interfaceUrl,"header":header},
type: "get",
beforeSend:function(){
$("#tip").html("<span style='color:blue'>正在处理...</span>");
return true;
},
success:function(data){
if (data.code == 'A00000') {
$("#tip").html("<span style='color:blueviolet'>操作成功！</span>");
location.reload();
} else if (data.code == 'E00002') {
$("#tip").html("<span style='color:red'>失败，可能是接口名重名导致!</span>");
return;
}else {
$("#tip").html("<span style='color:red'>失败，请重试</span>");
return;
}
},error:function() {
alert('请求出错');
}
});
}2、重新加载数据：
我们都知道，当页面初始化时，我们使用bootstrapTable构造方法直接加载远程数据；但是当查询条件变了，需要重新从远程获取数据，然后将数据渲染到table中，总不能再次使用构造方法渲染一个新的表格吧。bootstrap提供了load方法，如下：
$('#table').bootstrapTable('load', newData);3、其他问题：
1）bootstrap table自动换行
<table class="table table-condensed" style="word-break:break-all; word-wrap:break-all;">
</table>2）表格中某列点击行，获取整行信息：
{
field: 'column_operate',
title: '操作',
formatter: function(value, row, index) {
return '<a href="javascript:void(0);" class="say_hi">点我</a>';
},
events: {
'click .say_hi': function(e, value, row, index) {
alert(row.name + ' 你好');
}
}
}这里列一下boostrap自带的图表css：
https://www.runoob.com/bootstrap/bootstrap-glyphicons.html
https://www.w3schools.com/bootstrap/bootstrap_ref_comp_glyphs.asp
bootstrap在线编辑器：
https://www.jc2182.com/bootstrap/bootstrap-grid-examples.html
4、参考：
bootstrap 官方api：http://www.itxst.com/bootstrap-table-methods/bbrb7bvz.html
其他博客：
https://www.jb51.net/article/140396.htm
https://www.jianshu.com/p/b5ca011a0d9c
https://www.jb51.net/article/122986.htm
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
