介绍
偶然看见H+这个前端后台里面有boorstraptable这个表格插件、看官方有推荐就自己看了一下、有点类似esay ui。看了一下自带的demo是在标签里面嵌套的请求地址。感觉不太好、然后网上搜了搜。有好的也有不好的，自己总结了一下。
引用一张图片来介绍参数：
html代码示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="/static/admin/css/bootstrap.css?v=3.3.7" rel="stylesheet">
<link href="/static/admin/css/font-awesome.min.css?v=4.7.0" rel="stylesheet">
<link href="/static/admin/css/animate.css" rel="stylesheet">
<link href="/static/plugins/admin/bootstrap-table/assets/bootstrap-table/css/bootstrap-editable.css" rel="stylesheet">
<link href="/static/plugins/admin/bootstrap-table/assets/bootstrap-table/css/bootstrap-table.min.css" rel="stylesheet">
<link href="/static/admin/css/style.css?v=4.1.0" rel="stylesheet">
<link href="/static/admin/plugins/sweetalert/sweetalert.css" rel="stylesheet">
<link href="/static/plugins/common/uploadifive/uploadifive.css" rel="stylesheet"/>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="/static/plugins/admin/bootstrap-table/ie9/html5shiv.min.js"></script>
<script src="/static/plugins/admin/bootstrap-table/ie9/respond.min.js"></script>
<script src="/static/plugins/admin/bootstrap-table/ie9/json2.min.js"></script>
<![endif]-->
<style>
#uploadifive-file_upload{ width:100% !important; }
.uploadifive-queue-item{ padding:0px;height:34px;background-color:#fff;border-bottom: none; }
</style>
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
<div class="row">
<div class="col-sm-12">
<div class="ibox ">
<div class="ibox-title">
<h5><a href="javascript:location.href='';"> 查看轮播图</a></h5>
<div class="ibox-tools">
<a href="javascript:;" id="input_show">
<i class="fa fa-plus"></i>
</a>
<a class="dropdown-toggle">
《-搜索
</a>
<a class="dropdown-toggle">
<i class="fa fa-wrench"></i>
</a>
</div>
</div>
<div class="ibox-content" style="height:900px;">
<div class="panel panel-default" id="search_input" style="display: none;">
<div class="panel-heading">
查询条件
</div>
<div class="panel-body form-group" style="margin-bottom:0px;">
<label class="col-sm-1 control-label" style="text-align: right; margin-top:5px">类型：</label>
<div class="col-sm-2">
<select class="form-control" id="type" name="articleType">
<option value="">选择轮播图类型</option>
{volist name="banner_type" id="type"}
<option value="{$type.id}">{$type.name}</option>
{/volist}
</select>
</div>
<div class="col-sm-1 col-sm-offset-4">
<button class="btn btn-primary" id="search_btn">查询</button>
</div>
</div>
</div>
<table id="mytab" class="table table-hover"></table>
<div id="toolbar" class="btn-group pull-right" style="margin-right: 20px;">
<button id="btn_edit" type="button" class="btn btn-default" style=" border-radius: 0">
<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>
<button id="btn_add" type="button" class="btn btn-default">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
</button>
<button id="btnExport" type="button" class="btn btn-default">
<span class="glyphicon glyphicon-export" aria-hidden="true"></span>导出
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 全局js -->
<script src="/static/admin/js/jquery.min.js?v=2.1.4"></script>
<script src="/static/admin/js/bootstrap.min.js?v=3.3.6"></script>
<!-- Bootstrap table -->
<script src="/static/plugins/admin/bootstrap-table/assets/bootstrap-table/js/bootstrap-table.min.js"></script>
<script src="/static/plugins/admin/bootstrap-table/assets/bootstrap-table/js/bootstrap-table-zh-CN.js"></script>
<script src="/static/plugins/admin/bootstrap-table/assets/bootstrap-table/js/bootstrap-table-export.js"></script>
<script src="/static/plugins/admin/bootstrap-table/assets/bootstrap-table/js/tableExport.js"></script>
<!-- 自定义js 有它可以看-->
<script src="/static/admin/js/content.js?v=1.0.0"></script>
<script src="/static/admin/plugins/sweetalert/sweetalert.min.js"></script>
<script src="/static/plugins/common/TeachDialog.js"></script>
<!-- Peity -->
<script>
$('#input_show').click(function(){
if($("#search_input").is(":hidden")){
$("#search_input").show(); //如果元素为隐藏,则将它显现
}else{
$("#search_input").hide(); //如果元素为显现,则将其隐藏
}
});
//根据窗口调整表格高度
$(window).resize(function() {
$('#mytab').bootstrapTable('resetView', {
height: tableHeight()
})
})
//生成用户数据
$('#mytab').bootstrapTable({
method: 'post',
contentType: "application/x-www-form-urlencoded",//必须要有！！！！
url:"/admin/Flink/banner_index",//要请求数据的文件路径
height:tableHeight(),//高度调整
striped: true, //是否显示行间隔色
dataField: "res",
//bootstrap table 可以前端分页也可以后端分页，这里
//我们使用的是后端分页，后端分页时需返回含有total：总记录数,这个键值好像是固定的
//正常后台返回 {rows: [,…], total: 14}集合 但数据集合的rows：可以更改自定义的 dataField 自己定义成自己想要的就好
pageNumber: 1,
//初始化加载第一页，默认第一页
pagination:true,//是否分页
queryParamsType:'limit',//查询参数组织方式
queryParams:queryParams,//请求服务器时所传的参数
sidePagination:'server',//指定服务器端分页 :分页方式：client客户端分页，server服务端分页（*）
pageSize:10,//单页记录数
pageList:[10,20,30],//分页步进值
icons: {refresh: "glyphicon-repeat", toggle: "glyphicon-list-alt", columns: "glyphicon-list",export:"glyphicon-export"},
showRefresh:true,//刷新按钮
showColumns:true,
showToggle:true, //是否在工具栏上显示切换 、来解决不加载图标的问题
clickToSelect: true,//是否启用点击选中行
toolbarAlign:'right',//工具栏对齐方式
buttonsAlign:'right',//按钮对齐方式
toolbar:'#toolbar',//指定工作栏
showExport: true, //是否显示导出
exportDataType: "basic", //basic', 'all', 'selected'.
exportTypes:['excel','csv','txt','xlsx','json','doc'], //导出文件类型 我的后台支持6个
exportOptions: {
ignoreColumn : [0,99],// 不导出的列
fileName: 'banner导出图', //文件名称设置
worksheetName: 'sheet1', //表格工作区名称
tableName: 'banner列表',
excelstyles: ['background-color', 'color', 'font-size', 'font-weight'],
onMsoNumberFormat: DoOnMsoNumberFormat, //支持回调函数
},
onLoadSuccess:function(data){
//表格数据加载成功事件
},
onPageChange:function(number,size){
//表格翻页事件
},
columns:[
{
//复选框
checkbox:true,
},
{
title:"封面图",
field:"img",
align:'center',
formatter:function(value){
if(/^\s*$/.test(value)){
return "<img src='/static/plugins/common/uploadifive/tpax.jpg' width='150' height='80' >";
}else{
return "<img src='"+value+"' width='150' height='80'>";
}
}
},
{
title:'链接',
field:'link',
align:'center',
// visible:false 设置数据表格上不显示
},
{
title:'分类',
field:'name',
align:'center',
// visible:false 设置数据表格上不显示
},
{
title:'排序',
field:'px',
align:'center',
sortable: true,
editable:{
type: 'text',
title: 'Item Price',
validate: function (value) {
value = $.trim(value);
if (!value) {
return 'This field is required';
}
if (!/^\$/.test(value)) {
return 'This field needs to start width $.'
}
var data = $table.bootstrapTable('getData'),
index = $(this).parents('tr').data('index');
console.log(data[index]);
return '';
}
}
// visible:false 设置数据表格上不显示
},
{
title:'创建时间',
field:'create_time',
align:'center',
},
],
locale:'zh-CN',//中文支持,
responseHandler:function(res){
//在ajax获取到数据，渲染表格之前，修改数据源
return res;
}
});
function DoOnMsoNumberFormat(cell, row, col) {
var result = "";
if (row > 0 && col == 0)
result = "\\@";
return result;
}
$("#btnExport").click(function() {
var tableNum = $("#mytab thead tr th").length;
$("#mytab").tableExport({
type : 'excel', // 'csv', 'txt', 'sql', 'json', 'xml', 'excel','doc', 'png' or 'pdf'
fileName : '表名',
escape : 'false',
ignoreColumn : [ tableNum - 1],// 不导出的列
});
});
//请求服务数据时所传参数
function queryParams(params){
return{
//每页多少条数据
pageSize: params.limit,
//请求第几页
offset: params.offset,
type:$("#type").val(),
sortName: params.sort,
sortOrder: params.order
}
}
//查询按钮事件
$('#search_btn').click(function(){
$('#mytab').bootstrapTable('refresh', { url: "/admin/Flink/banner_index"});
});
//tableHeight函数
function tableHeight(){
//可以根据自己页面情况进行调整
return $(window).height() -100;
}
</script>
</body>
</html>请求数据
返回数据
获取选中行的数据、我是绑定到添加上了、可以多选也可以单选、成功并移除表格行
$('#btn_delete').click(function(){
var selectContent = $('#mytab').bootstrapTable('getSelections');
if(typeof(selectContent) == 'undefined' || selectContent.length==0 ) {
swal({
title: "请选择至少一行数据!",
type: "warning",
});
return false;
}else{
var ids="";
for(var i in selectContent){
ids=ids+""+selectContent[i].id+",";
}
var idArr=ids.split(',');
$.ajax({
url: '/admin/Flink/banner_delete',
data: "ids="+ids,
type: 'POST',
dataType: 'json', //返回的数据类型
success: function(data) {
if(data.status==1){
for(var i in idArr){
if(idArr[i]=="")continue;
$('#mytab').bootstrapTable('remove', {
field: 'id',
values: [parseInt(idArr[i])]
});
}
}else{
}
},
});
}
});结果
php（TP5框架）代码示例
function Article_worklog2()
{
// $id = $this->request->param()['id'];
$id=1;
$rows = $this->request->param()['offset'];
$page = $this->request->param()['pageSize'];
$where= $this->request->param();
isset($where['Name']) && $where['Name']!=null?$where=['title'=>$where['Name']]:$where="";
$data = Db::name('Article')
->join('admin', 'userid=admin.id ', 'left')
->where('userid=' . $id)
->where($where)
->order("createtime", 'desc')
->limit($rows, $page)
->select();
$count = Db::name('Article')
->join('admin', 'userid=admin.id ', 'left')
->where('userid=' . $id)
->where($where)
->order("createtime", 'desc')
->count();
$res['res']=$data;
$res['total']=$count;
echo json_encode($res);die;
}补充
补充–获取：bootstrap table当前分页
console.log($('#mytab').bootstrapTable('getOptions').pageNumber);
补充–导出：
如果在table插件已经配置了 、这段代码删除即可
补充–自定义图标
参考文档
更多文章：表格组件神器：bootstrap table — 懒得安分 (较全)
官方demo地址：http://issues.wenzhixin.net.cn/bootstrap-table/index.html
导出参考：https://blog.csdn.net/ning521513/article/details/60744749
中文文档：http://blog.csdn.net/rickiyeat/article/details/56483577
