資源準備（just download） bootstrap： http://www.bootcss.com/ bootstrap-table： http://bootstrap-table.wenzhixin.net.cn/ bootstrapValidator： http://plugins.jq ...
資源準備（just download）
bootstrap：
bootstrap-table：
http://bootstrap-table.wenzhixin.net.cn/
bootstrapValidator：
http://plugins.jquery.com/bootstrapValidator/
animate:
https://www.bootcdn.cn/animate.css/
layer:
頁面引用：
<!-- CSS --> <link href="/resource/css/bootstrap.min.css" rel="stylesheet" /> <link href="/resource/css/bootstrap-table.min.css" rel="stylesheet" /> <link href="/resource/css/bootstrapValidator.min.css" rel="stylesheet" />
<link href="/resource/css/animate.min.css" rel="stylesheet" />
<!-- JS -->
<script src="/resource/js/jquery-3.3.1.min.js"></script> <script src="/resource/js/bootstrap.min.js"></script> <script src="/resource/js/bootstrap-table.min.js"></script>
<script src="/resource/js/bootstrap-table-ja-JP.min.js"></script>
<script src="/resource/js/bootstrapValidator.min.js"></script>
<script src="/resource/js/layer/layer.js"></script>
bootstrap-table (jsp)：
<table id="tab" class="table table-hover"></table> <div id="toolsbar" class="btn-group pull-right" style="margin-right: 20px;"> <button id="btn_edit" type="button" class="btn btn-default" style="border-radius: 0"> <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>EDIT </button>
......
...... </div>
bootstrap-table (js)：
var TableInit = function() { var oTableInit = new Object(); // 初始化Table oTableInit.Init = function() { // 根據視窗調整表格高度 $(window).resize(function() { $('#tab').bootstrapTable('resetView', { height : tableHeight() }) }) $('#tab').bootstrapTable({ url : 'xxx.do', // 請求後臺的URL（*） SpringMVC框架伺服器請求 method : 'post', // 請求方式（*） toolbar : '#toolsbar', // 按鈕欄 striped : true, // 間隔色 cache : false, // 緩存，預設為true pagination : true, // 分頁（*） sortable : true, // 排序 sortName : "no", sortOrder : "desc", // 排序方式 queryParams : oTableInit.queryParams,// 傳遞參數 queryParamsType : 'limit', sidePagination : "server", // 分頁方式：client客戶端分頁，server服務端分頁 pageNumber : 1, // 初始化載入第一頁，預設第一頁 pageSize : 10, // 每頁的記錄行數 pageList : [ 10, 15, 20, 50 ], // 每頁的行數 search : false, // 是否顯示表格搜索 strictSearch : true, showColumns : true, // 是否顯示所有的列 showRefresh : true, // 是否顯示刷新按鈕 minimumCountColumns : 2, // 最少允許的列數 clickToSelect : true, // 是否啟用點擊選中行 height : tableHeight(),// 高度調整 uniqueId : "pjNo", // 每一行的唯一標識，一般為主鍵列 showToggle : true, // 顯示詳細視圖和列表視圖的切換按鈕 toolbarAlign : 'right', buttonsAlign : 'right',// 按鈕對齊方式 cardView : false, // 是否顯示詳細視圖 detailView : false, // 是否顯示父子表 contentType : "application/x-www-form-urlencoded", // 解決POST提交問題 columns : [ { title : '選択', field : 'select', checkbox : true, width : 25, align : 'center', valign : 'middle' }, { title : 'PJ番號', field : 'pjNo' }, { field : 'button', title : '編集', align : 'center', events : operateEvents, // 最後這一列是【編輯】按鈕，編輯按鈕的事件 formatter : addoperatebutton // 【編輯】按鈕html代碼 },] }); }; // 得到查詢的參數 oTableInit.queryParams = function(params) { var temp = { pageSize : params.limit, // 頁面大小 pageNumber : params.offset, // 頁碼 searchText : '', sortName : '', sortOrder : '', // 搜索框參數 search_bumon : $('#search_bumon').val(), search_pl : $('#search_pl').val(), search_bikou : $('#search_bikou').val(), search_gongoMae : $('#search_gongo').val() }; return temp; }; function addoperatebutton(value, row, index) { return [ '<button id="rowedit" type="button">編集</button>' ].join(''); } window.operateEvents = { 'click #rowedit' : function(e, value, row, index) { editdata(row); // 這裡使用【layer.open】實現代碼彈子畫面 } }; return oTableInit; }; /** * 通過彈出子畫面編輯數據，並刷新數據table * * @param row * @returns */ function editdata(row) { // 使用 layer.open 彈出子畫面 layer.open({ type : 2, title : '（変更）', maxmin : true, shadeClose : true, // 點擊遮罩關閉層 area : [ '30%', '45%' ], btn : [ '更新', '削除' ], btnAlign : 'c', content : [ 'xxxx.do', 'yes' ], // xxxx.do 這裡如果要想給後臺傳入參數 xxxx.do?parm1=....的形式的話，後臺是接受不到的。如果非要這麼玩的話，參考一下 https://blog.csdn.net/u011752272/article/details/77097663/ success : function(index, layero) { var pIframe = $('iframe')[0].contentWindow.document;// 找到彈出框父頁面 var subForm = $(pIframe).find('#editForm');// 通過復頁面，定位子畫面 var tempfield = $('#ksNo', subForm); // 定位子畫面項目 tempfield.val(row.ksNo);// 給子畫面設值 }, end : function() { getTableData(); // 刷新 bootstrapTable } }); }; function getTableData() { $('#tab').bootstrapTable('refresh', { url : 'XXX.do' }); }； // 使用bootstrapValidator 驗證畫面項目 $('#editForm').bootstrapValidator({ feedbackIcons : { valid : 'glyphicon glyphicon-ok', invalid : 'glyphicon glyphicon-remove', validating : 'glyphicon glyphicon-refresh' }, fields : { a1 : { validators : { notEmpty : { message : 'xxxxx' }, stringLength : { min : 4, max : 7, message : 'xxxxxxxxxxx' } } }, a2 : { validators : { regexp : { regexp : /^([1-9]\d{0,8}|0)([.]?|(\.\d{1,2})?)$/, message : 'xxxxxxxxx' } } }, Tel : { validators : { notEmpty : { message : '手機號不能為空' }, stringLength : { min : 11, max : 11, message : '手機號必須為11位' }, regexp : { regexp : /^1(3|4|5|7|8)\d{9}$/, message : '請填寫正確的手機號' } } } } });
// animate實現按鈕點擊後的滑動效果
$('#add').click(function() {
$('.tableBody').addClass('animated slideOutLeft');
setTimeout(function() {
$('.tableBody').removeClass('animated slideOutLeft').css('display', 'none');
}, 500) // 設置畫面動作超時
$('.addBody').css('display', 'block');
$('.addBody').addClass('animated slideInRight');
。。。。。。
})；
