资源准备（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.****.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');
。。。。。。
})；