BootStrap-table 在传统Asp.NET(webform)中基于ashx(一般处理程序)的调用
BootStrap-table 在传统Asp.NET(webform)中基于ashx(一般处理程序)的调用
就目前的形式来看Asp.NET webform的模式已经显得过时了,可是在许多高校教学中,和一些外包项目中还大量充斥着旧代码的使用,在传统拖控件的时代显然,gridview控件已经不能满足大家的实际使用,近期在网上看到一篇写的非常优秀的文章,使用BootStrap-table取代了GridView,而大多数时候Bootstraptable需要与webapi或.net ,mvc配合,这样如非必要可以减少重构代码的难度,特与大家分享
原文链接:https://blog.****.net/qq237183141/article/details/78337512
使用效果:
1.前端html调用代码
bootstraptable 的css文件和js文件引用了网络上的cdn
还需要引入bootstrap文件,可自行到官网下载,或者引用官网的cdn加速后的网络文件
css:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
js:
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<head>
<meta charset="utf-8" />
<title></title>
<link href="css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.min.css">
</head>
<body>
<table id="table"></table>
<div id="toolbar" class="btn-group">
<button id="btn_add" type="button" class="btn btn-success">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
</button>
<button id="btn_edit" type="button" class="btn btn-info">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改
</button>
<button id="btn_delete" type="button" class="btn btn-warning">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
</button>
</div>
<script src="scripts/jquery-1.11.1.min.js"></script>
<script src="scripts/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/locale/bootstrap-table-zh-CN.min.js"></script>
</body>
</html>
2.通过js初始化表格
初始化表格就是可以通过bootstraptable预留的接口,通过调整一些json参数调整显示的效果
url中填写你ashx的文件路径 例 url: "classManage.ashx",在下一步创建中我将创建一个同文件夹下的classManage.ashx文件
<script>
$('#table').bootstrapTable({
url: "classManage.ashx",
cache: false,//是否使用缓存
method: "post",
toolbar: "#toolbar",
showRefresh: true,//刷新按钮
sortStable: true,//是否支持排序
contentType: "application/x-www-form-urlencoded",//post请求必须要有,否则后台接受不到参数
pagination: true,//是否显示分页
sidePagination: "server",//设置在服务端还是客户端分页
pageNumber: 1,//首页页码,默认为1
pageSize: 10,//页面数据条数,默认为10
search: true,//是够有搜索框
clickToSelect: true,//点击是否选中行
showToggle: true, //显示详情按钮
showColumns: true,//添加这行后,可以自主设置显示隐藏行
queryParamsType: "",
queryParams: function (params) {
return {
pageSize: params.pageSize,//pageSize
pageNumber: params.pageNumber,//偏移量
sortName: params.sortName,//以哪个字段排序
sortOrder: params.sortOrder,//降序还是升序,asc,desc
searchText: params.searchText//搜索关键字
};
},
formatLoadingMessage: function () {
return "请稍后,正在加载....";
},
formatNoMatches: function () {
return "暂无匹配数据.";
},
columns: [{
field: "select",
title: "全选",
checkbox:true,
}, {
field: 'teacherID',
title: '工号',
sortable:true
}, {
field: 'teachername',
title: '姓名'
}, {
field: 'teachersex',
title: '性别'
}, {
field: 'level',
title: '权限'
}]
});
</script>
3.创建一个一般处理程序(.ashx)
需要包括的头文件
using System;
using System.Web;
using System.Data.SqlClient;
using System.Data;
using System.Collections.Generic;
using System.Web.Script.Serialization;
核心代码:
注意!!!第一行的数据库连接类是我自己创建的 还有后面的一行数据访问的类是我自己写的!!!你们需要根据自己需求创建数据访问类 !!!我在需要修改的地方做了标注
SelectDB selectDB = new SelectDB();
//此处要注意这个类是我自己创建的数据库连接类需要替换成自己的!!!!!!!!
private int pageSize = 10;//一页显示的数据
private int pageNumber = 1;//页码
private string sortName = "";//排序字段
private string sortOrder = "1";//asc or desc
private string searchText = "";//关键字
public void ProcessRequest(HttpContext context)
{
if (!string.IsNullOrEmpty(context.Request["pageSize"]))
pageSize = Convert.ToInt32(context.Request["pageSize"]);
if (!string.IsNullOrEmpty(context.Request["pageNumber"]))
pageNumber = Convert.ToInt32(context.Request["pageNumber"]);
if (!string.IsNullOrEmpty(context.Request["sortName"]))
sortName = (context.Request["sortName"]);
if (!string.IsNullOrEmpty(context.Request["sortOrder"]))
{
sortOrder = (context.Request["sortOrder"]);
if (sortOrder == "asc")
sortOrder = "1";
else if (sortOrder == "desc")
sortOrder = "0";
}
string strWhere = "";
if (!string.IsNullOrEmpty(context.Request["searchText"]))
{
searchText = (context.Request["searchText"]);
strWhere += string.Format(" (user_no like '%{0}%' or user_name like '%{0}%')", searchText);
}
string json = LoadTableByPagination("teacher", "*", pageNumber, pageSize,Convert.ToInt32(sortOrder), strWhere, "teacherID");
context.Response.Write(json);
context.Response.End();
}
/// <summary>
/// 调用分页储存过程,返回table的json数据
/// </summary>
/// <param name="table">数据库表名</param>
/// <param name="fields">查询的字段</param>
/// <param name="pageNumber">当前页码</param>
/// <param name="pageSize">一页显示的数据</param>
/// <param name="orderSort">0降序,1升序</param>
/// <param name="strWhere">查询条件</param>
/// <param name="orderName">排序字段</param>
/// <returns></returns>
string LoadTableByPagination(string table,string fields,int pageNumber,int pageSize,int orderSort,string strWhere,string orderName )
{
string json = "";
SqlParameter[] parameters = {new SqlParameter("@TABLE",SqlDbType.VarChar,50),
new SqlParameter("@FEILDS",SqlDbType.VarChar,1000),
new SqlParameter("@PAGE_INDEX",SqlDbType.Int,4),
new SqlParameter("@PAGE_SIZE",SqlDbType.Int,4),
new SqlParameter("@ORDERTYPE",SqlDbType.Bit),
new SqlParameter("@ANDWHERE",SqlDbType.VarChar,1000),
new SqlParameter("@ORDERFEILD",SqlDbType.VarChar,100)
};
parameters[0].Value = table;//表格
parameters[1].Value = fields;//字段
parameters[2].Value = pageNumber;
parameters[3].Value = pageSize;
parameters[4].Value = orderSort;//0是降序,1是升序
parameters[5].Value = strWhere;//条件
parameters[6].Value = orderName;//排序字段
DataSet dataSet = selectDB.RunProcDataSet("[PAGINATION]", parameters);
//此处要注意这个类是我自己创建的数据库连接类需要替换成自己的!!!!!!!!
if (dataSet != null)
{
DataTable dt = dataSet.Tables[0];
//后台返回的json数据必须包含total,和rows属性,否则前台没数据
if (dataSet.Tables[1] != null && dataSet.Tables[1].Rows.Count > 0)
json += "{\"total\":" + dataSet.Tables[1].Rows[0]["total"] + ",";
if (dt != null & dt.Rows.Count > 0)
json += "\"rows\":" + DataTableToJson(dt) + "}";
}
return json;
}
public bool IsReusable
{
get
{
return false;
}
}
#region Json&DataTable
/// <summary>
/// DataTable转为json
/// </summary>
/// <param name="dt">DataTable</param>
/// <returns>json数据</returns>
public static string DataTableToJson(DataTable dt)
{
List<Dictionary<string, object>> list = new List<Dictionary<string, object>>();
foreach (DataRow dr in dt.Rows)
{
Dictionary<string, object> result = new Dictionary<string, object>();
foreach (DataColumn dc in dt.Columns)
{
result.Add(dc.ColumnName, dr[dc]);
}
list.Add(result);
}
int recursionLimit = 100;
JavaScriptSerializer serialize = new JavaScriptSerializer();
serialize.RecursionLimit = recursionLimit;
serialize.MaxJsonLength = Int32.MaxValue;
return serialize.Serialize(list);
}
#endregion Json&DataTable
4.存储过程:
以下为存储过程的创建过程,原文中写的非常好我就不做修改了
/*数据分页*/
CREATE PROCEDURE [dbo].[PAGINATION]
@TABLE varchar(50),--数据库表名
@FEILDS VARCHAR(1000),--要显示的字段
@PAGE_INDEX INT,--当前页码
@PAGE_SIZE INT,--页面大小
@ORDERTYPE BIT,--当为0时 则为 desc 当为1 时 asc
@ANDWHERE VARCHAR(1000)='',--where语句 不用加where
@ORDERFEILD VARCHAR(100) --排序的字段
as
DECLARE @EXECSQL VARCHAR(2000)
DECLARE @ORDERSTR VARCHAR(100)
DECLARE @ORDERBY VARCHAR(100)
BEGIN
set NOCOUNT on
IF @ORDERTYPE = 1
BEGIN
SET @ORDERSTR = ' > ( SELECT MAX(['[email protected]+'])'
SET @ORDERBY = 'ORDER BY '[email protected]+' ASC'
END
ELSE
BEGIN
SET @ORDERSTR = ' < ( SELECT MIN(['[email protected]+'])'
SET @ORDERBY = 'ORDER BY '[email protected]+' DESC'
END
IF @PAGE_INDEX = 1 --当页码是第一页时直接运行,提高速度
BEGIN
IF @ANDWHERE=''
SET @EXECSQL = 'SELECT TOP '+STR(@PAGE_SIZE)+' '[email protected]+' FROM ['[email protected]+'] '[email protected]
ELSE
SET @EXECSQL = 'SELECT TOP '+STR(@PAGE_SIZE)+' '[email protected]+' FROM ['[email protected]+'] WHERE '[email protected]+' '+ @ORDERBY
END
ELSE
BEGIN
IF @ANDWHERE=''
BEGIN --以子查询结果当做新表时 要给表名别名才能用
SET @EXECSQL = 'SELECT TOP'+STR(@PAGE_SIZE)+' '[email protected]+' FROM ['[email protected]+'] WHERE '[email protected]+
@ORDERSTR+' FROM (SELECT TOP '+STR(@PAGE_SIZE*(@PAGE_INDEX-1))+' '[email protected]+
' FROM ['[email protected]+'] '[email protected]+') AS TEMP) '+ @ORDERBY
END
ELSE
BEGIN
SET @EXECSQL = 'SELECT TOP'+STR(@PAGE_SIZE)+' '[email protected]+' FROM ['[email protected]+'] WHERE '[email protected]+
@ORDERSTR+' FROM (SELECT TOP '+ STR(@PAGE_SIZE*(@PAGE_INDEX-1))+' '[email protected]+
' FROM ['[email protected]+'] WHERE '[email protected]+' '[email protected]+') AS TEMP) AND '[email protected]+' '+ @ORDERBY
END
END
--获取table的总行数
IF @ANDWHERE=''
set @[email protected]+'; select count(*) as total from ['[email protected]+'] '
else
set @[email protected]+'; select count(*) as total from ['[email protected]+'] WHERE '[email protected]
EXEC (@EXECSQL)--这里要加括号
END
GO
(下篇)bootstrap-table的修改与添加链接: https://blog.****.net/weixin_42550800/article/details/86767494