BootStrap-Table主子表
效果如下：
實現步驟
引js和css
<script th:src="@{~/js/bootstrap.js}"></script>
<script th:src="@{~/bootstrap-table/bootstrap-table.js}"></script>
<link th:href="@{~/bootstrap-table/bootstrap-table.css}" rel="stylesheet">
<script th:src="@{~/bootstrap-table/locale/bootstrap-table-zh-CN.js}"></script>html中增加table標籤
<div class="col-md-12">
<table id="orders_table"></table>
</div>完整代碼如下：
<!DOCTYPE html>
<html>
<head>
<header th:replace="layout/admin/head :: head"></header>
<!--日期選擇器相關-->
<script type="text/javascript" th:src="@{~/js/bootstrap-datetimepicker.js}"></script>
<link th:href="@{~/css/bootstrap-datetimepicker.css}" rel="stylesheet"/>
</head>
<body>
<div class="container-fluid">
<div class="panel panel-default">
<div class="panel-heading">查詢條件</div>
<div class="panel-body">
<div class="row">
<div class="col-md-2">
<div class="input-group">
<span class="input-group-addon">訂單號</span>
<input id="orderId" type="text" class="form-control" aria-placeholder="訂單號">
</div>
</div>
<div class="col-md-3">
<div class="input-group">
<span class="input-group-addon">開始時間：</span>
<div id="begin_date" class="input-group date form_datetime" language="zh-CN">
<input class="form-control" name="beginDate" size="16" type="text" id="beginDate" />
<span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
<span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
</div>
</div>
</div>
<div class="col-md-3">
<div class="input-group">
<span class="input-group-addon">結束時間：</span>
<div id="end_date" class="input-group date form_datetime">
<input class="form-control" name="endDate" size="16" type="text" id="endDate" />
<span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
<span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
</div>
</div>
</div>
<div class="col-md-2">
<button id="doSearch" type="button" class="btn btn-info">查詢</button>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<table id="orders_table"></table>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
//1.初始化Table
var oTable = new TableInit();
oTable.Init();
});
var TableInit = function () {
var oTableInit = new Object();
//初始化Table
oTableInit.Init = function () {
$('#orders_table').bootstrapTable({
url: '/admin/api/orders', //請求後臺的URL（*）
method: 'post', //請求方式（*）
toolbar: '#toolbar', //工具按鈕用哪個容器
striped: true, //是否顯示行間隔色
cache: false, //是否使用緩存，默認爲true，所以一般情況下需要設置一下這個屬性（*）
pagination: true, //是否顯示分頁（*）
sortable: false, //是否啓用排序
sortName: 'orderTime',
sortOrder: "desc", //排序方式
queryParams: oTableInit.queryParams,//傳遞參數（*）
sidePagination: "server", //分頁方式：client客戶端分頁，server服務端分頁（*）
pageNumber: 1, //初始化加載第一頁，默認第一頁
pageSize: 10, //每頁的記錄行數（*）
pageList: [10, 25, 50, 100], //可供選擇的每頁的行數（*）
search: false, //是否顯示錶格搜索，此搜索是客戶端搜索，不會進服務端，所以，個人感覺意義不大
strictSearch: true,
showColumns: false, //是否顯示所有的列
showRefresh: false, //是否顯示刷新按鈕
minimumCountColumns: 2, //最少允許的列數
clickToSelect: true, //是否啓用點擊選中行
height: 500, //行高，如果沒有設置height屬性，表格自動根據記錄條數覺得表格高度
uniqueId: "orderId", //每一行的唯一標識，一般爲主鍵列
showToggle: false, //是否顯示詳細視圖和列表視圖的切換按鈕
cardView: false, //是否顯示詳細視圖
detailView: true, //是否顯示父子表
// classes:'table-striped',
responseHandler:function(res){
return{
"total":res.data.totalElements,
"rows":res.data.content
}
},
columns: [{
checkbox: false
}, {
field: 'orderId',
title: '訂單號'
}, {
field: 'venderId',
title: '商家ID'
}, {
field: 'orderTime',
title: '下單時間'
}, {
field: 'venderCode',
title: '客戶編碼'
}, {
field: 'payType',
title: '支付方式'
}, {
field: 'totalMoney',
title: '總金額'
}, {
field: 'discount',
title: '優惠金額'
}, {
field: 'payMoney',
title: '實付金額'
}, {
field: 'pickName',
title: '收貨人'
}, {
field: 'pickAddress',
title: '收貨人地址'
}, {
field: 'pickPhone',
title: '手機號'
}, {
field: 'orderState',
title: '訂單狀態'
}, {
field: 'platformCoupon',
title: '平臺優惠'
}, {
field: 'ShopCoupon',
title: '商家優惠'
}, {
field: 'remark',
title: '備註'
}, {
field: 'freight',
title: '運費'
}, {
field: 'companyName',
title: '公司名稱'
}],
onExpandRow:function (index,row,$detail) {
InitDetail(index,row,$detail);
}
});
}
//得到查詢的參數
oTableInit.queryParams = function (params) {
var data = new Object();
data.size=params.limit;
data.page=params.offset/params.limit;
data.sort=params.sort;
data.order=params.order;
if ($('#orderId').val() != null && $('#orderId').val() !== "")
{
data.orderId=$('#orderId').val();
}
if($('#beginDate').val()!=null && $('#beginDate').val()!="")
{
data.beginDate=$('#beginDate').val();
}
if($('#endDate').val()!=null && $('#endDate').val()!="")
{
data.endDate=$('#endDate').val();
}
return data;
};
return oTableInit;
};
//初始化子表格(循環)
InitDetail = function (index, row, $detail) {
var parentid = row.orderId;
var cur_table = $detail.html('<table></table>').find('table');
$(cur_table).bootstrapTable({
url: '/admin/api/orderdetails',
method: 'post',
queryParams: function (params) {
var data = new Object();
data.size=10;
data.page=0; //因爲是按照訂單號查，所以只會有一條
data.sort=params.sort;
data.order=params.order;
data.orderId=parentid;
return data;
},
toolbar: '#toolbar', //工具按鈕用哪個容器
striped: true, //是否顯示行間隔色
cache: false, //是否使用緩存，默認爲true，所以一般情況下需要設置一下這個屬性（*）
pagination: true, //是否顯示分頁（*）
sortable: false, //是否啓用排序
sortName: 'orderId',
sortOrder: "asc", //排序方式
sidePagination: "client", //分頁方式：client客戶端分頁，server服務端分頁（*）
pageNumber: 1, //初始化加載第一頁，默認第一頁
pageSize: 10, //每頁的記錄行數（*）
pageList: [10, 25, 50, 100], //可供選擇的每頁的行數（*）
search: false, //是否顯示錶格搜索，此搜索是客戶端搜索，不會進服務端，所以，個人感覺意義不大
strictSearch: true,
showColumns: false, //是否顯示所有的列
showRefresh: false, //是否顯示刷新按鈕
minimumCountColumns: 2, //最少允許的列數
clickToSelect: true, //是否啓用點擊選中行
height: 500, //行高，如果沒有設置height屬性，表格自動根據記錄條數覺得表格高度
uniqueId: "orderId", //每一行的唯一標識，一般爲主鍵列
showToggle: false, //是否顯示詳細視圖和列表視圖的切換按鈕
cardView: false, //是否顯示詳細視圖
detailView: true, //是否顯示父子表
responseHandler:function(res){
return{
// "total":res.data.totalElements,
"rows":res.data
}
},
columns: [{
checkbox: false
}, {
field: 'orderId',
title: '訂單編號'
}, {
field: 'skuName',
title: '商品名稱'
}, {
field: 'purchaseNum',
title: '數量'
}, {
field: 'skuPrice',
title: '價格'
}, {
field: 'venderSku',
title: '商品編碼'
}, {
field: 'discount',
title: '優惠'
}],
//無線循環取子表，直到子表裏面沒有記錄
onExpandRow: function (index, row, $Subdetail) {
InitDetail(index, row, $Subdetail);
}
});
};
$('#doSearch').on('click',function () {
var opt={
silent:true
};
$("#orders_table").bootstrapTable('refresh', opt);
})
</script>
<script type="text/javascript">
$.fn.datetimepicker.dates['zh-CN'] = {
days: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期日"],
daysShort: ["週日", "週一", "週二", "週三", "週四", "週五", "週六", "週日"],
daysMin: ["日", "一", "二", "三", "四", "五", "六", "日"],
months: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
monthsShort: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
today: "今天",
suffix: [],
meridiem: ["上午", "下午"]
};
$('.form_datetime').datetimepicker({
language: 'zh-CN',
weekStart: 1,
todayBtn: 1,
autoclose: 1,
todayHighlight: 1,
startView: 2,
forceParse: 0,
showMeridian: 1,
format:'yyyy-mm-dd hh:ii:ss'
});
$(function () {
//給日期控件賦初始值
var endDate = new Date();
var beginDate = endDate.getDate() - 7;
$("#begin_date").attr("value", beginDate);
$("#end_date").attr("value", endDate);
})
</script>
</body>
</html>