项目本来使用的是webgrid。后台弃用改成Jqgrid插件。

首先介绍一下webgrid的用法:webgrid是mvc中HtmlHelper自带的。首先创建viewmodel用于数据的绑定,然后在页面中进行绑定一些参数的设置即可

具体如下:

@model Models.SearchPageViewModel
@{
WebGrid grid = new WebGrid(null,
rowsPerPage: Model.PagingInfo.ItemsPerPage,
selectionFieldName: "selectedRow",
ajaxUpdateContainerId: "gridContent",
canSort: false);
grid.Bind(Model.modelList, autoSortAndPage: false, rowCount: Model.PagingInfo.TotalItems);
} @if (grid.TotalRowCount > 0)
{
<div id="gridContent">
@grid.GetHtml(
tableStyle: "GridViewTable",
headerStyle: "HeaderStyle",
footerStyle: "FooterStyle",
rowStyle: "RowStyle",
alternatingRowStyle: "AltRowStyle",
selectedRowStyle: "SelectedRowStyle",
mode: WebGridPagerModes.All,
numericLinksCount: 10,
firstText: "首页",
lastText: "尾页",
previousText: "<",
nextText: ">",
columns: grid.Columns(
grid.Column("RowNum", "序号", format: (item) => item.RowNum),
grid.Column("XZQDM", "行政区代码", format: (item) => item.XZQDM, style: null, canSort: false),
grid.Column("XZQMC", "行政区名称", format: (item) => item.XZQMC, canSort: false),
grid.Column("UPTIME", "上传时间", format: (item) => item.UPTIME, canSort: false),
grid.Column(header: "选择",
format: @<text><input class="check-box" id="assignChkBx" name="assignChkBx" type="checkbox" value="@item.PZWH"/></text>)
))
</div>

Jqgrid用法大同小异:

需要引用<script type="text/javascript" src="~/scripts/locales/grid.locale-cn.js"></script>
    <script type="text/javascript" src="~/scripts/jqGrid/jquery.jqGrid.js"></script>

<link type="text/css" href="~/content/jquery-ui/jquery-ui-1.10.4.custom.css" media="screen" rel="Stylesheet" />
    <link type="text/css" href="~/Content/jqGrid/ui.jqgrid.css" media="screen" rel="Stylesheet" />

第一步:定义一个呈现数据的表格 <table id="gridUploadProg" style=" height:100%; width:100%"></table>

第二部:在js里面进行相关设置

var grid = $("#gridUploadProg");
grid.jqGrid({
url: 'ResultManage/QueryData',
mtype: 'post',
datatype: 'json',
loadonce: false,
data: {},
colNames: ['项目ID', '行政区代码', '行政区名称'],
colModel: [
{ name: 'XMID', index: 'XMID', sortable: false, key: true, align: 'center', hidden: true },
{ name: 'XZQDM', index: 'XZQDM' },
{ name: 'XZQMC', index: 'XZQMC', align: 'center' },
{ name: 'XMMC', index: 'XMMC', align: 'center' }
],
rowNum: 10,
rowList: [10, 15, 20, 30],
pager: '#gridUploadProgPager',
emptyrecords: "没有符合要求的数据",
gridview: true,
rownumbers: true,
sortname: 'ProvinceCode',
viewrecords: true,
sortorder: 'asc',
multiselect: true,
caption: '任务管理列表',
jsonReader: {
page: 'page',
total: 'total',
records: 'records',
root: 'rows'
},
height: '100%',
loadui: 'block',
autoScroll: false,
loadComplete: function (data) { //完成服务器请求后,回调函数
// alert(data.records);
if (data.records == 0) { //如果没有记录返回,追加提示信息
$("p").appendTo($("#gridUploadProg")).addClass("nodata").html("找不到相关数据!");
}
else { //否则,删除提示
$("p.nodata").remove();
}
} });

第三步:在control里面进行模型的获取JSON的转换

 public void QueryData(string sidx = "XZQDM", string sord = "DESC", int rows = 10, int page = 1)
{
SearchConditionModel searchCondition = new SearchConditionModel();
if (this.Session["SearchCondition"] != null)
{
searchCondition = (SearchConditionModel)this.Session["SearchCondition"];
} int totalRecord = 0;
IEnumerable<TsakManageViewModel> modelList = this.TaskManageDataContext.GetModelList(
out totalRecord,
provinceCode: searchCondition.XZQ,
rwlx: searchCondition.RWLX,
taskResult: searchCondition.SFTG,
orderField: sidx,
orderType: sord,
pageIndex: page,
pageSize: rows
);
//int index = (page - 1) * rows; // 开始记录数
int totalPage = totalRecord % rows == 0 ? totalRecord
/ rows : totalRecord / rows + 1; // 计算总页数
int pagesize = rows;
string son = Newtonsoft.Json.JsonConvert.SerializeObject(modelList); son = "{ \"page\": " + page.ToString() + ", \"total\": " + totalPage.ToString() + ", \"records\": " + totalRecord.ToString() + ", \"rows\": " + son + "}";
Response.Write(son);
}

以后每一次分页查询都会进到这个action里面,实现分页实时查询数据。JSON数据前面一定要加记录数等信息用于分页的显示。当然还有其他方法返回json数据。理想的格式应该的返回JsonResult的。像这样 return Json(modelList, JsonRequestBehavior.AllowGet);这种方法我还没有测试,不清楚能不能返回数据到界面上。这种方法看起来明显正规一点

MVC4 Jqgrid设计与实现的更多相关文章

  1. ASP.NET MVC5 入门

    参考资料<ASP.NET MVC5 高级编程>第5版 第1章 入门 1.1 ASP.NET MVC 简介 ASP.NET MVC是一种构建Web 应用程序的框架,它将一般的MVC(Mode ...

  2. [译]MVC网站教程(四):MVC4网站中集成jqGrid表格插件(系列完结)

    目录 1.   介绍 2.   软件环境 3.   在运行示例代码之前(源代码 + 示例登陆帐号) 4.         jqGrid和AJAX 5.         GridSettings 6.  ...

  3. 建筑材料系统 ASP.NET MVC4.0 + WebAPI + EasyUI + Knockout 的架构设计开发

    框架介绍: 1.基于 ASP.NET MVC4.0 + WebAPI + EasyUI + Knockout 的架构设计开发 2.采用MVC的框架模式,具有耦合性低.重用性高.生命周期成本低.可维护性 ...

  4. 基于MVC4+EasyUI的Web开发框架形成之旅--MVC控制器的设计

    自从上篇<基于MVC4+EasyUI的Web开发框架形成之旅--总体介绍>总体性的概括,得到很多同行的关注和支持,不过上一篇主要是介绍一个总体的界面效果和思路,本系列的文章将逐步介绍其中的 ...

  5. Asp.net MVC4 Knockoutjs BootStrap Ace NinJect Jqgrid sqlserver2008

    Asp.net MVC4 Knockoutjs  BootStrap Ace NinJect  Jqgrid sqlserver2008

  6. 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(48)-工作流设计-起草新申请

    原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(48)-工作流设计-起草新申请 系列目录 创建新表单之后,我们就可以起草申请了,申请按照严格的表单步骤和分 ...

  7. 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(47)-工作流设计-补充

    原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(47)-工作流设计-补充 系列目录 补充一下,有人要表单的代码,这个用代码生成器生成表Flow_Form表 ...

  8. 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(46)-工作流设计-设计分支

    原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(46)-工作流设计-设计分支 系列目录 步骤设置完毕之后,就要设置好流转了,比如财务申请大于50000元( ...

  9. 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(45)-工作流设计-设计步骤

    原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(45)-工作流设计-设计步骤 系列目录 步骤设计很重要,特别是规则的选择. 我这里分为几个规则 1.按自行 ...

随机推荐

  1. 洛谷 P3627 【抢掠计划】

    题库:洛谷 题号:3627 题目:抢掠计划 link:https://www.luogu.org/problem/P3627 思路 : 这道题是一道Tarjan + 最长路的题.首先,我们用Tarja ...

  2. django中使用事务以及接入支付宝支付功能

    之前一直想记录一下在项目中使用到的事务以及支付宝支付功能,自己一直犯懒没有完,趁今天有点兴致,在这记录一下. 商城项目必备的就是支付订单的功能,所以就会涉及到订单的保存以及支付接口的引入.先来看看订单 ...

  3. R语言基础入门

    请先安装好R和RStudio 如果不干别的,控制台就是一个内置计算器 2 * 3 #=> 6 sqrt(36) #=> 6, square root log10(100) #=> 2 ...

  4. Elasticsearch 顶尖高手(1)

    1.什么是搜索? 百度 = 搜索,这是不对的 垂直搜索(站内搜索) 互联网的搜索:电商网站,招聘网站,新闻网站,各种app IT系统的搜索:OA软件,办公自动化软件,会议管理,项目管理,员工管理 搜索 ...

  5. 关闭Linux(Ubuntu)错误报告

    关于错误报告 网上查了下,Ubuntu(包括elementary,elementary是基于Ubuntu的)桌面版预装了Apport,它是一个错误收集系统,会收集软件崩溃.未处理异常和其他,包括程序b ...

  6. js关系运算符的用法和区别

    var num = 1;   var str = '1';   var test = 1;   test == num   //true 相同类型 相同值   test === num  //true ...

  7. Redis的那些最常见面试问题(转)

    Redis的那些最常见面试问题         1.什么是redis? Redis 是一个基于内存的高性能key-value数据库. 2.Reids的特点 Redis本质上是一个Key-Value类型 ...

  8. Container容器crontab错误问题

    问题描述 容器中的cron定时计划任务不执行 问题分析 排查一:检查Container容器是否安装cron # rpm -qa | grep cron # ls /etc/init.d/ 若没有安装, ...

  9. 记一次oracle新建用户及分配指定表权限的操作记录

    1.登录 2.创建用户create user new用户名 identified by new用户名创建new用户名用户,密码设置为new用户名. 3.授权new用户名用户的连接.资源权限.grant ...

  10. Small Spring系列一:BeanFactory(一)

    人生如逆旅,我亦是行人. 前言 Spring是一个开放源代码的设计层面框架,它解决的是业务逻辑层和其他各层的松耦合问题,因此它将面向接口的编程思想贯穿整个系统应用. 准备 bean-v1.xml配置b ...