之前的项目也曾用过JgGrid对它的基本功能也是略有了解,网上有个国外的开源的项目,但是不适合个人的风格,所以花了3天空余的时间封装了下JqGrid,也算是参加开发工作10个月以来写的第一个比较完整的小例子,高手们就直接飘过不用看了,但是由于时间短,还有很多的不足,需要后期再完善。

整体思路就是一个配置类,同时兼容了链式编程的风格,所有的动作接口都以Set开头,便于识别。记录下来以后做个人的使用手册。

源码地址:https://github.com/halower/JqGridForMvc/

推荐写法:

链式编程风格

@(Html.JqGrid("testJqGrid2", new GridConfiguration
(
ColumnFactory.Create("Name","姓名").SetWidth("").SetEditable(ColumnEditType.Textarea).SetSearchable(SearchFiledType.String)
ColumnFactory.Create("Id", "编号").SetWidth("").SetEditable(ColumnEditType.Text).SetSearchable(SearchFiledType.Int)
ColumnFactory.Create("Skin", "肤色").SetWidth("").SetEditable(ColumnEditType.Textarea),
ColumnFactory.Create(null, "操作").SetWidth("").SetFormatter("customerFmatter")
)
)
.SetGroupHeaders(new GroupHeader("Name", , "<font style=\"color:red;\">详细内容</font>"))
.SetCaption("JqGrid测试").SetHeight("")
.SetUrl("/Home/GridData", new Dictionary<string, string> { { "name", "halower" } })
.SetSortName("Name").SetSortOrder(SortOrderType.Desc).SetLoadText("正在加载数据请骚等...")
.SetBuiltInOperation(GridOperatorType.Add | GridOperatorType.Edit | GridOperatorType.Delete | GridOperatorType.Search)
.SetPager("pageId2").SetRowList(new[] { , , , })
.SetSubGridModel(
ColumnFactory.Create("Name", "姓名").SetWidth(""),
ColumnFactory.Create("Language", "中文").SetWidth(""),
ColumnFactory.Create("Country", "国籍").SetWidth("")
)
.SetSubGridUrl("/Home/SubGridData").SetSubGridPostParams(new[] { "Name" })
.SetEditUrl("/Home/EditPerson").SetMultiselect()
)

配置类为主的混搭风格

 @(Html.JqGrid("testJqGrid", new GridConfiguration
{
GridColumns = new List<GridColumn>
{
ColumnFactory.Create("Id", "编号").SetWidth("").SetEditable(ColumnEditType.Text).SetSearchable(SearchFiledType.Int),
new GridColumn{DisplayName ="姓名",Field ="Name",Width ="",Editable = true,Search =true},
new GridColumn{DisplayName ="肤色",Field ="Skin",Width ="",Editable = true,Search =true,SearchFiledType =SearchFiledType.String},
ColumnFactory.Create(null, "操作").SetWidth("").SetFormatter("customerFmatter")
},
Caption = "JqGrid测试",
Height = "",
PagerId = "pageId",
SortName ="Name",
Sortorder = SortOrderType.Desc.ToString().ToLower(),
GridOperation = new GridOperation { Add =true,Delete =true,Edit =true,Search =true},
SetGroupHeaders=true,
ColSPanConfiguation=new ColSPanConfiguation{GroupHeaders =new[]{new GroupHeader("Name", , "<font style=\"color:red;\">详细内容</font>")}},
LoadText = "正在加载数据请骚等...",
RowList =new []{,,},
SubGridModel = new[]
{
new SubGridTable
(
ColumnFactory.Create("Name", "姓名").SetWidth(""),
ColumnFactory.Create("Language", "中文").SetWidth(""),
ColumnFactory.Create("Country", "国籍").SetWidth("")
)
},
Multiselect = true,
EditUrl = "/Home/EditPerson"
})
.SetUrl("/Home/GridData",null)
.SetSubGridUrl("/Home/SubGridData").SetSubGridPostParams(new[] { "Name" })
)

强类型方式

@(
g.JqGrid("testJqGrid").MainGrid(
g.GridColumn(x => x.Id, ),
g.GridColumn(x => x.Name, ),
g.GridColumn(x => x.Skin, ),
g.GridColumn("操作", null, "customerFmatter"))
.Caption("JqGrid测试").Height("")
.Url("/Home/GridData", new Dictionary<string, string> { { "name", "halower" } })
.SortName("Name").SortOrder(SortOrderType.Desc).LoadText("正在加载数据请骚等...")
.Pager("pageId")
.SubGrid(
g.GridColumn(x=>x.Name,),
g.GridColumn(x=>x.Language,),
g.GridColumn(x=>x.Country,)
)
.SubGridUrl("/Home/SubGridData").SubGridPostParams(new[] { "Name" })
)

后台代码实现了排序,查询,分页的全部托管,对增改查也实现了格式限制型的局部托管。

     //主表格
public ContentResult GridData(string name)
{
var list = new List<Person>();
for (var i = ; i < ; i++)
{
list.Add(new Person { Id = i + , Name = "测试" + (i + ), Skin = "Yellow" + i });
}
//支持EF分页排序
//var context=new PersonContext();
//context.Persons.Pagination(this);
       //context.Persons.Pagination(this,p=>p.id>15&&p.id<100);  
return Content(list.Pagination(this));
}
//子表格
public string SubGridData(string name)
{
var list = new List<Chinese>();
for (var i = ; i < ; i++)
{
list.Add(new Chinese { Id = i + , Language = "中文" + i, Name = "子表测试" + (i + ), Country = "中国" + i });
}
return list.PushSubGrid(this);
} //使用原生的Form提交
public JsonResult EditPerson(Person person, string id)
{
if (!ModelState.IsValidField("Id") && !string.IsNullOrEmpty(id))
          //批量删除
//return Json(id.DelegateBuildInOperation(Bussiness.DeleteInfo, this));
return Json(id.DelegateNotBuildInOperation(Bussiness.DeleteInfo));
var optDic = new Dictionary<OperTypes, Func<Person, bool>>
{
{OperTypes.Add, Bussiness.AddPerson},
{OperTypes.Edit, Bussiness.EditPerson},
{OperTypes.Delete, Bussiness.DeletePerson}
};
return Json(person.DelegateBuildInOperation(optDic, this));
} //自定义非原生提交
public JsonResult AddInfo(int id)
{
return Json(id.DelegateNotBuildInOperation(Bussiness.AddInfo));
}

调整下面的位置,自动进行列顺序【包含主表格和子表格】调整

效果如下:

需要什么JS代码,生成什么,其它采用默认配置

<script>$(function(){function _my97datePick(elem){jQuery(elem).datepicker({ dateFormat: 'yy-mm-dd' });};jQuery("#testJqGrid2").jqGrid({"url":"/Home/GridData","datatype":"json","colNames":["编号","姓名","肤色","时间","操作"],"colModel":[{"name":"Id","index":"Id","width":"300","align":"right","sortable":true,"hidden":false,"editable":true,"search":true,"stype":"text","sorttype":"int","edittype":"text","searchoptions":{sopt:['eq','lt','gt']}},{"name":"Name","index":"Name","width":"300","align":"right","sortable":true,"hidden":false,"editable":true,"search":true,"stype":"text","sorttype":"text","edittype":"textarea","searchoptions":{sopt:['eq','bw','cn']}},{"name":"Skin","index":"Skin","width":"300","align":"right","sortable":false,"hidden":false,"editable":true,"search":false,"edittype":"text","searchoptions":{sopt:['eq','bw','cn']}},{"name":"DateTime","index":"DateTime","width":"300","align":"right","sortable":false,"hidden":false,"editable":true,"search":true,"stype":"text","edittype":"text","searchoptions":{dataInit:_my97datePick,attr:{title:'选择日期'},sopt:['eq','lt','gt']}},{"width":"120","align":"right","sortable":false,"hidden":false,"editable":false,"search":false,"formatter":customerFmatter,"searchoptions":{sopt:['eq','bw','cn']}}],"rowNum":10,"rowList":[5,15,33,55],"pager":"#pageId2","sortname":"Name","mtype":"post","viewrecords":true,"ColSPanConfiguation":{"useColSpanStyle":true,"groupHeaders":[{"startColumnName":"Name","numberOfColumns":2,"titleText":"<font style=\"color:red;\">详细内容</font>"}]},"sortorder":"desc","caption":"JqGrid测试","loadtext":"正在加载数据请骚等...","pginput":false,"postData":{"name":"halower","DisplayFileds":"Id,Name,Skin,DateTime","GridKey":"Id"},"autowidth":true,"autoencode":false,"height":"250","multiselect":true,"editurl":"/Home/ChangePersonInfo","subGrid":true,"subGridModel":[{"name":["姓名","中文","国籍"],"width":["150","150","150"],"align":["right","right","right"],"params":["Name"]}],"subGridUrl":"/Home/SubGridData?DisplayFileds=Name,Language,Country","frozen":false});jQuery("#testJqGrid2").jqGrid('navGrid', '#pageId2',{"edit":true,"edittext":"编辑","add":true,"addtext":"添加","del":true,"deltext":"删除","search":true,"searchtext":"查找","refresh":false,"RefreshText":"刷新"},{checkOnSubmit:true,checkOnUpdate:true,closeAfterEdit:true,closeOnEscape:true},{checkOnSubmit:true, closeAfterAdd: true,recreateForm:true},{},{multipleSearch:true});jQuery("#testJqGrid2").jqGrid('setGroupHeaders',{"useColSpanStyle":true,"groupHeaders":[{"startColumnName":"Name","numberOfColumns":2,"titleText":"<font style=\"color:red;\">详细内容</font>"}]});})</script>

为什么要使用链式风格,使用接管代码?

1.采用链式风格主要考虑到JQ的风格,同时可以使代码结构和关联度清晰,同时保留配置类可以也让自己习惯传统风格的人自己配置

2.后台接管代码,主要目的是保持UI层的简洁,轻量级,强制使用者将业务转移到服务层/业务层去处理,防止合作者在Controller里搞一大堆业务代码。

表格接口方法说明

方法名称 参数类型 功能说明
SetGridKey string    设置表格标识列
SetPager string  设置启用分页,并设置分页控件Id
SetUrl string , Dictionary<string, string>  设置获取主表数据的地址
SetCaption string 设置表格名称
SetRowList                           int[]  设置显示下拉记录数
SetSortName string 设置默认的排序列。可以是列名称或者是一个数字,这个参数会被提交到后台
SetDirection DriectionType 设置表格中的书写方向
SetSortOrder SortOrderType 设置 从服务器读取XML或JSON数据时初始的排序类型
SetLoadText string 设置数据请求和排序时显示的文本
SetPgInput  bool  设置导航栏是否有页码输入框
SetAutoWidth  bool   设置自动宽度
SetAutoEencode  bool  设置为true时,对来自服务器的数据和提交数据进行encodes编码。如<![CDATA[<将被转换为&lt;]]>
SetDataType  ResponseDataType  设置表格希望获得的数据的类型
SetEmptyRecords string 设置当返回(或当前)数量为零时显示的信息此项只用当Setviewrecords 设置为true时才有效。
SetHeight string 设置表格高度。可为数值、百分比或auto
SetMultiselect bool 设置此属性设为true时启用多行选择,出现复选框
SetSubGridUrl string  设置子表数据请求Url
SetSubGridPostParams string[] 设置子表获取数据时所依赖父表字段
SetSubGridModel  GridColumn[] 设置子表格列配置
SetBuiltInOperation GridOperatorType 设置启用内置操作类型
SetGroupHeaders GroupHeader[]  设置表头分组
SetEditUrl string 设置内建编辑新增删除操作URL
SetMultipleSearch bool 设置高级搜索

列方法接口说明

方法名称 参数类型 功能说明
SetWidth string    设置列的初始宽度,可用pixels和百分比
SetHidden bool 定义初始化时,列是否隐藏
SetEditable ColumnEditType 定义定义字段是否可编辑
SetSearchable SearchFiledType 定义搜索
SetSearchable              SearchFiledType ,ColumnSearchType   定义搜索
SetSortable ColumnSortType 启用排序
SetFieldName string, string 设置字段映射名
SetFormatter string 自定义Formatter函数
SetUnformat string 自定义Unformat函数,在修改时需要获取原来的值
SetEditoptions string 设置编辑的一系列选项
SetEitrules string  设置编辑的一系列规则
SetFrozen bool 设置冻结列

其中对于自定义的多种验证等规则和选项涉及的参数,尚不是很清楚,Eitrules便暂时使用string作为参数在后面在做配置化处理。虽然很简单,不过快过年了,如果有感兴趣的,觉得还是费点体力的,可以联系halower@foxmail.com

五分钟搭建起一个包含CRUD功能的JqGrid表格的更多相关文章

  1. CRUD功能的JqGrid表格

    CRUD功能的JqGrid表格 之前的项目也曾用过JgGrid对它的基本功能也是略有了解,网上有个国外的开源的项目,但是不适合个人的风格,所以花了3天空余的时间封装了下JqGrid,也算是参加开发工作 ...

  2. 五分钟搭建一个基于BERT的NER模型

    BERT 简介 BERT是2018年google 提出来的预训练的语言模型,并且它打破很多NLP领域的任务记录,其提出在nlp的领域具有重要意义.预训练的(pre-train)的语言模型通过无监督的学 ...

  3. Docker五分钟搭建Wordpress

    当你看到这篇文章的时候,表明你已经有docker的基础知识了,或者可以看上一篇文章 Docker 入门教程. 传统的使用wordpress搭建网站,意味着你需要搭建以下四个环境: php: apach ...

  4. [原]五分钟搭建gitserver

    本来在忙一些事情,结果刚才突然收到一个临时的事情,号称很着急. 问了一下,原来是需要在本地搭建一个git库,但其实之前我是有做过gitserver的,不过是在阿里云(部分分布在青云)上,而且目前在使用 ...

  5. 五分钟搭建博客系统 OK?

    前言: 请各大网友尊重本人原创知识分享,谨记本人博客:南国以南i 概要: 通过 Docker Compose 在使用Docker容器构建的隔离环境中轻松运行 WordPress.在开始之前,请确保已安 ...

  6. 五分钟搭建 Flash 视频直播站

    想在家里对全世界直播网络视频节目吗?如今视频网站是多如牛毛,但能让你玩直播的估计没几个吧?看完这篇教程就能帮你实现网络主持人的梦想.不花钱,不懂编程,不用写代码也行哦~ 首先是最低机器要求:Windo ...

  7. Debian 上面五分钟搭建 WordPress - 博客/网站平台

    没有废话,步骤如下: 下载安装软件,MySQL Apache PHP sudo aptitude install mysql-server mysql-client ##安装 MySQLsudo ap ...

  8. 负载均衡LVS之DR(附:NFS共享存储) 五分钟搭建手册

    一:DR-模式 调度器Ip:192.168.1.254 服务器ip:192.168.1.1/192.168.1.2 VIP:192.168.1.10 ——配置负载均衡调度器: 关闭重定向响应配置: V ...

  9. 五分钟,手撸一个Spring容器!

    大家好,我是老三,Spring是我们最常用的开源框架,经过多年发展,Spring已经发展成枝繁叶茂的大树,让我们难以窥其全貌. 这节,我们回归Spring的本质,五分钟手撸一个Spring容器,揭开S ...

随机推荐

  1. Kinect之彩色图像数据

    彩色图像很有用,很有用!!说到图像识别,未来肯定是个大方向!在机器人视觉和一些智能识别在应用很广,而获取下来的数据再加上Opencv就能做出很多很好玩很有趣的功能.这个以后等我进一步成长后再回来慢慢记 ...

  2. C#技术漫谈之垃圾回收机制(GC)

    GC的前世与今生 虽然本文是以.NET作为目标来讲述GC,但是GC的概念并非才诞生不久.早在1958年,由鼎鼎大名的图林奖得主John McCarthy所实现的Lisp语言就已经提供了GC的功能,这是 ...

  3. nginx之location匹配优先级和安全问题

    最近一直在做location的配置,遇到优先级别问题(如有配置不当,会存在安全隐患),以下是个人的一些学习体会 一.location 匹配符 1.等于匹配符:      ##"=" ...

  4. 移动端Web开发调试之Chrome远程调试(Remote Debugging)

    比如手机钉钉调试页面,下面是一位同学整理的链接: http://blog.csdn.net/freshlover/article/details/42528643/ 如果inspect 后,一直空白, ...

  5. Web.xml详解(转)

    这篇文章主要是综合网上关于web.xml的一些介绍,希望对大家有所帮助,也欢迎大家一起讨论. ---题记 一.            Web.xml详解: (一)  web.xml加载过程(步骤) 首 ...

  6. Maven之构件

    定义 构件:在Maven中,任何依赖(jar包,tomcat等),或项目(自己打包的jar,war等)输出都可成为构件.每个构件都有自己的唯一标识(唯一坐标),由groupId,artifactId, ...

  7. C# Activator.CreateInstance()方法使用

    C#在类工厂中动态创建类的实例,所使用的方法为: 1. Activator.CreateInstance (Type) 2. Activator.CreateInstance (Type, Objec ...

  8. Intellij Idea/Webstorm/Phpstorm 版本控制忽略文件

    本地差异化配置,不需要提交,这时候需要在整个版本控制中忽略掉文件的提交. File -> Settings -> Version Control -> Ignored Files

  9. 如何将已部署在ASM的资源迁移到ARM中

    使用过Azure的读者都知道,Azure向客户提供了两个管理portal,一个是ASM,一个是ARM,虽然Azure官方没有宣布说淘汰ASM,两个portal可能会在很长的一段时间共存,但是考虑到AR ...

  10. 第三条:用私有构造器或者枚举类型强化Singleton属性

    1.使用单元素的枚举类型 public enum Singleton implements Serializable { INSTANCE; private String field; public ...