详解如何用MSSQL + BootstrapTable + C#(Asp.net)来制作信息表格及导出数据(附源码)

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/ZUFE_ZXh/article/details/86686135

〇.开始前先看看效果图吧

在这里插入图片描述

一、准备(下载)所需文件

  1. js和css文件:下载链接 源码
  2. 本次开发测试数据库:Northwind,安装方法请参考这篇文章
    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验证登录即可。

没有数据库或者不方便的同学可以发邮件给我,博主可以提供下面的远程数据库密码,联系方式:957553851@qq.com

在这里插入图片描述
可以点击“测试连接”来验证可行性,可以之后点击“确定”可以在“服务器资源管理器”中看到数据库,然后打开表选择要用到的表直接拖拽到右边即可。
在这里插入图片描述
保存,关闭就配置完成了。

四、画表格

首先导入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{...}

#############################################################
/// <summary>
/// 根据条件生成sql语句
/// </summary>
/// <param name="keyword">搜索关键词</param>
/// <param name="sortName">排序的列名</param>
/// <param name="sortOrder">排序的方式</param>
/// <returns>返回要查询的sql语句</returns>
 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,然后再试一下。
在这里插入图片描述

展开阅读全文

没有更多推荐了,返回首页