BootStrapTable
前端
<head>
<meta name="viewport" content="width=device-width" />
<title>JJQ-BootStrapTable-Index</title>
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap-table/1.15.4/bootstrap-table.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" />
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-table/1.15.4/bootstrap-table.js"></script>
<!-- 中文汉化包 -->
<script src="https://cdn.bootcss.com/bootstrap-table/1.1.4/locale/bootstrap-table-zh-CN.min.js"></script>
</head>
或或或这样在线引入
<!-- 最先引入Jquery-JS文件 -->
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<!-- 然后引入最新版本的 Bootstrap 核心 JS与CSS 文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- 最后引入最新版本的 bootstrap-table 核心 JS与CSS 文件及中文包 -->
<link href="https://cdn.bootcss.com/bootstrap-table/1.16.0/bootstrap-table.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/bootstrap-table/1.16.0/bootstrap-table.min.js"></script>
<script src="https://unpkg.com/bootstrap-table@1.14.2/dist/locale/bootstrap-table-zh-CN.min.js"></script>
【新增】模态框
<div class="modal fade" id="modal-container-29564" 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 id="add_cs" class="modal-body" style="text-align:center;font-family:'Times New Roman', Times, serif;font-size:large;font-weight:bold">
名称: <input type='text' name='' id='A_name' /><br><br>
类型: <input type='text' name='' id='A_type' />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">放弃</button>@*点击后收起隐藏data-dismiss="modal"*@
<button type="button" class="btn btn-primary" data-dismiss="modal" onclick="add()">提交</button>@*点击后收起隐藏data-dismiss="modal"*@
</div>
</div>
</div>
</div>
【修改】模态框
<div class="modal fade" id="modal-container-295648" 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 id="get_cs" class="modal-body" style="text-align:center;font-family:'Times New Roman', Times, serif;font-size:large;font-weight:bold">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">放弃</button>@*点击后收起隐藏data-dismiss="modal"*@
<button type="button" class="btn btn-primary" data-dismiss="modal" onclick="update()">提交</button>@*点击后收起隐藏data-dismiss="modal"*@
</div>
</div>
</div>
</div>
<script>
//新增
function add() {
$.ajax({
url: "/aa/add",//请求地址
dataType: "json",//数据格式
type: "POST",//请求方式
async: true,//是否异步请求
data: {
name: document.getElementById('A_name').value,
type: document.getElementById('A_type').value
},
success: function (data) {
if (data == 1) {
$('#table').bootstrapTable('refresh');//刷新表格
alert("提交成功!");
} else {
alert("数据异常!");
}
}
})
}
//删除
$("#remove").click(function () {
var selectedRows = $("#table").bootstrapTable('getSelections');//得到选中行的list集合
$.ajax({
url: "/aa/DELETE",//请求地址
dataType: "json",//数据格式
type: "POST",//请求方式
async: true,//是否异步请求
//data: JSON.stringify(selectedRows),
data: { selectedRows},
success: function (data) {
if (data == 1) {
$('#table').bootstrapTable('refresh');//刷新表格
alert("删除成功!");
} else {
alert("数据异常!");
}
}
})
})
//修改
function update() {
$.ajax({
url: "/aa/update",//请求地址
dataType: "json",//数据格式
type: "POST",//请求方式
async: true,//是否异步请求
data: {
id: document.getElementById('M_id').value,
name: document.getElementById('M_name').value,
type: document.getElementById('M_type').value
},
success: function (data) {
if (data == 1) {
$('#table').bootstrapTable('refresh');//刷新表格
alert("提交成功!");
} else {
alert("数据异常!");
}
}
})
}
</script>
<div id="Get_Height" >
<div id="toolbar" >
<button id="add" class="btn btn-primary" href="#modal-container-29564" data-toggle="modal">
@*实现点击激活弹出模态框href="#modal-container-29564" data-toggle="modal"*@
增加
</button>
<button id="remove" class="btn btn-danger">
批量删除
</button>
</div>
<table id="table" style="position:absolute"></table>
</div>
<script>
//分页显示
$(function () {//初始化bootstrap-table
initTable();
$('.fixed-table-pagination').css("position", 'fixed');
$('.fixed-table-pagination').css("right", '0px');
$('.fixed-table-pagination').css("left", '0px');
$('.fixed-table-pagination').css("top", '90%');
})
function initTable() {
$('#table').bootstrapTable({
toolbar: '#toolbar',//工具按钮用哪个容器
clickToSelect: true,//启用单击选中
pagination: true,//启用分页
url: '/aa/GetData',//请求地址
method: 'POST',//请求方式
showRefresh: true,//刷新按钮
showFullscreen: true,//全屏按钮
showColumns: true,//选择显示列按钮
showToggle: true,//详细视图和列表视图的切换按钮
contentType: "application/x-www-form-urlencoded",
pageNumber: 1, //初始化加载第一页，默认第一页
pageSize: 10, //每页的记录行数（*）
pageList: [5, 10, 20, 50, 100], //可供选择的每页的行数（*）
sidePagination: "server",//服务端分页
queryParamsType: 'limit',//查询参数组织方式
uniqueId: "id",//每一行的唯一标识，一般为主键列
exportDataType: "selected",//导出checkbox选中的行数
search: true,//;开启自带的搜索框
//得到查询的参数
queryParams: function (params) {
//这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
var query_params = {
limit: params.limit, //页面大小
offset: params.offset, //页码
sort: params.sort, //排序列名
order: params.order, //排位命令（desc，asc）
search: params.search,//查询框中的参数传递给后台
//查询框中的参数传递给后台
//search_kw: params.search, // 请求时向服务端传递的参数//已经被原生搜索框取代: search: params.search,
};
return query_params;
},
columns: [
[{
checkbox: true,
width: '100px',
align: 'center',
}, {
title: '编号',
field: 'id',
sortable: true,
align: 'center',
}, {
field: 'name',
title: '名称',
sortable: true,
align: 'center'
}, {
field: 'type',
title: '类型',
sortable: true,
align: 'center',
}, {
field: 'Button',
title: '操作栏',
width: '200px',
align: 'center',
events: operateEvents,
formatter: operateFormatter,
}
]
]
})
}
function operateFormatter(value, row, index) {//操作栏监听
return [
'<button id="update" type="button" class="btn btn-warning" href="#modal-container-295648" data-toggle="modal">编辑</button>  ',
'<button id="remove" type="button" class="btn btn-danger">删除</button>',
].join('')
}
window.operateEvents = {
'click #update': function (e, value, row, index) {//行内修改,传递值//操作栏执行
var temp = "编号: <input type='text' name='' id='M_id' value='" + row.id + "' readonly='readonly'/><br><br>名称: <input type='text' name='' id='M_name' value='" + row.name + "' /><br><br>类型: <input type='text' name='' id='M_type' value='" + row.type + "' />";
$("#get_cs").html(temp);
},
'click #remove': function (e, value, row, index) {//行内删除//操作栏执行
$.ajax({
url: "/aa/DELETE",//请求地址
dataType: "json",//数据格式
type: "POST",//请求方式
async: true,//是否异步请求
data: { row},
success: function (data) {
if (data == 1) {
$('#table').bootstrapTable('refresh');
alert("删除成功!");
} else {p
alert("数据异常!");
}
}
})
}
}
</script>
后端
using JJQ_Model;
using JJQ2.filter;
using System;
using System.Collections.Generic;
using System.Web.Mvc;
namespace JJQ2.Controllers
{
[MyActionFilter]
public class aaController : Controller
{
// GET: aa
public ActionResult Index()
{
return View();
}
//查询//查询//查询//查询//查询//查询
public ActionResult GetData(int limit, int offset, string sort, string order, string search)
{
offset = offset + limit;
int Num = (offset - limit + 1);
//sort 如果没有值 则默认按id排序
if (sort == null)
{
sort = "id";
}
string sql = "select * from (SELECT ROW_NUMBER() OVER (order by {0} {1}) AS Row, * from (select * from library where name like '%{2}%') as realSql) as searchNum where Row between {3} and {4}";
List<library> rows = DBManage.GetListBySql<library>(string.Format(sql, sort, order, search, Num, offset)); //1.SQL=SQL语句 2.sort=adc/desc 3.order
string sqlall = "select * from library where name like '%{0}%'";
List<library> listAll = DBManage.GetListBySql<library>(string.Format(sqlall, search));
int total = listAll.Count;
var obj = new { total, rows };//{总数据量,List<library> rows}
return Json(obj);
//新增//新增//新增//新增//新增//新增//新增
}
public ActionResult add()
{
String Sql = "INSERT INTO [dbo].[library](name,type)VALUES('{0}','{1}')";
//Request.Form[0]= Request.Form["name"];
//Request.Form[1]= Request.Form["type"];
var success_num = DbHelperSQL.ExecuteSql(string.Format(Sql, Request.Form["name"], Request.Form["type"]));
if (success_num > 0)
{
return Json(1);
}
else
{
return Json(2);
}
}
//删除//删除//删除//删除//删除//删除//删除
public ActionResult DELETE()
{
//Response.
//form提交取值方法
//string ops1 = Request.Form["xxx"].ToString();
//普通提交取值方法
List<string> sql_list = new List<string>();
string sql = "DELETE FROM [UnifiedAuthoritySystem].[dbo].[library] WHERE id = '{0}'";
var All_id = (Request.Form.Count) / 6;
if (All_id == 0)
{
try
{
var _id1 = Request.Form[1];
sql_list.Add(string.Format(sql, _id1));
}
catch (Exception)
{
return Json(2);
throw;
}
}
else
{
for (int i = 1; i <= All_id; i++)
{
var _id = Request.Form[(i * 6) - 4];
sql_list.Add(string.Format(sql, _id));
}
}
var success_num = DbHelperSQL.ExecuteSqlTran(sql_list);
if (success_num > 0)
{
return Json(1);
}
else
{
return Json(2);
}
}
//修改//修改//修改//修改//修改//修改//修改//修改//修改
public ActionResult update()
{
String Sql = "UPDATE [dbo].[library]SET name = '{0}',type = '{1}' WHERE id={2}";
var success_num = DbHelperSQL.ExecuteSql(string.Format(Sql, Request.Form[1], Request.Form[2], Request.Form[0]));
if (success_num > 0)
{
return Json(1);
}
else
{
return Json(2);
}
}
}
}
bootstrapTable+Ajax
function initTable() {
$('#table').bootstrapTable('destroy');//动态加载表格之前，先销毁表格
$('#table').bootstrapTable({
ajax: ajaxReqDate,
toolbar: '#toolbar',//工具按钮用哪个容器
pagination: true,//启用分页
pageNumber: 1,//初始化加载第一页，默认第一页
pageSize: 10,//每页的记录行数（*）
pageList: [10, 30, 45, 60, 500],//可供选择的每页的行数（*）
sidePagination: "server",//服务端分页
queryParamsType: 'limit',//查询参数组织方式
columns: [
[{
field: '发生时间',
title: '日期',
//sortable: true,
align: 'center',
formatter: operateFormatterYear,
},{
title: '姓名',
field: '姓名',
sortable: true,
align: 'center',
}
]
]
})
}
//bootstrapTable-ajax获取数据
function ajaxReqDate(result) {
$.ajax({
url: "/salary_Analysis/Query",
type: "POST",// POST，默认是GET
dataType: 'json',//根据返回数据类型可以有这些类型可选：xml html script json jsonp text
async: true,//是否异步请求
data: {//请求携带的参数信息
search: getSearchValue(),
limit: result.data.limit,//页面大小
offset: result.data.offset,//页码
},
success: function (data) {//请求成功
result.success({ //注意，必须返回参数 params
total: data.total,
rows: data.rows
});
//$('#table').bootstrapTable('load', data.rows);
$('#table').bootstrapTable("hideLoading");
var sumDiv = "";
for (var item in data.sumTable[0]) {
sumDiv += '<a style="color:blue">' + item + '合计:' + data.sumTable[0][item] + '</a> '
if (item == "税金小计") {
break;
}
}
sumDiv += '<br /> <a style="color:blueviolet" href="#mymodal-link1" data-toggle="modal" onclick="">查看详情</a>';
$("#sunDiv").append(sumDiv);
var rows = data.sumTable[0];
var divStr = '\
<div class="row"> \
<div class="col-lg-2" >\
<span style="color:red">总计合计: </span>'+ rows.总计 + '<br />\
</div>\
</div > ';
$("#divDetil1").html(divStr);
}, error: function (data) {
alert("错误");
}
});
}
public string Query(int limit, int offset, string search)
{
dynamic searchJson = JsonConvert.DeserializeObject<dynamic>(search);
(string)searchJson[i].name == "所在部门")
((string)searchJson[i].value != "0")
var rows = DbHelperOra.GetTable(sqlPage);
int total = DbHelperOra.GetCount($"select count(*) from({ sql})");
var sumTable = DbHelperOra.GetTable(sqlSum);
var data = new { total,rows, sumTable };
return JsonConvert.SerializeObject(data);
}
