Bootstrap-table 增删改查
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
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
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.定义按钮的位置**
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文件)
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