【APS.NET Core】- Razor Page 使用jqgrid实现分页功能
本文将使用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实现分页功能的更多相关文章
- 学习ASP.NET Core Razor 编程系列十九——分页
学习ASP.NET Core Razor 编程系列目录 学习ASP.NET Core Razor 编程系列一 学习ASP.NET Core Razor 编程系列二——添加一个实体 学习ASP.NET ...
- Scaffolding Template on Asp.Net Core Razor Page
Scaffolding Template Intro 我们知道在Asp.Net MVC中,如果你使用的EF的DBContext的话,你可以在vs中通过右键解决方案-添加控制器-添加包含视图的控制器,然 ...
- 学习ASP.NET Core Razor 编程系列九——增加查询功能
学习ASP.NET Core Razor 编程系列目录 学习ASP.NET Core Razor 编程系列一 学习ASP.NET Core Razor 编程系列二——添加一个实体 学习ASP.NET ...
- 学习ASP.NET Core Razor 编程系列十——添加新字段
学习ASP.NET Core Razor 编程系列目录 学习ASP.NET Core Razor 编程系列一 学习ASP.NET Core Razor 编程系列二——添加一个实体 学习ASP.NET ...
- 学习ASP.NET Core Razor 编程系列十八——并发解决方案
学习ASP.NET Core Razor 编程系列目录 学习ASP.NET Core Razor 编程系列一 学习ASP.NET Core Razor 编程系列二——添加一个实体 学习ASP.NET ...
- 学习ASP.NET Core Razor 编程系列十七——分组
学习ASP.NET Core Razor 编程系列目录 学习ASP.NET Core Razor 编程系列一 学习ASP.NET Core Razor 编程系列二——添加一个实体 学习ASP.NET ...
- 学习ASP.NET Core Razor 编程系列十六——排序
学习ASP.NET Core Razor 编程系列目录 学习ASP.NET Core Razor 编程系列一 学习ASP.NET Core Razor 编程系列二——添加一个实体 学习ASP.NET ...
- 学习ASP.NET Core Razor 编程系列十五——文件上传功能(三)
学习ASP.NET Core Razor 编程系列目录 学习ASP.NET Core Razor 编程系列一 学习ASP.NET Core Razor 编程系列二——添加一个实体 学习ASP.NET ...
- 学习ASP.NET Core Razor 编程系列十四——文件上传功能(二)
学习ASP.NET Core Razor 编程系列目录 学习ASP.NET Core Razor 编程系列一 学习ASP.NET Core Razor 编程系列二——添加一个实体 学习ASP.NET ...
随机推荐
- WPF Prism MVVM 中 弹出新窗体. 放入用户控件
原文:WPF Prism MVVM 中 弹出新窗体. 放入用户控件 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/qq_37214567/artic ...
- 12 垃圾回收GC
1.垃圾回收 1.) 小整数对象池 #提前建立好的 Python 对小整数的定义是 [-5, 257) 这些整数对象是提前建立好的,不会被垃圾回收.在一个 Python 的程序中,所有位于这个范 ...
- Java:二进制(原码、反码、补码)与位运算
一.二进制(原码.反码.补码) 二进制的最高位是符号位(“0”代表正数,“1”代表负数): Java中没有无符号数: 计算机以整数的补码进行运算: 1. 原码:将一个整数转换成二进制表示 以 int ...
- L010小结后自考题
. 查询2号分区的inode和block的数量和尺寸 . 在lcr文件夹下创建一个a文件夹,然后进入文件夹中,创建3个3层目录,5个1层目录,5个文件 . 滤出a文件夹下的所有一级目录(4种方法) . ...
- 跨平台编译Go程序(交叉编译)
作用:比如你手头只有Mac系统,而你的用户有Linux和Windows的,他们也想用,你可以通过交叉编译出Linux和Windows上的可执行文件给他们用 (1)首先进入go/src 源码所在目录,执 ...
- EF Core注意事项
流程:https://docs.microsoft.com/en-us/ef/core/get-started/aspnetcore/new-db 1.Both Entity Framework 6. ...
- 欧陆词典PEST2词库
欧陆词典PEST2单词列表,其中大概1900+单词,可能有少数几个没有录入,但不影响使用!
- 「日常训练」Kefa and Company(Codeforces Round #321 Div. 2 B)
题意与分析(CodeForces 580B) \(n\)个人,告诉你\(n\)个人的工资,每个人还有一个权值.现在从这n个人中选出m个人,使得他们的权值之和最大,但是对于选中的人而言,其他被选中的人的 ...
- jenkins--Jenkins+Git+coding+maven 实现自动化测试持续集成
1.打开Jenkins官网,下载jenkins.war https://jenkins.io/download/ 2.将该war包直接放置到Tomcat的webapp下. 3.查看自己Tomcat的端 ...
- MATLAB实现连续周期信号的频谱分析(正余弦波信号举例)
关于MATLAB实现连续信号的频谱分析,以正余弦波信号频谱分析为例分析如下: 1.含有频率f ,2f和3f的正弦波叠加信号,即: 其中,f =500Hz.试采用Matlab仿真软件对该信号进行频谱分析 ...