<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>BootStrap Table使用</title>
<!-- @*1、Jquery组件引用*@ -->
<script src="../../../Bootstrap_Table/Scripts/jquery-1.10.2.js"></script>
<!--
@*2、bootstrap组件引用*@ -->
<script src="../../../Bootstrap_Table/Content/bootstrap/bootstrap.js"></script>
<link href="../../../Bootstrap_Table/Content/bootstrap/bootstrap.css" target="_blank" rel="external nofollow" rel="stylesheet" />
<!-- @*3、bootstrap table组件以及中文包的引用*@ -->
<script src="../../../Bootstrap_Table/Content/bootstrap-table/bootstrap-table.js"></script>
<link href="../../../Bootstrap_Table/Content/bootstrap-table/bootstrap-table.css" target="_blank" rel="external nofollow" rel="stylesheet" />
<script src="../../../Bootstrap_Table/Content/bootstrap-table/locale/bootstrap-table-zh-CN.js"></script>
<!-- @*4、页面Js文件的引用*@ -->
<script src="../../../Bootstrap_Table/Scripts/Home/Index.js"></script>
<!-- <script src="js/jquery-1.10.2.min.js"></script> -->
<script type="text/javascript" src="./js/jszip.min.js"></script>
<script type="text/javascript" src="./js/FileSaver.js"></script>
<script type="text/javascript" src="./js/excel-gen.js"></script>
<!-- <script type="text/javascript" src="./js/demo.page.js"></script> -->
</head>
<body>
<div class="panel-body" style="padding-bottom:0px;">
<div class="panel panel-default" id="aaa">
<div class="panel-heading">查询条件</div>
<div class="panel-body">
<form id="formSearch" class="form-horizontal">
<div class="form-group" style="margin-top:15px">
<label class="control-label col-sm-1" for="txt_search_departmentname">部门名称</label>
<div class="col-sm-3">
<input type="text" class="form-control" id="txt_search_departmentname">
</div>
<label class="control-label col-sm-1" for="txt_search_statu">状态</label>
<div class="col-sm-3">
<input type="text" class="form-control" id="txt_search_statu">
</div>
<div class="col-sm-4" style="text-align:left;">
<button type="button" style="margin-left:50px" id="btn_query" class="btn btn-primary">查询</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="generate-excel" type="button" class="btn btn-default">
<span class="glyphicon glyphicon-edit" aria-hidden="true"></span>导出excel
</button>
</div>
<table id="tb_departments"></table>
</div>
</body>
<script>
$(function(){
//$('#generate-excel').trigger('click');
})
</script>
</html>
Index.js
$(function () {
//1.初始化Table
var oTable = new TableInit();
oTable.Init();
});
var TableInit = function () {
var oTableInit = new Object();
//初始化Table
oTableInit.Init = function () {
$('#tb_departments').bootstrapTable({
url: '${ct}/CNC/organization_showConfigMsg.action', //请求后台的URL（*）
method: 'post',
queryParams:{
page: 1,
rows: 10
},
toolbar: '#toolbar', //工具按钮用哪个容器
striped: true, //是否显示行间隔色
cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
pagination: true, //是否显示分页（*）
sortable: false, //是否启用排序
sortOrder: "asc", //排序方式
//queryParams: oTableInit.queryParams,//传递参数（*）
sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*）
pageNumber:1, //初始化加载第一页，默认第一页
pageSize: 10, //每页的记录行数（*）
pageList: [10, 25, 50, 100], //可供选择的每页的行数（*）
search: true, //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
strictSearch: true,
showColumns: true, //是否显示所有的列
showRefresh: true, //是否显示刷新按钮
minimumCountColumns: 2, //最少允许的列数
clickToSelect: true, //是否启用点击选中行
height: 500, //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
uniqueId: "ID", //每一行的唯一标识，一般为主键列
showToggle:true, //是否显示详细视图和列表视图的切换按钮
cardView: false, //是否显示详细视图
detailView: false, //是否显示父子表
columns: [
{field:'uid',checkbox:true},
{field:'startTime1',title:'上班时间1',width:'13%',align:'center'},
{field:'endTime1',title:'下班时间1',width:'13%',align:'center'},
{field:'startTime2',title:'上班时间2',width:'13%',align:'center'},
{field:'endTime2',title:'下班时间2',width:'13%',align:'center'},
{field:'awaitMax',title:'计划1',width:'12%',align:'center'},
{field:'stopMax',title:'计划1',width:'12%',align:'center'},
{field:'alarmMax',title:'报警1',width:'12%',align:'center'},
{field:'alarmInterval',title:'报警2',width:'12%',align:'center'}
],
onLoadSuccess : function(data) {//数据加载成功时触发
excel = new ExcelGen({
"src_id": "tb_departments",
"show_header": true
});
$("#generate-excel").click(function () {
excel.generate();
$('#aaa').hide();
});
//$('#generate-excel').trigger('click');
},
});
};
至于json格式就跟easyui的table的json格式一致,用法也很相似
效果图如下:
![DataTable..::.ToString 方法[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)