<%@ 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=)