Bootstrap框架的使用之載入表格

使用Bootstrap前端框架簡單實現表格的載入，廢話不多說直接看程式碼。

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>

<%@ include file="/WEB-INF/views/common/taglib.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<%@ include file="/WEB-INF/views/common/meta.jsp" %>
<%@ include file="/WEB-INF/views/common/include.jsp" %>

<style type="text/css">
.search-body{
display: none;
position: absolute;
width: 400px;
background-color: white;
border: 1px solid #C5D0DC;
z-index: 999;
padding: 10px;
margin: 0;
max-height: 400px;
overflow-y: scroll;
}
.search-body li{
list-style: none;
}
.search-body li:hover{
background-color: rgb(238, 238, 238);
}
.search-panel{
margin-bottom: 40px;
padding: 10px;
}
</style>
</head>

<script type="text/javascript">
$(document).ready(function() {
initFrameHeight();
var sysIdName = $("#sysIdName").val();
initAlarmTable(sysIdName);
});

function search(){
var sysIdName = $("#sysIdName").val();
initAlarmTable(sysIdName);
}

function toPortraitAdvancedQuery(){
window.location.href="${ctx}/portrait/tagResult/portraitAdvancedQuery";
}

function toPortraitDataDetail(){
window.location.href="${ctx}/portrait/tagResult/portraitDataDetail";
}
</script>
<body style="height: 1000px;">
<div class="container-fluid">
<div style="height: 55px;">
<div class="form-inline">
<div class="col-lg-12 col-md-12">
<div class="col-lg-2 col-md-2">
<input class="form-control " id="sysIdName" type="text" maxlength="30" placeholder="請輸入系統ID或名稱"/>
</div>
<div class="col-lg-10 col-md-10">
<button class="btn btn-default search-btn" onclick="search();">查詢</button>
<button class="btn btn-default search-btn" onclick="toPortraitAdvancedQuery();">高階查詢</button>
<button class="btn btn-default search-btn" onclick="search();">我關注的系統</button>
<button class="btn btn-default search-btn" onclick="search();">總體評估的系統</button>
<button class="btn btn-default search-btn" onclick="search();">增強的系統</button>
</div>
</div>
</div>
</div>
<div class="col-sm-12 col-md-12">
<div class="row" id="chart-flot">
<div class="col-sm-12">
<table id="sysTable"></table>
</div>
</div>
</div>

</div>
<script type="text/javascript">

function destroyTable(ele){
//動態載入表格之前，先銷燬表格
$(ele).bootstrapTable('destroy');
}

function initAlarmTable(sysIdName){
destroyTable('#sysTable');
//載入表格
$('#sysTable').bootstrapTable({
url: '${ctx}/portrait/systemCfg/findSysList',
method: 'post',
contentType: 'application/x-www-form-urlencoded', //請求資料內容格式預設是 application/json 自己根據格式自行服務端處理
classes: 'table table-hover', //表格的類名稱。預設情況下，表格是有邊框的，你可以新增 'table-no-bordered' 來刪除表格的邊框樣式。
dataField: 'result', //服務端返回資料鍵值就是說記錄放的鍵值是result，分頁時使用總記錄數的鍵值為total
pagination: true, //是否分頁
pageSize: 10, //每頁的記錄行數（*）
pageList: [5, 10, 15], //可供選擇的每頁的行數（*）
sidePagination: 'server', //分頁方式：client客戶端分頁，server服務端分頁（*）
cache: false, //是否使用快取，預設為true，所以一般情況下需要設定一下這個屬性（*）
locale: "zh-CN",
columns: [{
title: '系統ID',
field: 'sysId',
align: 'center'
}, {
title: '系統名稱',
field: 'sysName',
align: 'center',
formatter: function(value, row){
var html = '';
html += '<a href="${ctx}/portrait/tagResult/portraitData1?sysId=' + row.sysId + '">'+value+'</a>';
return html;
}
},{
title: '健康評分',
field: 'showFont',
align: 'center'
},{
title: '維護分類',
field: 'tagGroupId',
align: 'center'
},{
title: '操作',
field: '',
align: 'center',
formatter: function (value, row, index) {
var html = '';
html += '<button class="btn btn-default" onclick="toPortraitDataDetail();">詳情</button>';
return html;
}
}],
/*請求伺服器資料時，你可以通過重寫引數的方式新增一些額外的引數，例如 toolbar 中的引數如果 queryParamsType = 'limit' ,
返回引數必須包含limit, offset, search, sort, order 否則, 需要包含:
pageSize, pageNumber, searchText, sortName, sortOrder.返回false將會終止請求*/
queryParams: function(params){
var param = {
from: Math.ceil(params.offset / params.limit),
size: params.limit,
sysIdName:sysIdName
};
return param;
},
/*載入伺服器資料之前的處理程式，可以用來格式化資料。引數：res為從伺服器請求到的資料。*/
responseHandler: function(res){
return res;
}
});
}
</script>
</body>
</html>

Bootstrap框架的使用之載入表格

相關文章