Bootstrap-Table表格内添加操作按钮的实现方法
一般在利用Bootstrap-Table显示后台数据时，我们往往会在表格的最后一列添加操作按钮，以便对某条数据进行修改和删除操作，如下图所示：
当点击编辑按钮时，界面会弹出模态框供用户操作，点击修改后表格自动刷新，如下图所示：
测试数据
前端代码
<html>
<head>
<meta charset="utf-8" />
<title>Bootstrap Tabletitle>
<link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<link href="lib/bootstrap-table/bootstrap-table.min.css" rel="stylesheet" />
<script src="lib/bootstrap/js/jquery-1.9.1.min.js">script>
<script src="lib/bootstrap/js/bootstrap.min.js">script>
<script src="lib/bootstrap-table/bootstrap-table.min.js">script>
<script src="lib/bootstrap-table/locale/bootstrap-table-zh-CN.min.js">script>
head>
<body>
<div style="margin:100px auto;width:1000px;">
<table id="table">table>
div>
<div class="modal fade" id="editModal" 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">
<div class="form-group">
<label for="id">编号label>
<input id="id" type="text" class="form-control" disabled />
div>
<div class="form-group">
<label for="name">姓名label>
<input id="name" type="text" class="form-control" />
div>
<div class="form-group">
<label for="gender">性别label>
<select id="gender" class="form-control">
<option value="男">男option>
<option value="女">女option>
select>
div>
<div class="form-group">
<label for="age">年龄label>
<input id="age" type="text" class="form-control" />
div>
div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭button>
<button type="button" class="btn btn-primary" onclick="editInfo()">修改button>
div>
div>
div>
div>
<script>
$('#table').bootstrapTable({
url: "ashx/QueryHandler.ashx", // URL
method: "post", // 请求类型
contentType: "application/x-www-form-urlencoded", // post请求必须要有，否则后台接受不到参数
sidePagination: "server", // 设置在服务端还是客户端分页
showRefresh: false, // 是否刷新按钮
sortStable: true, // 是否支持排序
cache: false, // 是否使用缓存
pagination: true, // 是否显示分页
search: false, // 是否有搜索框
clickToSelect: true, // 是否点击选中行
pageNumber: 1, // 首页页码，默认为1
pageSize: 5, // 页面数据条数
pageList: [5, 10, 20, 30],
queryParamsType: "",
queryParams: function (params) {
return {
pageSize: params.pageSize, // 每页记录条数
pageNumber: params.pageNumber, // 当前页索引
};
},
columns: [{
field: 'Id',
title: '编号',
align: "center",
halign: "center",
valign: 'middle',
sortable: true
},
{
field: 'Name',
title: '姓名',
align: "center",
halign: "center",
valign: 'middle'
},
{
field: 'Gender',
title: '性别',
align: "center",
halign: "center",
valign: 'middle'
},
{
field: 'Age',
title: '年龄',
align: "center",
halign: "center",
valign: 'middle'
},
{
field: 'operate',
title: '操作',
align: 'center',
valign: 'middle',
width: 200,
events: {
'click #edit': function (e, value, row, index) {
$('#id').val(row.Id);
$('#name').val(row.Name);
$('#gender').val(row.Gender);
$('#age').val(row.Age);
},
'click #delete': function (e, value, row, index) {
deleteInfo(row.Id);
}
},
formatter: function (value, row, index) {
var result = "";
result += '';
result += '';
return result;
}
}]
})
// 修改信息
function editInfo() {
$.ajax({
type: 'post',
url: 'ashx/EditHandler.ashx',
dataType: 'json',
data: {
id: $('#id').val(),
name: $('#name').val(),
gender: $('#gender').val(),
age: $('#age').val()
},
success: function (data) {
if (data == 'Yes') {
$('#table').bootstrapTable('refresh');
$('#editModal').modal('hide');
}
else {
alert('修改失败');
}
}
})
}
// 删除信息
function deleteInfo(id) {
$.ajax({
type: 'post',
url: 'ashx/DeleteHandler.ashx',
dataType: 'json',
data: {
id: id
},
success: function (data) {
if (data == 'Yes') {
$('#table').bootstrapTable('refresh');
}
else {
alert('删除失败');
}
}
})
}
script>
body>
html>
后台查询代码
using System;
using System.Collections.Generic;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
using System.Linq;
using System.Text;
using System.Web;
using Newtonsoft.Json;
namespace WebApplication2.ashx
{
/// 后台编辑代码
using System;
using System.Collections.Generic;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
using System.Linq;
using System.Text;
using System.Web;
using Newtonsoft.Json;
namespace WebApplication2.ashx
{
/// 后台删除代码
using System;
using System.Collections.Generic;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
using System.Linq;
using System.Text;
using System.Web;
using Newtonsoft.Json;
namespace WebApplication2.ashx
{
/// 大功告成！