1.引入bootstarp-table 系类的js/css文件
@*1、Jquery组件引用*@
<script src="~/Scripts/jquery-1.10.2.js"></script>
@*2、bootstrap组件引用*@
<script src="~/Content/bootstrap/bootstrap.js"></script>
<link href="~/Content/bootstrap/bootstrap.css" rel="stylesheet" />
@*3、bootstrap table组件以及中文包的引用*@
<script src="~/Content/bootstrap-table/bootstrap-table.js"></script>
<link href="~/Content/bootstrap-table/bootstrap-table.css" rel="stylesheet" />
<script src="~/Content/bootstrap-table/locale/bootstrap-table-zh-CN.js"></script>
2.定义一个空的table
<table id="madArea_table"></table>
3.对table 初始化的js
$(function () {
//1.初始化Table
var oTable = new TableInit();
oTable.Init();
}
var TableInit = function () {
var oTableInit = new Object();
//初始化Table
oTableInit.Init = function () {
$('#madArea_table').bootstrapTable('destroy');
$('#madArea_table').bootstrapTable({
url: path,
method: 'post',//请求方式
sortName: "createTime",
sortOrder: "desc",
striped: true, // 是否显示行间隔色
pagination: true, // 是否分页
search: false,
showExport: false,
queryParams: queryParams,//传递参数（*）
columns: [{
checkbox: true
},
{
title: '序号',//标题 可不加
align: "center",
formatter: function (value, row, index) {
return index + 1;
}
},
{
field: 'name',
title: '名称'
},
{
field: 'area',
title: '划分'
},
{
field: 'Code',
title: '代码'
},
{
field: 'createTime',
title: '创建时间',
sortable: true
}]
});
};
return oTableInit;
};
//得到查询的参数
function queryParams(params) {
var temp = { //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
pageNum: Math.round((params.offset + params.limit) / params.limit),
pageSize: params.limit,
//名称
name: $("#input_name").val(),
//划分
area: $("#input_area").val(),
};
return temp;
}
4.后台controller
/**
* 默认进入的table页面
*
* @return java.lang.String
* @author zhukaixin
*/
@GetMapping()
public String numberView() {
return prefix + "/data";
}
/**
* table 页面的数据 和 查询的数据
*
* @author zhukaixin
*/
@PostMapping("/list")
@ResponseBody
public List list(NumberVo numberVo) {
List<NumberVo> list = numberViewService.selectMdmAreaList(numberVo);
return list;
}
总结：bootstarp-table 的使用主要就是分为四部:
1.引入需要的js/css文件
2.定义一个空的table 标签
3.js中初始化这个table
4.controller中返回需要的list数据（一般的项目都会封装这个List 成为table 需要的格式数据/rows /total）
页面的查询按钮 和 取消按钮 事件
/* 点击查询事件 */
$('#button_query').click(function () {
var oTable = new TableInit();
oTable.Init();
});
/* 重置按钮 */
$('#button_reset').click(function () {
// 清空所有的值
var formComponent = $('form');
formComponent.find('input:text').val('');
});
------------------------------------------------------------------------------------------------------
bootstarp-table 中的按钮操作
这个需要绑定按钮点击的事件
1.定义按钮的位置
<div class="btn-group-sm hidden-xs pull-right" id="toolbar" role="group">
<a class="btn btn-success" onclick="add()" shiro:hasPermission="system:madareanumberview:add">
<i class="fa fa-plus"></i> 新增
</a>
<a class="btn btn-primary btn-edit " onclick="edit()" shiro:hasPermission="system:madareanumberview:edit">
<i class="fa fa-edit"></i> 修改
</a>
<a class="btn btn-danger btn-del " onclick="remove()" shiro:hasPermission="system:madareanumberview:remove">
<i class="fa fa-remove"></i> 删除
</a>
<a class="btn btn-warning btn-del " onclick="removeBatch()" shiro:hasPermission="system:madareanumberview:remove">
<i class="fa fa-remove"></i> 批量删除
</a>
</div>
2.按钮的点击事件
js:
//添加一条新的记录跳转的路径 function add() { var contentUrl = bath; // 跳转链接 layer.open({ type: 2, title: ['添加信息'], area: ['70%', '90%'], content: contentUrl, // 跳转链接 }); }
controller:
/**
* 新增页面
*
* @return java.lang.String
* @author zhukaixin
*/
@GetMapping("/add")
public String addNumber() {
return prefix + "/add";
}
3.跳转的添加页面(就是一个html文件)
<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<meta charset="utf-8">
<title>新增</title>
<head ></head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
<form class="form-horizontal m" id="form-madArea-add">
<div class="form-group">
<label class="col-sm-3 control-label ">代码名称：</label>
<div class="col-sm-8">
<input class="form-control" type="text" name="tcode" id="tcode"/>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">名称：</label>
<div class="col-sm-8">
<input class="form-control" type="text" name="tname" id="tname">
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">备注：</label>
<div class="col-sm-8">
<input class="form-control" type="text" name="remark" id="remark">
</div>
</div>
<div class="col-sm-12">
<div class="form-group">
<div class="pull-right">
<button id="button_preservation" type="button" class="btn btn-success">保存</button>
<button id="button_cancel" type="button" class="btn btn-warning">取消</button>
</div>
</div>
</div>
</form>
</div>
<script th:src="@{/namics/umberview.js}"></script>
</body>
</html>
4.确认按钮的事件
//新增确认按钮
$('#button_preservation').click(function () {
var url = path;
var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
if(validform("id).form){
$.ajax({
type: "POST",//方法类型
dataType: "json",//预期服务器返回的数据类型
url: url,//url
data: $('#form-madArea-add').serialize(),
success: function (result) {
if (result.success) {
parent.layer.close(index); //再执行关闭
alert("添加成功！！！！");
} else {
parent.layer.close(index); //再执行关闭
alert(result.message);
}
}
})
} })
新增取消按钮事件：
$('#button_cancel').click(function () {
var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
parent.layer.close(index); //再执行关闭
})
表单的效验:
function validform(id) {
return $("#"+id).validate({
rules: {
tname: {
required: true,
},
tcode: {
required: true,
}
}
})
}
5.后台controller
/***
* 保存新增的数据
* @param Number
* @param mmap
* @author zhukaixin
* @throws
*/
@PostMapping("/addSubmit")
@ResponseBody
public int addSubmitMadareanumber(Number number) {
number.setEnabled(new BigDecimal(1));
number.setCreateBy("admin");
number.setCreateTime(new Date());
int i = numberService.insertNumber(number);
return i;
}
删除和修改bootstrap-table 的一条数据时 ，需要获取到这条数据的id ，
获取bootstrap-table的一条数据的id 方法
// $("#table").bootstrapTable('getSelections');为bootstrapTable自带的，所以说一定要使用bootstrapTable显示表格,#table：为table的id
//获取这条数据
var rows = $("#madArea_table").bootstrapTable('getSelections');
//获取这条命数据的id
var id = rows.id;
删除一条记录的js
//删除一条记录
function remove() {
var tid;// 声明一个tid
// $("#table").bootstrapTable('getSelections');为bootstrapTable自带的，所以说一定要使用bootstrapTable显示表格,#table：为table的id
var rows = $("#madArea_table").bootstrapTable('getSelections');
if (rows.length == 0) {// rows 主要是为了判断是否选中，下面的else内容才是主要
alert("请先选择要删除的记录!");
return;
}
if ((rows.length >= 2)) {
alert("请先选择一条记录!");
return;
} else {
$(rows).each(function () {// 通过获得别选中的来进行遍历
tid = this.tid;// cid为获得到的整条数据中的一列
});
}
//alert(tid);
$.ajax({
type: "post",//方法类型
dataType: "json",//预期服务器返回的数据类型
url: bath?tid=' + tid,//url
success: function (result) {
if (result.success) {
alert("删除成功");
var oTable = new TableInit();
oTable.Init();
} else {
alert(result.message);
}
}
})
}
删除多条数据
//批量删除
function removeBatch() {
var tids;
// $("#table").bootstrapTable('getSelections');为bootstrapTable自带的，所以说一定要使用bootstrapTable显示表格,#table：为table的id
var rows = $("#madArea_table").bootstrapTable('getSelections');
if (rows.length == 0) {// rows 主要是为了判断是否选中，下面的else内容才是主要
alert("请至少选择一条要删除的记录!");
return;
} else {
var arrays = new Array();// 声明一个数组
$(rows).each(function () {// 通过获得别选中的来进行遍历
arrays.push(this.tid);// cid为获得到的整条数据中的一列
});
tids = arrays.join(','); // 获得要删除的id
}
$.ajax({
type: "post",//方法类型
dataType: "json",//预期服务器返回的数据类型
url: ctx + 'system/madareanumberview/removeBatch?tids=' + tids,//url
success: function (result) {
if (result.success) {
alert("删除成功");
var oTable = new TableInit();
oTable.Init();
} else {
alert(result.message);
}
}
})
}
删除的后台controller:
/**
* 删除一条数据
*
* @author zhukaixin
*/
@PostMapping("/delete")
@ResponseBody
public int removeMadareanumber(String tid) {
int i = mdmAreaNumberService.deleteMdmAreaNumberByIds(tid);
return i;
}
/**
* 批量删除
*
* @author zhukaixin
*/
@RequiresPermissions("system:madareanumberview:remove")
@PostMapping("/removeBatch")
@ResponseBody
public int removeBatchMadareanumber(String[] tids) {
int i = mdmAreaNumberService.deleteMdmAreaNumberByIds(tids);
return i;
}
修改与删除类似
修改一条数据的 js:
//修改一条区域信息数据(绑定事件修改)
function edit(row) {
var tid;
// $("#table").bootstrapTable('getSelections');为bootstrapTable自带的，所以说一定要使用bootstrapTable显示表格,#table：为table的id
var rows = $("#madArea_table").bootstrapTable('getSelections');
if (rows.length == 0) {// rows 主要是为了判断是否选中，下面的else内容才是主要
alert("请先选择要修改的记录!");
return;
}
if ((rows.length >= 2)) {
alert("请选择一条进行修改!");
return;
} else {
$(rows).each(function () {// 通过获得别选中的来进行遍历
tid = this.tid;
});
}
layer.open({
type: 2,
title: ['修改信息'],
area: ['90%', '90%'],
content: path + tid, // 跳转链接 为一个修改的页面 html
});
}
//点击当前行修改
//点击当前行修改当前行
$('#madArea_table').on("click-row.bs.table", function (e, row, ele) {
var contentUrl = path + row.tid; // 跳转链接
layer.open({
type: 2,
title: ['修改信息'],
area: ['70%', '90%'],
content: contentUrl, // 跳转链接
});
});
修改后台controller
/**
* 根据tid修改数据
*
* @return java.lang.String
* @author zhukaixin
*/
@RequiresPermissions("system:madareanumberview:edit")
@GetMapping("/edit/{tid}")
public String editMadareanumber(@PathVariable("tid") String tid, ModelMap mmap) {
if (!StringUtils.isEmpty(tid)) {
Number number = numberService.selectMdmAreaNumberById(BigDecimal.valueOf(Long.parseLong(tid)));
mmap.put("number", number);
}
return prefix + "/edit";
}
跳转的页面html
<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<meta charset="utf-8">
<title>修改</title>
<head th:include="include :: header"></head>
<div class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
<form class="form-horizontal m" id="form-madArea-edit" th:object="${number}">
<input type="hidden" name="tid" id="tid" th:field="*{tid}"/>
<div class="form-group">
<label class="col-sm-3 control-label ">代码：</label>
<div class="col-sm-8">
<input class="form-control" type="text" required name="tcode" id="tcode" th:field="*{tcode}"/>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">名称：</label>
<div class="col-sm-8">
<input class="form-control" type="text" required name="tname" id="tname" th:field="*{tname}"/>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">备注：</label>
<div class="col-sm-8">
<input class="form-control" type="text" name="remark" id="remark" th:field="*{remark}"/>
</div>
</div>
<div class="col-sm-12">
<div class="form-group">
<div class="pull-right">
<button id="buttonEdit_preservation" type="button" class="btn btn-success">保存</button>
<button id="button_cancel" type="button" class="btn btn-warning">取消</button>
</div>
</div>
</div>
</form>
</div>
</div>
</body>
</html>
修改提交的js
//修改行政区域的单行数据确认按钮
$('#buttonEdit_preservation').click(function () {
var url = path;
var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
$.ajax({
type: "POST",//方法类型
dataType: "json",//预期服务器返回的数据类型
url: url,//url
data: $('#form-madArea-edit').serialize(),
success: function (result) {
if (result.success) {
parent.layer.close(index); //再执行关闭
alert("修改成功！！！！");
} else {
parent.layer.close(index); //再执行关闭
alert(result.message);
}
}
})
})
})
后台修改提交的controller
/***
* 保存修改的数据
* @param mdmAreaNumber
* @param mmap
* @author zhukaixin
* @throws
*/
@PostMapping("/editSubmit")
@ResponseBody
public int editSubmitMadareanumber(Number number, ModelMap mmap) {
number.setModifyTime(new Date());
number.setModifiedBy("admin1");
int i = numberService.updateMdmAreaNumber(number);
return i;
}
bootstrap-table 的子表
var TableInit = function () {
var oTableInit = new Object();
//初始化Table
oTableInit.Init = function () {
$('#madArea_table').bootstrapTable('destroy');
$('#madArea_table').bootstrapTable({
url: ctx + "system/madareanumberview/list",
method: 'post',//请求方式
sortName: "createTime",
sortOrder: "desc",
striped: true, // 是否显示行间隔色
pagination: true, // 是否分页
search: false,//搜索
showColumns: false, // 是否显示列的按钮
detailView: true, // 是否显示父子表
showExport: false, // 是否显示导出
queryParams: queryParams,//传递参数（*）
columns: [{
checkbox: true
},
{
title: '序号',//标题 可不加
align: "center",
formatter: function (value, row, index) {
return index + 1;
}
},
{
field: 'tname',
title: '名称'
},
{
field: 'areaDivision',
title: '区域'
}，{
field: 'remark',
title: '备注'
}
{
field: 'createTime',
title: '创建时间',
sortable: true,
formatter: function (value) {
return CommonJS.momentFormat(value, "YYYY-MM-DD");
}
}],
onExpandRow: function (index, row, $detail) { // 注册加载子表的事件。注意下这里的三个参数！
oTableInit.initDetails(index, row, $detail);
},
});
};
// 第二层（子表）
oTableInit.initDetails = function (index, row, $detail) {
var cur_table = $detail.html('<table id="table_tUnitsDetails"></table>').find('table');
$(cur_table).bootstrapTable({
// height:400,//定义表格的高度,如果放开高度的话，宽度不可拖拽；
url: ctx + "system/madareanumberview/selectByid",
method: 'post',//请求方式
sortName: "createTime",
sortOrder: "desc",
striped: true, // 是否显示行间隔色
pagination: true, // 是否分页
search: false,//搜索
showColumns: false, // 是否显示列的按钮
detailView: true, // 是否显示父子表
showExport: false, // 是否显示导出
queryParams: {'tid': row.tid},
columns: [{
formatter: function (value, row, index) {
return index + 1;
},
align: 'center'
}, {
field: 'tcode',
title: '代码',
align: 'center',
cellStyle: {
css: {
"text-align": "center !important"
}
}
}, {
field: 'tname',
title: '名称',
align: 'center',
cellStyle: {
css: {
"text-align": "center !important"
}
}
}, {
field: 'createTime',
title: '创建时间',
align: 'center',
cellStyle: {
css: {
"text-align": "right !important"// right
}
},
formatter: function (value) {
return CommonJS.momentFormat(value, "YYYY-MM-DD");
}
}, {
field: 'modifiedBy',
title: '修改人',
align: 'center',
cellStyle: {
css: {
"text-align": "center !important"
}
}
}],
});
};
return oTableInit;
};
//得到查询的参数
function queryParams(params) {
var temp = { //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
pageNum: Math.round((params.offset + params.limit) / params.limit),
pageSize: params.limit,
//名称
tname: $("#input_tname").val(),
//区域
areaDivision: $("#input_areaDivision").val(),
};
return temp;
}
感悟：在返回路径的时候后台返回值是string 就可以，在返回数据的时候必须加@ResponseBody 注解，