Bootstrap-Table表格内添加操作按钮的实现⽅法
⼀般在利⽤Bootstrap-Table显⽰后台数据时，我们往往会在表格的最后⼀列添加操作按钮，以便对某条数据进⾏修改和删除操作，如下图所⽰：
当点击编辑按钮时，界⾯会弹出模态框供⽤户操作，点击修改后表格⾃动刷新，如下图所⽰：
测试数据
前端代码
<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Bootstrap Table</title>
<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 >
<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>
table设置内边框<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:"",
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 +='<button id="edit" class="btn btn-info" data-toggle="modal" data-target="#editModal">编辑</button>';                    result +='<button id="delete" class="btn btn-danger" >删除</button>';
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{
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
{
/
// <summary>
/// TestHandler 的摘要说明
/// </summary>
public class QueryHandler : IHttpHandler
{
private static string ConnectionString = ConfigurationManager.ConnectionStrings["ConnectionString"].ToString();
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType ="text/plain";
// 获取分页参数
int pageSize =int.Parse(context.Request["pageSize"].ToString());
int pageNumber =int.Parse(context.Request["pageNumber"].ToString());
// 查询数据
int total =GetCount();
DataTable dataTable =GetDataTable(pageSize, pageNumber);
// 格式化数据
var data =new{ total = total, rows = dataTable };
context.Response.Write(JsonConvert.SerializeObject(data));
}
public bool IsReusable
{
get
get
{
return false;
}
}
// 数获取数量
private int GetCount()
{
string sql ="select count(*) from [TPerson]";
using(SqlConnection connection =new SqlConnection(ConnectionString))
{
SqlCommand command =new SqlCommand(sql, connection);
try
{
connection.Open();
return Convert.ToInt32(command.ExecuteScalar());
}
catch
{
return-1;
}
}
}
// 分页查询
private DataTable GetDataTable(int pageSize,int pageNumber)
{
string sql ="select * from(select row_number() over(order by Id) as RowId, *from [TPerson]) as b where b.Id between (@pageNumber - 1) * @page Size + 1 and @pageNumber * @pageSize order by Id";
using(SqlDataAdapter adapter =new SqlDataAdapter(sql.ToString(), ConnectionString))
{
SqlParameter[] parameters =
{
new SqlParameter("@pageSize", pageSize),
new SqlParameter("@pageNumber", pageNumber)
};
DataTable dataTable =new DataTable();
adapter.SelectCommand.Parameters.AddRange(parameters.ToArray());
adapter.Fill(dataTable);
return dataTable;
}
}
}
}
后台编辑代码
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
{
/
// <summary>
/// QueryHandler 的摘要说明
/// </summary>
public class EditHandler : IHttpHandler
{

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。