CRUD功能的JqGrid表格
CRUD功能的JqGrid表格
之前的项目也曾用过JgGrid对它的基本功能也是略有了解,网上有个国外的开源的项目,但是不适合个人的风格,所以花了3天空余的时间封装了下JqGrid,也算是参加开发工作10个月以来写的第一个比较完整的小例子,高手们就直接飘过不用看了,但是由于时间短,还有很多的不足,需要后期再完善。
整体思路就是一个配置类,同时兼容了链式编程的风格,所有的动作接口都以Set开头,便于识别记。录下来以后做个人的使用手册。
链式编程风格
@(Html.JqGrid("testJqGrid2", new GridConfiguration
(
ColumnFactory.Create("Name","姓名").SetWidth("300").SetEditable(ColumnEditType.Textarea).SetSearchable(SearchFiledType.String)
ColumnFactory.Create("Id", "编号").SetWidth("300").SetEditable(ColumnEditType.Text).SetSearchable(SearchFiledType.Int)
ColumnFactory.Create("Skin", "肤色").SetWidth("300").SetEditable(ColumnEditType.Textarea),
ColumnFactory.Create(null, "操作").SetWidth("100").SetFormatter("customerFmatter")
)
)
.SetGroupHeaders(new GroupHeader("Name", 2, "<font style=\"color:red;\">详细内容</font>"))
.SetCaption("JqGrid测试").SetHeight("250")
.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[] { 5, 15, 33,55 })
.SetSubGridModel(
ColumnFactory.Create("Name", "姓名").SetWidth("150"),
ColumnFactory.Create("Language", "中文").SetWidth("150"),
ColumnFactory.Create("Country", "国籍").SetWidth("150")
)
.SetSubGridUrl("/Home/SubGridData").SetSubGridPostParams(new[] { "Name" })
.SetEditUrl("/Home/EditPerson").SetMultiselect()
)
配置类为主的混搭风格
1 @(Html.JqGrid("testJqGrid", new GridConfiguration
2 {
3 GridColumns = new List<GridColumn>
4 {
5 ColumnFactory.Create("Id", "编号").SetWidth("300").SetEditable(ColumnEditType.Text).SetSearchable(SearchFiledType.Int),
6 new GridColumn{DisplayName ="姓名",Field ="Name",Width ="300",Editable = true,Search =true},
7 new GridColumn{DisplayName ="肤色",Field ="Skin",Width ="300",Editable = true,Search =true,SearchFiledType =SearchFiledType.String},
8 ColumnFactory.Create(null, "操作").SetWidth("100").SetFormatter("customerFmatter")
9 },
10 Caption = "JqGrid测试",
11 Height = "250",
12 PagerId = "pageId",
13 SortName ="Name",
14 Sortorder = SortOrderType.Desc.ToString().ToLower(),
15 GridOperation = new GridOperation { Add =true,Delete =true,Edit =true,Search =true},
16 SetGroupHeaders=true,
17 ColSPanConfiguation=new ColSPanConfiguation{GroupHeaders =new[]{new GroupHeader("Name", 2, "<font style=\"color:red;\">详细内容</font>")}},
18 LoadText = "正在加载数据请骚等...",
19 RowList =new []{11,15,20},
20 SubGridModel = new[]
21 {
22 new SubGridTable
23 (
24 ColumnFactory.Create("Name", "姓名").SetWidth("150"),
25 ColumnFactory.Create("Language", "中文").SetWidth("150"),
26 ColumnFactory.Create("Country", "国籍").SetWidth("150")
27 )
28 },
29 Multiselect = true,
30 EditUrl = "/Home/EditPerson"
31 })
32 .SetUrl("/Home/GridData",null)
33 .SetSubGridUrl("/Home/SubGridData").SetSubGridPostParams(new[] { "Name" })
34 )
后台代码实现了排序,查询,分页的全部托管,对增改查也实现了格式限制型的局部托管。
//主表格
public ContentResult GridData(string name)
{
var list = new List<Person>();
for (var i = 0; i < 300000; i++)
{
list.Add(new Person { Id = i + 1, Name = "测试" + (i + 1), 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 = 0; i < 5; i++)
{
list.Add(new Chinese { Id = i + 1, Language = "中文" + i, Name = "子表测试" + (i + 1), 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));
}
调整下面的位置,自动进行列顺序【包含主表格和子表格】调整
效果如下:
为什么要使用链式风格,使用接管代码?
1.采用链式风格主要考虑到JQ的风格,同时可以使代码结构和关联度清晰,同时保留配置类可以也让自己习惯传统风格的人自己配置
2.后台接管代码,主要目的是保持UI层的简洁,保持UI层的轻量级,强制使用者将业务转移到服务层去处理。
表格接口方法说明
方法名称 | 参数类型 | 功能说明 |
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[<将被转换为<]]> |
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 | 设置编辑的一系列规则 |
Frozen | bool | 设置冻结列 |
其中对于自定义的多种验证等规则和选项涉及的参数,尚不是很清楚,Eitrules便暂时使用string作为参数在后面在做配置化处理。虽然很简单,不过快过年了,如果有感兴趣的,觉得还是费点体力的,可以考虑赞助我点红包的,联系halower@foxmail.com
CRUD功能的JqGrid表格的更多相关文章
- 五分钟搭建起一个包含CRUD功能的JqGrid表格
之前的项目也曾用过JgGrid对它的基本功能也是略有了解,网上有个国外的开源的项目,但是不适合个人的风格,所以花了3天空余的时间封装了下JqGrid,也算是参加开发工作10个月以来写的第一个比较完整的 ...
- [译]MVC网站教程(四):MVC4网站中集成jqGrid表格插件(系列完结)
目录 1. 介绍 2. 软件环境 3. 在运行示例代码之前(源代码 + 示例登陆帐号) 4. jqGrid和AJAX 5. GridSettings 6. ...
- [渣译文] 使用 MVC 5 的 EF6 Code First 入门 系列:实现基本的CRUD功能
英文渣水平,大伙凑合着看吧…… 这是微软官方SignalR 2.0教程Getting Started with Entity Framework 6 Code First using MVC 5 系列 ...
- MongoDB学习笔记(三) 在MVC模式下通过Jqgrid表格操作MongoDB数据
看到下图,是通过Jqgrid实现表格数据的基本增删查改的操作.表格数据增删改是一般企业应用系统开发的常见功能,不过不同的是这个表格数据来源是非关系型的数据库MongoDB.nosql虽然概念新颖,但是 ...
- 实现基本的CRUD功能
文] 使用 MVC 5 的 EF6 Code First 入门 系列:实现基本的CRUD功能 2014-04-28 16:29 by Bce, 428 阅读, 0 评论, 收藏, 编辑 英文渣水平,大 ...
- MVC5 Entity Framework学习之实现主要的CRUD功能
在上一篇文章中,我们使用Entity Framework 和SQL Server LocalDB创建了一个MVC应用程序,并使用它来存储和显示数据.在这篇文章中,你将对由 MVC框架自己主动创建的CR ...
- 在MVC模式下通过Jqgrid表格操作MongoDB数据
看到下图,是通过Jqgrid实现表格数据的基本增删查改的操作.表格数据增删改是一般企业应用系统开发的常见功能,不过不同的是这个表格数据来源是非关系型的数据库MongoDB.nosql虽然概念新颖,但是 ...
- MVC中使用EF(2):实现基本的CRUD功能
MVC中使用EF(2):实现基本的CRUD功能 By Tom Dykstra |July 30, 2013 Translated by litdwg Contoso University示例网站 ...
- 基于SSM之Mybatis接口实现增删改查(CRUD)功能
国庆已过,要安心的学习了. SSM框架以前做过基本的了解,相比于ssh它更为优秀. 现基于JAVA应用程序用Mybatis接口简单的实现CRUD功能: 基本结构: (PS:其实这个就是用的Mapper ...
随机推荐
- ubuntu 下舒畅的使用libreoffice
step 1 英语渣的同学.或者对功能栏的一大堆略显专业的单词不敢下手的同学 你须要一个中文汉化包 不用去官网找了,源里就有 sudo apt-get install libreoffice-l10n ...
- ORA-01791: not a SELECTed expression 一种是不 bug 的 bug!
[ora11@lixora ~]$ !sql sqlplus / as sysdba SQL*Plus: Release 11.2.0.1.0 Production on Wed Aug 27 09: ...
- div+js 弹出层
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...
- sql推断时间
SELECT * FROM msg_personchat_t WHERE send_userid='28' AND critime>'2014-03-30' AND critime<'20 ...
- WPF学习(6)路由事件
做过.net开发的朋友对于事件应该都不陌生.追溯历史,事件(Event)首先应用在Com和VB上,它是对在MFC中使用的烦琐的消息机制的一个封装,然后.net又继承了这种事件驱动机制,这种事件也叫.n ...
- Java高效读取大文件(转)
1.概述 本教程将演示如何用Java高效地读取大文件.这篇文章是Baeldung(http://www.baeldung.com/) 上“Java——回归基础”系列教程的一部分. 2.在内存中读取 读 ...
- python基础课程_学习笔记13:标准库:有些收藏夹——sys
标准库:有些收藏夹 sys sys这个模块可以让你访问和python解释器联系紧密的变量和函数. sys模块中一些重要的函数和变量 函数/变量 描写叙述 argv 命令行參数,包含脚本名称 exit( ...
- HDU 2120 Ice_cream's world I(并检查集合)
职务地址:HDU 2120 这题尽管字数不多,但就是看不懂. . 意思是求最多有多少个被墙围起来的区域.显然就是求环的个数.然后用并查集求环个数就能够了. 代码例如以下: #include <i ...
- jQuery表格排序总成-tablesorter
一个.进口单证 <script type="text/javascript" src="js/jquery.js"></script> ...
- Python - 缩写(capwords) 和 创建转换表(maketrans) 详细说明
缩写(capwords) 和 创建转换表(maketrans) 详细说明 本文地址: http://blog.csdn.net/caroline_wendy/article/details/27051 ...