bootstrapTable传参示例

Controller层

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

HTML页面

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 += "编辑";
				// result += "删除";
				result += "删除";
				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();

					}

				})

			}

修改表单弹出框

新增表单弹出框

运行效果截图:

bootstrapTable传参示例_第1张图片

你可能感兴趣的:(bootstrap,前端,html,javascript)