本文将使用jqgrid在Razor Page中实现分页功能。

前台

List.cshtml代码如下:

 @page
@model ListModel
@{
Layout = "~/Pages/Shared/_Index.cshtml";
} <script>
$(function () {
gridList();
}); function gridList() {
var $gridList = $("#gridList");
$gridList.dataGrid({
url: "/Admin/User/List?handler=GridJson",
height: $(window).height() - 128,
colModel: [
{ label: '主键', name: 'F_Id', hidden: true },
{ label: '账户', name: 'F_Account', width: 80, align: 'left' },
{ label: '姓名', name: 'F_RealName', width: 80, align: 'left' },
{
label: '性别', name: 'F_Gender', width: 60, align: 'center',
formatter: function (cellvalue) {
if (cellvalue === true) {
return '男';
} else {
return '女';
}
}
},
{ label: '手机', name: 'F_MobilePhone', width: 80, align: 'left' },
{
label: '公司', name: 'F_OrganizeId', width: 150, align: 'left',
formatter: function (cellvalue) {
return top.clients.organize[cellvalue] == null ? "" : top.clients.organize[cellvalue].fullname;
}
},
{
label: '部门', name: 'F_DepartmentId', width: 80, align: 'left',
formatter: function (cellvalue) {
return top.clients.organize[cellvalue] == null ? "" : top.clients.organize[cellvalue].fullname;
}
},
{
label: '岗位', name: 'F_DutyId', width: 80, align: 'left',
formatter: function (cellvalue) {
return top.clients.duty[cellvalue] == null ? "" : top.clients.duty[cellvalue].fullname;
}
},
{
label: '创建时间', name: 'F_CreatorTime', width: 80, align: 'left',
formatter: "date", formatoptions: { srcformat: 'Y-m-d', newformat: 'Y-m-d' }
},
{
label: "允许登录", name: "F_EnabledMark", width: 60, align: "center",
formatter: function (cellvalue) {
if (cellvalue) {
return '<span class=\"label label-success\">正常</span>';
} else if (cellvalue === 0) {
return '<span class=\"label label-default\">禁用</span>';
}
}
},
{ label: '备注', name: 'F_Description', width: 200, align: 'left' }
],
pager: "#gridPager",
sortname: 'F_DepartmentId asc, F_CreatorTime desc',
viewrecords: true
}); $("#btn_search").click(function () {
$gridList.jqGrid('setGridParam', {
postData: { keyword: $("#txt_keyword").val() }
}).trigger('reloadGrid');
});
} function btn_add() {
$.modalOpen({
id: "Form",
title: "新增用户",
url: "/Admin/User/Form",
width: "700px",
height: "510px",
callBack: function (iframeId) {
top.frames[iframeId].submitForm();
}
});
} function btn_edit() {
var keyValue = $("#gridList").jqGridRowValue().F_Id;
$.modalOpen({
id: "Form",
title: "修改用户",
url: "/Admin/User/Form?keyValue=" + keyValue,
width: "700px",
height: "510px",
callBack: function (iframeId) {
top.frames[iframeId].submitForm();
}
});
} function btn_delete() {
$.deleteForm({
url: "/Admin/User/List?handler=DeleteForm",
param: { keyValue: $("#gridList").jqGridRowValue().F_Id },
success: function () {
$.currentWindow().$("#gridList").trigger("reloadGrid");
}
})
} function btn_details() {
var keyValue = $("#gridList").jqGridRowValue().F_Id;
$.modalOpen({
id: "Details",
title: "查看用户",
url: "/Admin/User/Details?keyValue=" + keyValue,
width: "700px",
height: "550px",
btn: null,
});
} function btn_revisepassword() {
var keyValue = $("#gridList").jqGridRowValue().F_Id;
var account = $("#gridList").jqGridRowValue().F_Account;
var realName = $("#gridList").jqGridRowValue().F_RealName;
$.modalOpen({
id: "RevisePassword",
title: '重置密码',
url: '/Admin/User/RevisePassword?keyValue=' + keyValue + "&account=" + escape(account) + '&realName=' + escape(realName),
width: "450px",
height: "260px",
callBack: function (iframeId) {
top.frames[iframeId].submitForm();
}
});
} function btn_disabled() {
var keyValue = $("#gridList").jqGridRowValue().F_Id;
$.modalConfirm("注:您确定要【禁用】该项账户吗?", function (r) {
if (r) {
$.submitForm({
url: "/Admin/User/List?handler=DisabledAccount",
param: { keyValue: keyValue },
success: function () {
$.currentWindow().$("#gridList").trigger("reloadGrid");
}
})
}
});
} function btn_enabled() {
var keyValue = $("#gridList").jqGridRowValue().F_Id;
$.modalConfirm("注:您确定要【启用】该项账户吗?", function (r) {
if (r) {
$.submitForm({
url: "/Admin/User/List?handler=EnabledAccount",
param: { keyValue: keyValue },
success: function () {
$.currentWindow().$("#gridList").trigger("reloadGrid");
}
})
}
});
}
</script> <div class="topPanel">
<div class="toolbar">
<div class="btn-group">
<a class="btn btn-primary" onclick="$.reload()"><span class="glyphicon glyphicon-refresh"></span></a>
</div>
<div class="btn-group">
<a id="NF-add" authorize="yes" class="btn btn-primary dropdown-text" onclick="btn_add()"><i class="fa fa-plus"></i>新建用户</a>
</div>
<div class="operate">
<ul class="nav nav-pills">
<li class="first">已选中<span>1</span>项</li>
<li><a id="NF-edit" authorize="yes" onclick="btn_edit()"><i class="fa fa-pencil-square-o"></i>修改用户</a></li>
<li><a id="NF-delete" authorize="yes" onclick="btn_delete()"><i class="fa fa-trash-o"></i>删除用户</a></li>
<li><a id="NF-Details" authorize="yes" onclick="btn_details()"><i class="fa fa-search-plus"></i>查看用户</a></li>
<li class="split"></li>
<li><a id="NF-revisepassword" authorize="yes" onclick="btn_revisepassword()"><i class="fa fa-key"></i>密码重置</a></li>
<li class="split"></li>
<li><a id="NF-disabled" authorize="yes" onclick="btn_disabled()"><i class="fa fa-stop-circle"></i>禁用</a></li>
<li><a id="NF-enabled" authorize="yes" onclick="btn_enabled()"><i class="fa fa-play-circle"></i>启用</a></li>
</ul>
<a href="javascript:;" class="close"></a>
</div>
<script>$('.toolbar').authorizeButton()</script>
</div>
<div class="search">
<table>
<tr>
<td>
<div class="input-group">
<input id="txt_keyword" type="text" class="form-control" placeholder="账户/姓名/手机" style="width: 200px;">
<span class="input-group-btn">
<button id="btn_search" type="button" class="btn btn-primary"><i class="fa fa-search"></i></button>
</span>
</div>
</td>
</tr>
</table>
</div>
</div>
<div class="gridPanel">
<table id="gridList"></table>
<div id="gridPager"></div>
</div>
$gridList.dataGrid的定义见下一节。

jqgrid

jqGrid异步请求的默认请求参数属性包含:

{
page:"page", //当前页码
rows:"rows", //每页数量
sort:"sidx", //排序字段
order:"sord", //排序类型
search:"_search",
nd:"nd",
id:"id",
oper:"oper",
editoper:"edit",
addoper:"add",
deloper:"del",
subgridid:"id",
npage:null,
totalrows:"totalrows"
}

可以看到参数中包含名为page的参数,但是在Razor Page中名为page的参数已经被占用了,如图所示:

可以看到page参数是一个字符串类型,代表的是当前Page的地址。因此,不能使用再使用page作为当前页的名称,否则将会导致无法正常翻页。所以我们需要重新定义jqgrid的请求参数名称。可喜的是jqGrid提供了prmNames这个属性用来修改请求参数属性,因此我们对jqgrid做二级封装,代码如下:

$.fn.dataGrid = function (options) {
var defaults = {
datatype: "json",
autowidth: true,
rownumbers: true,
shrinkToFit: false,
gridview: true,
rowNum: 15,
rowList: [10, 15, 30, 50, 100],
prmNames: {
'page': 'PageIndex',
'rows': 'PageSize',
'order': 'SortType',
'sort': 'SortColumn'

}

};
var options = $.extend(defaults, options);
var $element = $(this);
options["onSelectRow"] = function (rowid) {//选中某一行之后
var length = $(this).jqGrid("getGridParam", "selrow").length;
var $operate = $(".operate");
if (length > 0) {
$operate.animate({ "left": 0 }, 200);
} else {
$operate.animate({ "left": '-100.1%' }, 200);
} $operate.find('.close').click(function () {
$operate.animate({ "left": '-100.1%' }, 200);
});
};
$element.jqGrid(options);
};

为了符合C#的属性命名规范,我们将几个需要接受的参数都使用匈牙利命名法。

后台

为了接收前台jqgird传递的参数,我们定义一个Class,内容如下:

    /// <summary>
/// 分页信息
/// </summary>
public class PagerInfo
{
/// <summary>
/// 表名称
/// </summary>
public string TableName { get; set; } /// <summary>
/// 主键名称
/// </summary>
public string PKField { get; set; } = "id"; /// <summary>
/// 返回列 逗号分隔
/// </summary>
public string ReturnField { get; set; } = "*"; /// <summary>
/// 查询条件
/// </summary>
public string QueryString { get; set; } /// <summary>
/// 排序列
/// </summary>
public string SortColumn { get; set; } /// <summary>
/// 排序类型
/// </summary>
public string SortType { get; set; } /// <summary>
/// 当前页
/// </summary>
public int PageIndex { get; set; } /// <summary>
/// 每页条数
/// </summary>
public int PageSize { get; set; } /// <summary>
/// 总记录数
/// </summary>
public int TotalCount { get; set; } /// <summary>
/// 总页数
/// </summary>
public int PageCount
{
get
{
if (this.TotalCount <= )
{
return ;
} return TotalCount % this.PageSize == ? TotalCount / this.PageSize : TotalCount / this.PageSize + ;
}
}
}

代码中的红色部分就是与我们自定义的jqgrid请求参数对应。分页获取数据的方法:

        /// <summary>
/// 分页获取对象
/// </summary>
/// <typeparam name="T"></typeparam>
/// <param name="pagerInfo"></param>
/// <returns></returns>
public static List<T> GetPageList<T>(PagerInfo pagerInfo)
{
using (var conn = ConnectionFactory.GetInstance())
{
var param = new DynamicParameters();
param.Add("@tbName", pagerInfo.TableName);
param.Add("@pkField", pagerInfo.PKField);
param.Add("@pageIndex", pagerInfo.PageIndex);
param.Add("@pageSize", pagerInfo.PageSize);
param.Add("@returnField", pagerInfo.ReturnField);
param.Add("@orderField", pagerInfo.SortColumn);
param.Add("@queryStr", pagerInfo.QueryString);
param.Add("@itemCount", , DbType.Int32, ParameterDirection.Output);
param.Add("@pageCount", , DbType.Int32, ParameterDirection.Output); var list = conn.Query<T>("SP_Pagination", param, commandType: CommandType.StoredProcedure).ToList();
pagerInfo.TotalCount = param.Get<int>("@itemCount"); return list;
}
}

可以看到代码中调用了Mysql数据库中名为:SP_Pagination 的存储过程,该存储过程定义见下一节。

数据库

SP_Pagination定义如下:

CREATE DEFINER=`root`@`%` PROCEDURE `SP_Pagination`(in tbName varchar(20),#表名
in returnField varchar(100),#要显示的列名
in queryStr varchar(500),#where条件(只需要写where后面的语句)
in orderField varchar(500),#排序条件(只需要写order by后面的语句)
in pageSize int,#每一页显示的记录数
in pageIndex int,#当前页
out itemCount int,
out pageCount int)
BEGIN
if (pageSize < 1)then
set pageSize = 20;
end if; if (pageIndex < 1)then
set pageIndex = 1;
end if; if(LENGTH(queryStr)>0)then
set queryStr=CONCAT(' where ',queryStr);
end if; if(orderField is not null and LENGTH(orderField)>0)then
set orderField = CONCAT(' order by ',orderField);
end if; set @strsql = CONCAT('select ', returnField, ' from ', tbName, ' ', queryStr, ' ', orderField, ' limit ', pageIndex * pageSize - pageSize, ',', pageSize); prepare stmtsql from @strsql;
execute stmtsql;
deallocate prepare stmtsql; set @strsqlcount=concat('select count(1) as count into @itemCount from ',tbName,'',queryStr);
prepare stmtsqlcount from @strsqlcount;
execute stmtsqlcount;
deallocate prepare stmtsqlcount;
set itemCount=@itemCount;
set pageCount = (itemCount + pageIndex - 1) / pageSize;
END

至此,Razor Page分页功能实现完毕。需要特别注意的是jqgrid的page参数与Razor Page的page参数冲突的问题。

【APS.NET Core】- Razor Page 使用jqgrid实现分页功能的更多相关文章

  1. 学习ASP.NET Core Razor 编程系列十九——分页

    学习ASP.NET Core Razor 编程系列目录 学习ASP.NET Core Razor 编程系列一 学习ASP.NET Core Razor 编程系列二——添加一个实体 学习ASP.NET ...

  2. Scaffolding Template on Asp.Net Core Razor Page

    Scaffolding Template Intro 我们知道在Asp.Net MVC中,如果你使用的EF的DBContext的话,你可以在vs中通过右键解决方案-添加控制器-添加包含视图的控制器,然 ...

  3. 学习ASP.NET Core Razor 编程系列九——增加查询功能

    学习ASP.NET Core Razor 编程系列目录 学习ASP.NET Core Razor 编程系列一 学习ASP.NET Core Razor 编程系列二——添加一个实体 学习ASP.NET ...

  4. 学习ASP.NET Core Razor 编程系列十——添加新字段

    学习ASP.NET Core Razor 编程系列目录 学习ASP.NET Core Razor 编程系列一 学习ASP.NET Core Razor 编程系列二——添加一个实体 学习ASP.NET ...

  5. 学习ASP.NET Core Razor 编程系列十八——并发解决方案

    学习ASP.NET Core Razor 编程系列目录 学习ASP.NET Core Razor 编程系列一 学习ASP.NET Core Razor 编程系列二——添加一个实体 学习ASP.NET ...

  6. 学习ASP.NET Core Razor 编程系列十七——分组

    学习ASP.NET Core Razor 编程系列目录 学习ASP.NET Core Razor 编程系列一 学习ASP.NET Core Razor 编程系列二——添加一个实体 学习ASP.NET ...

  7. 学习ASP.NET Core Razor 编程系列十六——排序

    学习ASP.NET Core Razor 编程系列目录 学习ASP.NET Core Razor 编程系列一 学习ASP.NET Core Razor 编程系列二——添加一个实体 学习ASP.NET ...

  8. 学习ASP.NET Core Razor 编程系列十五——文件上传功能(三)

    学习ASP.NET Core Razor 编程系列目录 学习ASP.NET Core Razor 编程系列一 学习ASP.NET Core Razor 编程系列二——添加一个实体 学习ASP.NET ...

  9. 学习ASP.NET Core Razor 编程系列十四——文件上传功能(二)

    学习ASP.NET Core Razor 编程系列目录 学习ASP.NET Core Razor 编程系列一 学习ASP.NET Core Razor 编程系列二——添加一个实体 学习ASP.NET ...

随机推荐

  1. WPF Prism MVVM 中 弹出新窗体. 放入用户控件

    原文:WPF Prism MVVM 中 弹出新窗体. 放入用户控件 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/qq_37214567/artic ...

  2. 12 垃圾回收GC

    1.垃圾回收 1.) 小整数对象池    #提前建立好的 Python 对小整数的定义是 [-5, 257) 这些整数对象是提前建立好的,不会被垃圾回收.在一个 Python 的程序中,所有位于这个范 ...

  3. Java:二进制(原码、反码、补码)与位运算

    一.二进制(原码.反码.补码) 二进制的最高位是符号位(“0”代表正数,“1”代表负数): Java中没有无符号数: 计算机以整数的补码进行运算: 1.  原码:将一个整数转换成二进制表示 以 int ...

  4. L010小结后自考题

    . 查询2号分区的inode和block的数量和尺寸 . 在lcr文件夹下创建一个a文件夹,然后进入文件夹中,创建3个3层目录,5个1层目录,5个文件 . 滤出a文件夹下的所有一级目录(4种方法) . ...

  5. 跨平台编译Go程序(交叉编译)

    作用:比如你手头只有Mac系统,而你的用户有Linux和Windows的,他们也想用,你可以通过交叉编译出Linux和Windows上的可执行文件给他们用 (1)首先进入go/src 源码所在目录,执 ...

  6. EF Core注意事项

    流程:https://docs.microsoft.com/en-us/ef/core/get-started/aspnetcore/new-db 1.Both Entity Framework 6. ...

  7. 欧陆词典PEST2词库

    欧陆词典PEST2单词列表,其中大概1900+单词,可能有少数几个没有录入,但不影响使用!

  8. 「日常训练」Kefa and Company(Codeforces Round #321 Div. 2 B)

    题意与分析(CodeForces 580B) \(n\)个人,告诉你\(n\)个人的工资,每个人还有一个权值.现在从这n个人中选出m个人,使得他们的权值之和最大,但是对于选中的人而言,其他被选中的人的 ...

  9. jenkins--Jenkins+Git+coding+maven 实现自动化测试持续集成

    1.打开Jenkins官网,下载jenkins.war https://jenkins.io/download/ 2.将该war包直接放置到Tomcat的webapp下. 3.查看自己Tomcat的端 ...

  10. MATLAB实现连续周期信号的频谱分析(正余弦波信号举例)

    关于MATLAB实现连续信号的频谱分析,以正余弦波信号频谱分析为例分析如下: 1.含有频率f ,2f和3f的正弦波叠加信号,即: 其中,f =500Hz.试采用Matlab仿真软件对该信号进行频谱分析 ...