基于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的更多相关文章

  1. asp.net mvc jqgrid 同一个页面查询不同的表,jqgrid显示不同表的表头和数据并且分页

    基于我上一篇文章<a href="http://www.cnblogs.com/alasai/p/4765756.html">asp.net mvc excel导入&l ...

  2. 我和小美的撸码日记(2)之第一个基于MVC+Jqgrid的列表页面

    一.前言 “尼玛哥,上周你教我改了下OA系统UI,黄总看了很满意呀.”    “不错不错,看来小美进步很大,可以提前结束试用期,到时候加工资别忘了请我吃饭呀!”    “尼玛哥,你有女朋友了吗?” “ ...

  3. 我和小美的撸码日记--基于MVC+Jqgrid的.Net快速开发框架

    前言:以前的帐号没有发首页的权限,特此把这篇文章从另外一个博客移过来,这篇是<我和小美的撸码日记>的序 一转眼务农6年了,呆过大公司也去过小作坊,码农的人生除了抠腚还是抠腚.在所有呆过的公 ...

  4. asp.net mvc JQGrid

    http://mikedormitorio.azurewebsites.net/BlogPost/jqgrid-series-part-1-loading-data-to-a-jqgrid-on-an ...

  5. MVC 数据列表显示插件大全

    Jgrid 官网示例: http://www.trirand.net/demo/aspnet/mvc/jqgrid/ Code Project示例: http://www.codeproject.co ...

  6. JqGrid: Add,Edit,Del in asp.net

    https://github.com/1rosehip/jplist https://github.com/free-jqgrid/jqGrid https://plugins.jquery.com/ ...

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

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

  8. Asp.Net MVC中使用ACE模板之Jqgrid

    第一次看到ACE模板,有种感动,有种相见恨晚的感觉,于是迅速来研究.它本身是基于bootstrap和jqueryui,但更nice,整合之后为后台开发节省了大量时间. 发现虽然不是完美,整体效果还是不 ...

  9. ASP.NET MVC+EF在服务端分页使用jqGrid以及jquery Datatables的注意事项

    引言: 本人想自己个博客网站出来,技术路线是用ASN.NET MVC5+EF6(Code First)+ZUI+各种Jquery插件,有了这个想法之后就开始选择UI,看了好多bootstrap的模板之 ...

随机推荐

  1. 自己的自定义单元格(IOS)

    定义自己的单位格有三种方法 - 代码 - xib - storyboard(推荐) 操作方法故事板 1.在TableView财产Prototype Cells至1.莫感觉1: 2.须要创建自己定义的单 ...

  2. html不常见问题汇总

    写html已经好长一段时间了,也遇到了不少问题,跟大家分享下 form是不可以嵌套的 说明:如果嵌套会有很多问题 但是可以并列 <html> <head> </head& ...

  3. css Tab选项卡2

    注意上述 红色方框   这个是锚点的变相  以及overflow:hiden结合, 利用  锚点对应 id  ,  也可以实现. 兼容ie6+  适合手机tab 简单   不需要脚本 其实还可以利用 ...

  4. spring+websocket综合(springMVC+spring+MyBatis这是SSM框架和websocket集成技术)

    java-websocket该建筑是easy.儿童无用的框架可以在这里下载主线和个人教学好java-websocket计划: Apach Tomcat 8.0.3+MyEclipse+maven+JD ...

  5. hdoj 1506&amp;&amp;1505(City Game) dp

    // l表示从l[i]到i连续大于a[i]的最远左区间.r表示从i到r[i]连续大于a[i]的最远又区间 DP 找出 a[i] 的最远左区间和最远右区间与自己连着的比自己大的数的长度 , 然后用这个长 ...

  6. TortoiseGit push失败原因小结(转)

    花了我一个晚上,终于弄明白为什么总是 push 失败的原因了!竟然是因为我用的是注册的用户名而不是邮箱名……囧死. 另外搞清楚了一个问题,就是 Git 和远程仓库交互有两种方式,即 https 方式和 ...

  7. Android ADT Bundle(Eclipse with ADT) ADT R23

    ADT Bundle Platform Package Size MD5 Checksum Windows 32-bit adt-bundle-windows-x86-20140624.zip 377 ...

  8. freemarker定义自己的标记(三)-nested说明

    freemarker定义自己的标记 1.nested指令 是可选的,能够在<#macro>和</#macro>之间使用在不论什么位置和随意次数 2.演示样例说明 <#ma ...

  9. js isArray小结

    原文:[转载]js isArray小结 在日常开发中,我们经常需要判断某个对象是否是数组类型的,在js中检测对象类型的常见的方法有几种: 1.typeof操作符.对于Function.String.N ...

  10. XSS学习笔记(五)-XSS防御

    如果只生产XSS的地方都与输入或输出相关联的.所以错过了主要矛盾.而且,我们将有一个解决问题的办法:您可以输入端砚格过滤,是可能的过滤输出时间,输出到用户的GET或POST中是否有敏感字符: 输入过滤 ...