引用
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/bootstrap-table.css" />
<script src="js/comjs/bootstrap.min.js"></script>
<script src="js/comjs/bootstrap-table.js"></script>
<script src="js/comjs/bootstrap-table-zh-CN.js"></script>
html
<div class="panel-body" style="padding-bottom:0px;">
<div class="panel panel-default">
<div class="panel-heading">查询条件</div>
<div class="panel-body">
<form id="formSearch" class="form-horizontal">
<div class="form-group">
<label class="control-label col-sm-2 top">楼宇名称:</label>
<div class="col-sm-2 top">
<input type="text" class="form-control input-sm" id="buildName">
</div>
<div class="col-sm-4 top " style="text-align:right;float:right">
<button type="button" style="margin-left:50px" id="btn_query" class="btn btn-primary btn-sm">查询</button>
</div>
</div>
</form>
</div>
</div>
<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>
<button id="btn_export" type="button" class="btn btn-default">
<span class="glyphicon glyphicon-log-out" aria-hidden="true"></span>导出
</button>
</div>
<table id="tb_departments" class='table-bordered'></table>
</div>
js–表格初始化,按钮事件
//表格初始化
var TableInit = function () {
var oTableInit = new Object();
//初始化Table
oTableInit.Init = function (params) {
$('#tb_departments').bootstrapTable({
url:"queryBuildingInfoList.action",//要请求数据的文件路径
toolbar: '#toolbar', //工具按钮用哪个容器
pagination: true, //是否显示分页(*)
sortable: true, //是否启用排序
sortOrder: "asc", //排序方式
pageNumber:1, //初始化加载第一页,默认第一页
pageSize: 10, //每页的记录行数(*)
pageList: [10, 25, 50, 100], //可供选择的每页的行数(*)
queryParams:queryParams,//请求服务器时所传的参数
sidePagination: 'server',//分页方式
queryParams:queryParams,//请求服务器时所传的参数
queryParamsType : "limit",
strictSearch: false,
showColumns: true, //是否显示所有的列
showRefresh: true, //是否显示刷新按钮
minimumCountColumns: 2, //最少允许的列数
clickToSelect: true, //是否启用点击选中行
uniqueId: "id", //每一行的唯一标识,一般为主键列
showToggle:false, //是否显示详细视图和列表视图的切换按钮
cardView: false, //是否显示详细视图
detailView: false, //是否显示父子表
columns: tableCol,
responseHandler:responseHandler,//请求数据成功后,渲染表格前的方法,
onLoadSuccess: function(data){
$('.loadingbox').hide()
},
onLoadError:function(data){
layer.msg('加载失败,请刷新后重新尝试', {icon: 2});
setTimeout(function(){
$('.loadingbox').hide()
},1000)
}
});
};
function queryParams(params){
var text_city= $("#build_city").find("option:selected").text();
var city=''
city= text_city=='河南'?'':text_city;
return {
pageSize : params.limit, //每一页的数据行数,默认是上面设置的10(pageSize)
pageIndex : params.offset/params.limit+1, //当前页面,默认是上面设置的1(pageNumber)
name:$('#buildName').val(),
city:text_city=='河南'?'':text_city,
use_type:$('#use_type').val(),
type:$('#type').val(),
structure:$('#structure').val()
}
}
//请求成功方法
function responseHandler(res){
if(res.code==0){
$('#btn_export').attr('data-export',res.export)//是否有导出权限。ture为有
}else{
$('#btn_export').attr('data-export','')
}
console.log(res.page.totalPages)
//如果没有错误则返回数据,渲染表格
return {
total : res.page.totalPages, //总页数,前面的key必须为"total"
rows : res.data //行数据,前面的key要与之前设置的dataField的值一致.
};
};
return oTableInit;
};
var ButtonInit = function () {
var oInit = new Object();
oInit.Init = function () {
var $table = $('#tb_departments')
//初始化页面上面的按钮事件
$('#btn_add').click(function(){
//跳转
})
$('#btn_edit').click(function(){
var getsel=$table.bootstrapTable('getSelections')
})
$('#btn_delete').click(function(){
var ids = $.map($table.bootstrapTable('getSelections'), function (row) {
return row.id
})
if(ids.length==0){
layer.msg('请先选中想删除的行', {icon: 6});
return
}
$('#tb_departments').bootstrapTable('remove', {
field: 'id',
values:idx
})
})
$('#btn_export').click(function(){
if($(this).attr('data-export')){
exoprtBuildingInfo()
}else{
layer.msg('您暂时没有导出权限,不能进行导出!', {icon: 6});
}
})
};
return oInit;
};
列数据
//表格头部
var tableCol=[[{
field:'checkbox',
title : '选择',
checkbox:true,
},{
field: 'id',
title: "id",
sortable:true,
width:60,
visible: false
},{
field: 'num1',
title: "编号1",
visible: false
},{
field: 'num2',
title: "编号2",
visible: false
},{
field : 'operate',
title : '操作',
events : handle,//事件
formatter : operateFormatter//html
},
]];
//事件:
//表格操作
window.handle = {
"click .delect" : function(e, value, row, index) { //删除
//delete
},
"click .edit" : function(e, value, row, index) { //编辑
//编辑
},
}
function operateFormatter(value, row, index) {//赋予的参数)btn-success btn-primary
return [
'<div class="btn btn-sm edit"><span class="glyphicon glyphicon-pencil text-primary"></span></div>',
'<div class="btn btn-sm delect"><span class="glyphicon glyphicon-remove text-primary"></span></div>',
].join('');
}
js 调用
//1.初始化Table
var oTable = new TableInit();
oTable.Init();
//2.初始化Button的点击事件
var oButtonInit = new ButtonInit();
oButtonInit.Init();
查询按钮
服务器端分页
sidePagination: ‘server’,//分页方式
//查询接口
$('#btn_query').click(function(){
$('#tb_departments').bootstrapTable('refresh', {
url : 'queryBuildingInfoList.action'
});
})
客户端分页
$(btn).click(function(){
//ajax 获取数据
var list=res.data
$("#tb_departments").bootstrapTable('load', list);//主要是要这种写法
})