详解如何用MSSQL + BootstrapTable + C#(Asp.net)来制作信息表格及导出数据(附源码)
〇.开始前先看看效果图吧
一、准备(下载)所需文件
- js和css文件：下载链接 源码
- 本次开发测试数据库：Northwind，安装方法请参考这篇文章
二、新建项目(不需要新建项目的可以直接看第三步)
本次开发环境VS2015+MSSQL2012
为了方便新建项目，笔者这里用了aspx窗体文件做前台，实际上用HTML页面做前台就可以了
新建 ASP.NET Web 项目大家应该都会所以简单说一下，.NET Framework版本默认就行影响不大，名称随意笔者这里是“BootstrapTable”
然后选择WebForm，这是VS2015的新建过程，不同版本可能操作略微不同
新建完成后，删除一些不必要的文件，然后在script文件中放入所需的js及css文件，最后再根目录创建web窗体文件，上面操作完成后，资源管理器如下：
新建项目生成的文件可以不删，但是如果要删就删除干净免得报错
InfoList.aspx是笔者创建的web窗体文件
三、连接(配置)数据库(创建dbml，会的直接下一步)
我们要先在VS中配置连接一下数据库，在根目录新建一个“DB”文件夹，然后再“DB”文件中添加“新建项”，在数据选项卡中找到“LINQ to SQL类”，名称也随意
然后就是连接数据库了，打开新建的dbml文件，点击“服务器资源管理”
接着在数据连接上右击“添加连接”
在弹出的配置窗口，填写合适的参数，笔者这里使用的是远程的数据库。使用本地数据库的同学，在“服务器地址”上填写 “.”(就一个英文句号)，下方选择windows验证登录即可。
没有数据库或者不方便的同学可以发邮件给我，博主可以提供下面的远程数据库密码，联系方式：[email protected]
可以点击“测试连接”来验证可行性，可以之后点击“确定”可以在“服务器资源管理器”中看到数据库，然后打开表选择要用到的表直接拖拽到右边即可。
保存，关闭就配置完成了。
四、画表格
首先导入js和css文件(#中间的代码是在本步骤添加的代码，下同)
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>title>
##################################################
<%--jquery和bootstrap--%>
<script src="Scripts/jquery.min.js">script>
<script src="Scripts/bootstrap.min.js">script>
<link href="Scripts/bootstrap.min.css" rel="stylesheet" />
<%--bootstrp-table--%>
<script src="Scripts/bootstrap-table.min.js">script>
<link href="Scripts/bootstrap-table.min.css" rel="stylesheet" />
<%--bootstrap-table语言包--%>
<script src="Scripts/bootstrap-table-zh-CN.min.js">script>
##################################################
head>
<body>
然后再body中添加一个Table，id随意命名
<body>
<form id="form1" runat="server">
<div>
##################################################
<table id="GetInfoTable" style="overflow-x:auto; white-space:nowrap">table>
##################################################
#overflow-x:指定当内容从元素的内容区域溢出时是否剪切内容
#white-space:nowrap:不换行
div>
form>
body>
在“/form”前写js脚本
<table id="GetInfoTable" style="overflow-x:auto; white-space:nowrap">table>
div>
#############################################
<script type="text/javascript">
$(function () {
//初始化表格
var Table = new TableInit();
Table.Init();
});
var TableInit = function () {
//TODO
};
script>
##############################################
form>
然后实现TableInit方法
var TableInit = function () {
################################################
var TableInit = new Object();
//初始化Table
TableInit.Init = function () {
//清空表格数据
$('#GetInfoTable').bootstrapTable('destroy');
//设置表格属性
$('#GetInfoTable').bootstrapTable({
url: '', //请求数据的URL，先空着
method: 'get', //请求方法
toolbar: '#toolbar', //工具栏
striped: false, //表格斑马纹
cahce: true,
pagination: true, //分页
sortable: true, //排序
sortOrder: "asc", //排序方式
queryParams: TableInit.queryParams, //要传递的参数，这里是一个方法名，之后实现
sidePagination: "server", //分页的类型“服务端”还是“客户端”
pageNumber: 1, //分页起始页
pageSize: 10, //分页显示的条数
pageList: [10, 25, 50, 'All'], //分页可以显示条数
search: true, //搜索
strictSearch: true,
showColumns: true, //设置可以显示的列
minimumCountColumns: 2, //最少显示的列数，对应上条
showRefresh: true, //刷新按钮
clickToSelect: true, //点击选择
singleSelect: true, //单选
//showToggle:true,
showFooter: true, //设置表底
//双击选择方法
onDblClickRow: function (row) {
Dbclick(row);
},
//下面是列名,
columns: [
{
field: 'OrderID', //数据键
title: 'OrderID', //列名
sortable: true, //是否允许排序
align: 'center', //居中
footerFormatter: 'Total', //表底显示
}, {
field: 'CustomerID',
title: 'Customer',
sortable: true,
align: 'center',
}, {
field: 'OrderDate',
title: 'OrderDate',
sortable: true,
align: 'center',
}, {
field: 'RequiredDate',
title: 'RequiredDate',
sortable: true,
align: 'center',
}, {
field: 'ShippedDate',
title: 'ShippedDate',
sortable: true,
align: 'center',
}, {
field: 'Freight',
title: 'Freight',
sortable: true,
align: 'center',
}, {
field: 'ShipName',
title: 'ShipName',
sortable: true,
align: 'center',
}, {
field: 'ShipAddress',
title: 'ShipAddress',
sortable: true,
align: 'center',
}, {
field: 'ShipCity',
title: 'ShipCity',
sortable: true,
align: 'center',
},{
field: 'ShipPostalCode',
title: 'ShipPostalCode',
sortable: true,
align: 'center',
}, {
field: 'ShipCountry',
title: 'ShipCountry',
sortable: true,
align: 'center',
},
],
});
};
return TableInit;
################################################
};
完成后，可以右击在“浏览器中查看”看看效果，如果无误的话，应该如下所示，表的结构已经有了，但是还没有数据。
五、填充表格数据
在上一步中，我们在设置表的属性的时候，还有几个方法没有实现，现在在设置列名的后面实现
TableInit.Init = function () {
......
, {
field: 'ShipCountry',
title: 'ShipCountry',
sortable: true,
align: 'center',
},
],
});
};
###############################################
//得到查询的参数
TableInit.queryParams = function (params) {
return {
"offset": params.offset, //从第几条数据开始
"limit": params.limit, //每页显示的数据条数
"keyword": params.search, //搜索框中的条件
"sortName": params.sort, //要排序的列
"sortOrder": params.order, //排序列的排序方式
}
return params;
};
//双击选中行的事件
Dbclick = function (row) {
//对象转换为json
data = JSON.stringify(row);
//控制台输出选中行的数据
console.log(data);
};
##############################################
return TableInit;
};
完成前台后，来处理后台，现在要做表格请求的URL，在根目录创建文件夹“WebService”，然后右击在文件中添加新建项“一般处理程序(.ashx)”，命名的话也随意，我这里是“getInfo.ashx”
接下来就是获取前台的数据做数据请求，处理数据，返回数据
这里要额外引入的命名空间
using BootstrapTable.DB; //这里根据创建时的变成做相应改变
using Newtonsoft.Json;
using Newtonsoft.Json.Linq;
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
##############################################################
using (var db = new InfoDataContext())
{
//获取前台的信息
int limit = Convert.ToInt32(context.Request["limit"]); //每页显示数量
int offset = Convert.ToInt32(context.Request["offset"]); //从第几条数据开始
string keyword = context.Request["keyword"] == null ? "" : context.Request["keyword"].ToString(); //搜索内容
string sortName = context.Request["sortName"] == null ? "" : context.Request["sortName"].ToString();
string sortOrder = context.Request["sortOrder"] == null ? "" : context.Request["sortOrder"].ToString();
//SQL语句--这里GetSql()方法稍后实现
string sql = GetSql(keyword, sortName, sortOrder);
//数据请求
var AssetListAll = db.ExecuteQuery<Orders>(sql).ToList();
//处理数据
var AssetList = AssetListAll.Skip(offset).Take(limit).ToList(); -----------------①
var result = JsonConvert.SerializeObject(AssetList.ToArray()); --------------②
string s = "{\"rows\":" + result + ",\"total\":" + AssetListAll.Count + "}"; ----③
JObject jo = (JObject)JsonConvert.DeserializeObject(s); ---------------------④
//返回数据
context.Response.Write(jo);
}
##############################################################
}
这里解释一下在处理数据的那一块。
①是做数据的筛选，根据当前页和要显示的数据。
②③的原因，是把数据格式化，因为BootstrapTable要求返回的数据是由row(数据的合集)，total(总数)构成。
上述中“result”的值如下，“\”是转移字符看的时候忽略就行
简而言之，直接查询得到的数据不是BootstrapTable想要的，我们经过序列化、数据处理、反序列化后得到如下新的JSON对象，row显示当前页面数据，total是表格的总的条数
上图中可以得到当前页面的数据，和总的信息条数。
接着我们实现GetSql()方法
public void ProcessRequest(HttpContext context){...}
public bool IsReusable{...}
#############################################################
/// 返回要查询的sql语句
public static string GetSql(string keyword, string sortName, string sortOrder)
{
string sql = @"SELECT * FROM Orders";
//搜索
if (keyword != "")
{
//先判断sortName是否多值模糊搜索
//这里目地是实现，用户想多条件搜索时，在搜索栏中用逗号隔开
//比如用户搜索同时有A和B的信息，那么在搜索栏中输入“A,B”或者“A，B”
var keywordList = keyword.Split(new char[2] { ',', '，' });
//搜索条件
for (int i = 0; i < keywordList.Count(); i++)
{
sql += i == 0 ? " WHERE " : " AND ";
sql += @"CONCAT(CustomerID, Freight, OrderDate, OrderID, RequiredDate, ShipAddress, ShipCity, ShipCountry, ShipName, ShipPostalCode, ShippedDate) "
+ "LIKE '%" + keywordList[i] + "%'";
}
}
//排序
if (sortName != "")
{
//排序条件
sql += @" ORDER BY '" + sortName + "' " + sortOrder;
}
return sql;
}
#############################################################
上面语句中“CONVERT(varchar,OrderDate,21)”是因为数据库中的日期需要转换否则读取可能不正常，比如上图三个Date项中的空格都变成了“T”，更多信息可以参考博主的这篇文章
最后记住在Table属性中把URL补充完全
//设置表格属性
$('#GetInfoTable').bootstrapTable({
################################
url: '/WebService/getInfo.ashx', //请求数据的URL，先空着
################################
method: 'get', //请求方法
toolbar: '#toolbar', //工具栏
striped: false, //表格斑马纹
再次运行，功能都正常基本完成。
但是观察日期这里，原本空格的地方被“T”代替了，这是因为数据库中日期的格式是DateTime
更多说明可以参考一下博主的这篇文章
在这里我们有临时解决的方法
在日期列中，我们格式化一下输出
, {
field: 'OrderDate',
title: 'OrderDate',
sortable: true,
align: 'center',
##########################################
formatter: DateFormatter //日期格式化方法
##########################################
}, {
field: 'RequiredDate',
title: 'RequiredDate',
sortable: true,
align: 'center',
##########################################
formatter: DateFormatter //日期格式化方法
##########################################
}, {
field: 'ShippedDate',
title: 'ShippedDate',
sortable: true,
align: 'center',
##########################################
formatter: DateFormatter //日期格式化方法
##########################################
},
然后实现该方法
//得到查询的参数
TableInit.queryParams = function (params) {...};
//双击选中行的事件
Dbclick = function (row) {...};
###################################
//格式化表格数据
//把日期中T转换为空格
function DateFormatter(value) {
return value.replace('T', ' ');;
};
###################################
return TableInit;
这样只能临时解决问题，比如现在搜索功能只能搜索“1997”或“08”这种年月份，而对于“1997-08”搜索是没有结果的，所以还要从根本上解决。具体操作博主有时间再更新。
最后别忘了修改一下“bootstrap-table-zh-CN.js”中文字
六、导出数据
导出数据其实很方便，引用对文件就行了
需要的文件如下，下载链接
然后引入相关文件
<script src="../../../Scripts/bootstrap-table-Export/bootstrap-table-export.js">script>
<script src="../../../Scripts/bootstrap-table-Export/FileSaver.min.js">script>
<script src="../../../Scripts/bootstrap-table-Export/tableexport.js">script>
<script src="../../../Scripts/bootstrap-table-Export/xlsx.core.min.js">script>
在bootstrap-table的API中设置导出按钮及需要导出的类型
singleSelect: true, //单选
//showToggle:true,
showFooter: true, //设置表底
####################################
//导出Excel表
showExport: true,
exportDataType: "basic", //这里有三种类型可以选择“'basic', 'all', 'selected'”分别代表当前页，全部页，选中页
####################################
刷一下页面，按钮已经显示了
如果引入脚本没有问题的话，那么下载应该是没有问题的
七、美化表格
美化不是刚需，这里笔者用的是“material-dashboard”，下载链接
代码如下：
<body>
<form id="form1" runat="server">
<div class="main-panel" style="width: 100%">
<%--主表格--%>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="card-header card-header-info">
<h4 class="card-title ">BootstrapTable信息表h4>
div>
<div class="card-body">
<div class="table-responsive">
<table id="GetInfoTable" style="overflow-x:auto; white-space:nowrap">table>
div>
div>
div>
div>
div>
div>
div>
............
当然在这之前引入不能忘了
<%--material-dashboard样式 --%>
<link href="../../../Scripts/material-dashboard.css" rel="stylesheet" />
<script src="../../../Scripts/material-dashboard.js">script>
在上面的引入中，笔者给的一共有三个文件
“my-material-dashboard.css”是笔者通过“material-dashboard.css”修改得到
如果出现图标异常的情况，那就试试引入“my-material-dashboard.css”，然后清理一下项目，退出IIS，然后再试一下。
