MVC+Jqgrid
基于MVC+Jqgrid的列表页面
2014-12-08 12:01 by 刘尼玛, 1583 阅读, 20 评论, 收藏, 编辑
一、前言
“尼玛哥,上周你教我改了下OA系统UI,黄总看了很满意呀。”
“不错不错,看来小美进步很大,可以提前结束试用期,到时候加工资别忘了请我吃饭呀!”
“尼玛哥,你有女朋友了吗?”
“小美,这样不好吧,虽然我很优秀,你也很不错,但是我不是因为对你有企图才教你写程序呀!当然你执意要这样的话,我也只好从了你啦。”
“尼玛哥,你老人家想多了,我只是想告诉你,像你这么小气还让女孩子请吃饭,能交到女朋友才怪。对啦,我们OA系统以前是.net WebForm的,里面的表格都是gridview的,MVC里我都没找到,这个怎么办呀?”
“嗯,gridview是个服务器控制,没办法直接在视图里面用,而且用服务器控件用户体验也不好,这次教你个新玩意儿,用jqgrid吧。jqgrid是个js开源的表格插件,轻量级,好控制,效果也很不错。给你看下官网和我在其它项目中的使用效果”
Jqgrid官网: http://www.trirand.com/blog/
“尼玛哥,搞什么鬼呀,本来很好看的界面,你打什么马塞克呀,你不知道马塞克严重影响到了人类的进步吗?”
“小美,不要在意这些细节,博客园是大家学习知识的地方,所以呢我把有关公司的一些东西打了点码。重点是在于和大家一起学技术,你看人家Teacher苍,哪部电影没打码,人家不照样红。”
二、Jqgrid在MVC中的使用
“尼玛哥,jqgrid是个js插件,要怎么样才以跟MVC结合起来使用呢?”
“小美,光说你可能不理解,我来举个栗子,教你做一项基础资料,做个‘部门管理’,然后一步步跟你来讲我是怎么把jqgrid插到你的MVC中去的。”
“用Jqgrid来展示数据其实很简单,引入这个插件以后,我们只需塞给它一个Json数据包,马上一个漂亮的数据列表就可以展现在我们面前。"
“尼玛哥,我昨天查了下MVC,它其实就是model、View、Control,model是实体,View是来显示数据的,Control主要控制前后台的交互;那这个Jqgrid插件应该就是放在View上的吧。”
“聪明,本来我还想着怎么来跟你解释下,你自己先预习了,不错呀,小美。好了,前戏来过了,我们正式开撸吧。”
“尼玛哥,Model我直接用代码生成器给生成了,然后我觉得控制器应该是从后台取到部门列表,然后转换成Json传给前台,代码仿照你上次教我写菜单Json那样写的,你看看可以不。”

/// <summary>
/// 部门管理控制器
/// </summary>
public class DepartmentController : PublicController<Base_Department>
{
Base_DepartmentBll base_departmentbll = new Base_DepartmentBll();
/// <summary>
/// 【部门管理】返回列表JONS
/// </summary>
/// <returns></returns>
public ActionResult GridListJson(JqGridParam jqgridparam)
{
DataTable ListData = base_departmentbll.GetList(ref jqgridparam);
return Content(ListData.ToJson());
}
} /// <summary>
/// 部门管理
/// <author>
/// <name>she</name>
/// <date>2014.08.07 12:34</date>
/// </author>
/// </summary>
public class Base_DepartmentBll : RepositoryFactory<Base_Department>
{
/// <summary>
/// 获取部门 列表
/// </summary>
/// <param name="jqgridparam"></param>
/// <returns></returns>
public DataTable GetList( ref JqGridParam jqgridparam)
{
StringBuilder strSql = new StringBuilder();
strSql.Append(@"SELECT *
FROM ( SELECT d.DepartmentId , --主键
c.FullName AS CompanyName , --所属公司
d.CompanyId , --所属公司Id
d.Code , --编码
d.FullName , --部门名称
d.ShortName , --部门简称
d.Nature , --部门性质
d.Manager , --负责人
d.Phone , --电话
d.Fax , --传真
d.Enabled , --有效
d.SortCode, --排序吗
d.Remark --说明
FROM Base_Department d
LEFT JOIN Base_Company c ON c.CompanyId = d.CompanyId
) T WHERE 1=1 ");
List<DbParameter> parameter = new List<DbParameter>();
return Repository().FindTablePageBySql(strSql.ToString(), parameter.ToArray(), ref jqgridparam);
return Repository().FindTableBySql(strSql.ToString(), parameter.ToArray());
}
}

“不错呀,学习能力很强,小美你这点很像我呀!”
“尼玛哥,那个GetList函数里有个 ref JqGridParam jqgridparam参数,我是照抄过来的,那个参数有什么用呢?”
“小美,你看下最后调的那个方法FindTablePageBySql,里面都有Page这单词,明显是分页用的。还有了,你现在也能看懂不少代码了,遇到这类公用方法别光知道调用,自己也F12跳进去看看,对你学开发很有帮助呀。”
“好了,View层的代码我来教你写,其实我也是从官方Demo那里学的。以后你也别光看日语电影了,欧美系列的也看看,以后就能看懂英文文档,对你提高技术有帮助的。”

@{
ViewBag.Title = "部门管理";
}
<!--框架必需start-->
<link href="~/Content/Styles/learunui-framework.css" rel="stylesheet" />
<script src="~/Content/Scripts/jquery/jquery-1.8.2.min.js"></script>
<script src="~/Content/Scripts/learunui-framework.js"></script>
<!--框架必需end-->
<!--jqgrid表格组件start-->
<script src="~/Content/Scripts/jqgrid/jquery-ui-custom.min.js"></script>
<script src="~/Content/Scripts/jqgrid/grid.locale-cn.js"></script>
<link href="~/Content/Scripts/jqgrid/css/jqgrid.css" rel="stylesheet" />
<script src="~/Content/Scripts/jqgrid/jqGrid.js"></script>
<!--表格组件end-->
<link href="~/Content/Scripts/tree/tree.css" rel="stylesheet" />
<script src="~/Content/Scripts/tree/tree.js"></script>
<script type="text/javascript">
$(document).ready(function () {
GetGrid("");
});
//加载表格
function GetGrid(CompanyId) {
$("#gridTable").jqGrid({
url: "/Department/GridListJson",
datatype: "json",
height: $(window).height() - 105,
autowidth: true,
colModel: [
{ label: '主键', name: 'departmentid', index: "departmentid", hidden: true },
{ label: '编码', name: 'code', index: "code", width: 80 },
{ label: '部门', name: 'fullname', index: "fullname", width: 100 },
{ label: '简称', name: 'shortname', index: "shortname", width: 100 },
{ label: '性质', name: 'nature', index: "nature", width: 100, align: "center" },
{ label: '负责人', name: 'manager', index: "manager", width: 80, align: "center" },
{ label: '电话', name: 'phone', index: "phone", width: 100, align: "center" },
{ label: '传真', name: 'fax', index: "fax", width: 100, align: "center" },
{ label: '所属公司', name: 'companyname', index: "companyname", width: 120 },
{
label: '有效', name: 'enabled', index: 'enabled', width: 45, align: 'center',
formatter: function (cellvalue, options, rowObject) {
if (cellvalue == '1') return "<img src='/Content/Images/checkokmark.gif'/>";
if (cellvalue == '0') return "<img src='/Content/Images/checknomark.gif'/>";
}
},
{ label: '说明', name: 'remark', index: "remark", width: 300 }
],
pager: "#gridPager",
sortname: 'SortCode',
sortorder: 'asc',
rownumbers: true,
shrinkToFit: false,
gridview: true,
});
}
</script>
<div id="layout" class="layout">
<div class="layoutPanel layout-center">
<div class="btnbartitle">
<div>
部门列表<span id="CenterTitle"></span>
</div>
</div>
<table id="gridTable"></table>
<div id="gridPager"></div>
</div>
</div>

“尼玛哥,你以前跟我讲前后台交互要用AV技术的,这边怎么就没看到Ajax调用的痕迹呢?”
“小美,你又傻了吧,你看羞羞小电影的时候难道还在办公室这种公司场所看,肯定是找个地方躲起来偷偷看,Jqgrid是个插件,它当然是封装了一下,你看那里有个URL参数,我把它指向你控制器里获取Json的Action,这样Jqgrid就能获得返回的Json了。”
“哦,原来是他们封装了东西,那gridPager这个分页的东西,肯定也是后台封装了东西,不然根本跟列表联系不上。”
“对,小美很聪明,这东西是开源的,有时间你也去看一下,对你以后用这插件也会有帮助的,源码还是放百度网盘的,你自己去下。”
源码下载地址:http://pan.baidu.com/s/1gdiVKJp
“尼玛哥,你给我的源码里怎么跟上面的图片有点不一样,左侧的公司树怎么不见了?工具栏也没有。”
“小美,我都跟你说了,一步步,慢慢来,你先把这个表格弄好了,下周再教你剩下的。
MVC+Jqgrid的更多相关文章
- asp.net mvc jqgrid 同一个页面查询不同的表,jqgrid显示不同表的表头和数据并且分页
基于我上一篇文章<a href="http://www.cnblogs.com/alasai/p/4765756.html">asp.net mvc excel导入&l ...
- 我和小美的撸码日记(2)之第一个基于MVC+Jqgrid的列表页面
一.前言 “尼玛哥,上周你教我改了下OA系统UI,黄总看了很满意呀.” “不错不错,看来小美进步很大,可以提前结束试用期,到时候加工资别忘了请我吃饭呀!” “尼玛哥,你有女朋友了吗?” “ ...
- 我和小美的撸码日记--基于MVC+Jqgrid的.Net快速开发框架
前言:以前的帐号没有发首页的权限,特此把这篇文章从另外一个博客移过来,这篇是<我和小美的撸码日记>的序 一转眼务农6年了,呆过大公司也去过小作坊,码农的人生除了抠腚还是抠腚.在所有呆过的公 ...
- asp.net mvc JQGrid
http://mikedormitorio.azurewebsites.net/BlogPost/jqgrid-series-part-1-loading-data-to-a-jqgrid-on-an ...
- MVC 数据列表显示插件大全
Jgrid 官网示例: http://www.trirand.net/demo/aspnet/mvc/jqgrid/ Code Project示例: http://www.codeproject.co ...
- JqGrid: Add,Edit,Del in asp.net
https://github.com/1rosehip/jplist https://github.com/free-jqgrid/jqGrid https://plugins.jquery.com/ ...
- [译]MVC网站教程(四):MVC4网站中集成jqGrid表格插件(系列完结)
目录 1. 介绍 2. 软件环境 3. 在运行示例代码之前(源代码 + 示例登陆帐号) 4. jqGrid和AJAX 5. GridSettings 6. ...
- Asp.Net MVC中使用ACE模板之Jqgrid
第一次看到ACE模板,有种感动,有种相见恨晚的感觉,于是迅速来研究.它本身是基于bootstrap和jqueryui,但更nice,整合之后为后台开发节省了大量时间. 发现虽然不是完美,整体效果还是不 ...
- ASP.NET MVC+EF在服务端分页使用jqGrid以及jquery Datatables的注意事项
引言: 本人想自己个博客网站出来,技术路线是用ASN.NET MVC5+EF6(Code First)+ZUI+各种Jquery插件,有了这个想法之后就开始选择UI,看了好多bootstrap的模板之 ...
随机推荐
- 物理卷操作命令:pvcreate,pvscan,pvdisplay.卷组操作命令:vgcreate,vgdisplay. (转)
新硬盘创建LVM系统过程. 物理卷操作命令:pvcreate,pvscan,pvdisplay. 卷组操作命令:vgcreate,vgdisplay. 逻辑卷操作命令:lvcreate,lvdispl ...
- 严格模式 (JavaScript)
严格模式是一种将更好的错误检查引入代码中的方法. 在使用严格模式时,您无法使用隐式声明的变量.将值赋给只读属性或将属性添加到不可扩展的对象. 〉声明严格模式 可以通过在文件.程序或函数的开头添加 &q ...
- hibernate 多对多 最佳实践
首先 看看我们 ER 画画 :盖 一对一 .一对多 .多对多 的关系 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvem91dG9uZ3l1YW4=/fo ...
- GDI+学习笔记(六)渐变画笔
刷,顾名思义,它是一样的刷.提请设备,还记得常唱歌曲,"我是一个画家.." 好吧.跑题了. 本系列博客希望尽可能简单的描写叙述每项功能,而不希望把每一个參数都介绍的详具体细,假设须 ...
- SQL Server 2008 R2 性能计数器详细列表(一)
原文:SQL Server 2008 R2 性能计数器详细列表(一) SQL Server Backup Device 计数器: 可监视用于备份和还原操作的 Microsoft SQL Server ...
- Python网络01 原始Python服务器
原文:Python网络01 原始Python服务器 作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! 之前我的Python教程中有人 ...
- Android 在非主线程无法操作UI意识
Android在应用显示Dialog是一个非常easy事儿,但我从来没有尝试过Service里面展示Dialog. 经验UI操作要在主线程,本地的服务Service是主线程里没错,可是远程servic ...
- Cache基础知识OR1200在ICache一个简短的引论
以下摘录<步骤吓得核心--软-core处理器的室内设计与分析>一本书 12.1 Cache基本知识 12.1.1 Cache的作用 处理器的设计者通常会声称其设计的处理器一秒钟能做多少次乘 ...
- AndroidUI组件之TabHost
package com.gc.tabhost; /** * @author Android将军 * * * * 1.TabHost是一种非常有用的组件,TabHost能够非常方便地在窗体上放置 * 多 ...
- Google大数据三篇著名论文----中文版
Google File System中文版 Google Bigtable中文版 Google MapReduce中文版