当前位置：首页 >前端技术 > Bootstrap-table 增删改查

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

<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) {retu index + 1;  }},{  field: 'name',  title: '名称'},{  field: 'area',  title: '划分'},{  field: 'Code',  title: '代码'},{  field: 'createTime',  title: '创建时间',  sortable: true}]});  };  retu 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(),  };  retu temp;}

4.后台controller

/*** 默认进入的table页面** @retu java.lang.String* @author zhukaixin*/  @GetMapping()  public String numberView() {retu prefix + "/data";  }  /*** table 页面的数据 和 查询的数据** @author zhukaixin*/  @PostMapping("/list")  @ResponseBody  public List list(NumberVo numberVo) {  List<NumberVo> list = numberViewService.selectMdmAreaList(numberVo);  retu 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-waing 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:

/**
 * 新增页面
 *
 * @retu java.lang.String
 * @author zhukaixin
 */
@GetMapping("/add")
public String addNumber() {
  retu 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-waing">取消</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) {
  retu $("#"+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);  retu i;  }

删除和修改bootstrap-table 的一条数据时，需要获取到这条数据的id ，

获取bootstrap-table的一条数据的id 方法

 // $("#table").bootstrapTable('getSelections');为bootstrapTable自带的，所以说一定要使用bootstrapTable显示表格,#table：为table的id//获取这条数据  var rows = $("#madArea_table").bootstrapTable('getSelections');//获取这条命数据的idvar 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("请先选择要删除的记录!");retu;  }  if ((rows.length >= 2)) {alert("请先选择一条记录!");retu;  } else {$(rows).each(function () {// 通过获得别选中的来进行遍历  tid = this.tid;// cid为获得到的整条数据中的一列});  }  //alert(tid);  $.ajax({type: "post",//方法类型dataType: "json",//预期服务器返回的数据类型url: bath?tid=' + tid,//urlsuccess: 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("请至少选择一条要删除的记录!");retu;  } 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,//urlsuccess: 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);  retu i;  }

/*** 批量删除** @author zhukaixin*/  @RequiresPermissions("system:madareanumberview:remove")  @PostMapping("/removeBatch")  @ResponseBody  public int removeBatchMadareanumber(String[] tids) {  int i = mdmAreaNumberService.deleteMdmAreaNumberByIds(tids);  retu 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("请先选择要修改的记录!");retu;  }  if ((rows.length >= 2)) {alert("请选择一条进行修改!");retu;  } 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修改数据** @retu 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);}retu 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-waing">取消</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);  retu 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) {retu index + 1;  }},{  field: 'tname',  title: '名称'},{  field: 'areaDivision',  title: '区域'}，{field: 'remark',title: '备注' }{  field: 'createTime',  title: '创建时间',  sortable: true,  formatter: function (value) {retu 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) {  retu 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) {  retu CommonJS.momentFormat(value, "YYYY-MM-DD");}  }, {field: 'modifiedBy',title: '修改人',align: 'center',cellStyle: {  css: {"text-align": "center !important"  }}  }],});  };  retu 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(),};  retu temp;}

感悟：在返回路径的时候后台返回值是string 就可以，在返回数据的时候必须加@ResponseBody 注解，