bootstrapTable传参示例_bootstraptable怎么传参-CSDN博客

本文链接：https://blog.csdn.net/qq_48512649/article/details/127709538

本文介绍如何利用Spring MVC的Controller层与前端BootstrapTable插件实现数据的增删改查(CRUD)操作，并展示了具体的代码实现及运行效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Controller层

@ResponseBody
@RequestMapping("/allAdm")
public List findallAdm() {
     List<Adm> list = admService.findallAdm();      //查询数据以返回list
     return list;
}

HTML页面

<div class="row">
	<div class="col-md-1"></div>
		<div class="col-md-8">
			<table id="table1"></table>				<!-- 显示表单内容 -->
		</div>
	<div class="col-md-3"></div>
</div>

Script页面

$(function () {
				$('#table1').bootstrapTable({     
					url: '/allAdm',                //url地址 
					pagination: true,
					search: true,
					theadClasses: "thead-blue",    //设置thead-blue为表头样式
					columns: [{
						field: 'adm_id',
						title: '序号'
					}, {
						field: 'adm_username',
						title: '姓名'
					}, {
						field: 'adm_password',
						title: '密码'
					}, {
						field:'id',
						title:'operate',
						formatter: actionFormatter,
					}]

				})
			})

formatter使用_yehy0525的博客-CSDN博客_formatter

function actionFormatter(value, row, index) {
				var id = index;
				var data = JSON.stringify(row);
				var result = "";
				 result += "<a href='javascript:;'  class='btn btn-xs blue' onclick=\"editView('" + row.adm_id + "','" + id + "')\" title='编辑'>编辑</a>";
				// result += "<a href='javascript:;' class='btn btn-xs red' onclick=\"del('" + row.adm_id + "')\" title='删除'>删除</a>";
				result += "<a href='javascript:;' class='btn btn-xs red' onclick=\"del('" + row.adm_id + "')\" title='删除'>删除</a>";
				return result;
			}

更新、删除、插入数据

function editView(row, index){
				var data = JSON.stringify($("#table1").bootstrapTable('getData')); //获取全部数据
				var data_json = JSON.parse(data); //data_json和data_json2一样都是json对象
				// {#var data_json2 = eval("(" + data+ ")"); #}
				console.log(data_json);
				//根据index找到对应行数据，填充数据到修改模态框
				$("#id").val(data_json[index].adm_id);
				$("#us").val(data_json[index].adm_username);
				$("#ps").val(data_json[index].adm_password);
				//弹出修改模态框
				$('#updateModal').modal('show')
			}

			function del(adm_id) {
				alert(adm_id)
					$.ajax({                                 //ajax传参
						url:"/deleteAdm",
						data:{
							"adm_id":adm_id,
						},
						success:function () {
						location.reload();
					}
				});
			}
			function mod(){
				var adm_id = $('#id').val();
				var adm_username = $('#us').val();
				var adm_password = $('#ps').val();
				$.ajax({

					url: '/updateAdm',
					data:{
						"adm_id":adm_id,
						"adm_username":adm_username,
						"adm_password":adm_password
					},
					success:function(dates){
						// location.reload();
						// $(".fixed-table-body").html(dates);
						$(".fixed-table-body").contentWindow.location.reload();

					}

				})

			}

			function add(){
				// var file=document.getElementById("file1").files[0];
				// var filename=file.name;
				// var fileurl="../image/"+filename;
				var adm_username=$("#username").val();
				var adm_password=$("#password").val();
				$.ajax({
					url:'/insertAdm',
					data:{
						adm_username:adm_username,
						adm_password:adm_password,
					},
					success:function (data) {
						location.reload();
						// $(".fixed-table-body").contentWindow.location.reload();

					}

				})

			}

修改表单弹出框

<form class="form-horizontal" role="form">
	<div class="modal fade" id="updateModal" tabindex="-1" role="dialog" aria-labelledby="updateModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
						&times;
					</button>
					<h4 class="modal-title" id="updateModalLabel">
						修改项目
					</h4>
				</div>
				<!--{# 模态框body #}-->
				<div class="modal-body" style="height: 100%;">

					<div class="form-group">
						<label  class="col-sm-3 control-label">cname:</label>
						<div class="col-sm-7">
							<input type="hidden" class="form-control"  name="adm_username" id="id" placeholder="用户名">
							<input type="text" class="form-control"  name="adm_username" id="us"
								   placeholder="用户名">
							<input type="text" class="form-control"  name="adm_password" id="ps"
								   placeholder="密码">
						</div>
					</div>
				</div>
				<!--------{#模态框底部#}-->
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					<input type="submit" class="btn btn-primary"value="提交"  onclick="mod()"/>
				</div>
			</div><!-- /.modal-content -->
		</div><!-- /.modal -->
	</div>
</form>

新增表单弹出框

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
				<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
						<h4 class="modal-title" id="myModalLabel">新增管理员</h4>
					</div>
					<div class="modal-body">按下 ESC 按钮退出。</div>
					<div class="modal-footer">
						<div class="form-group">
							<input type="text" class="form-control"placeholder="账号" autocomplete="off" id="username">
						</div><div class="form-group">
							<input type="password" class="form-control"placeholder="密码" autocomplete="off" id="password">
						</div>
						<div class="form-group">
						    <button type="submit" class="btn btn-primary form-control" id="#" onclick="add()" />确定</button>
						</div>
					</div>
				</div><!-- /.modal-content -->
			</div><!-- /.modal-dialog -->
		</div><!-- modal fade -->

运行效果截图：