之前的項目也曾用過JgGrid對它的基本功能也是略有了解，網上有個國外的開源的項目，但是不適合個人的風格，所以花了3天空余的時間封裝了下JqGrid，也算是參加開發工作10個月以來寫的第一個比較完整的小例子，高手們就直接飄過不用看了，但是由於時間短，還有很多的不足，需要后期再完善。
整體思路就是一個配置類，同時兼容了鏈式編程的風格，所有的動作接口都以Set開頭，便於識別。記錄下來以后做個人的使用手冊。
源碼地址:https://github.com/halower/JqGridForMvc/
推薦寫法：
鏈式編程風格
@(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 )
強類型方式
@( g.JqGrid("testJqGrid").MainGrid( g.GridColumn(x => x.Id, 300), g.GridColumn(x => x.Name, 300), g.GridColumn(x => x.Skin, 300), g.GridColumn("操作", null, "customerFmatter")) .Caption("JqGrid測試").Height("250") .Url("/Home/GridData", new Dictionary<string, string> { { "name", "halower" } }) .SortName("Name").SortOrder(SortOrderType.Desc).LoadText("正在加載數據請騷等...") .Pager("pageId") .SubGrid( g.GridColumn(x=>x.Name,300), g.GridColumn(x=>x.Language,300), g.GridColumn(x=>x.Country,300) ) .SubGridUrl("/Home/SubGridData").SubGridPostParams(new[] { "Name" }) )
后台代碼實現了排序，查詢，分頁的全部托管，對增改查也實現了格式限制型的局部托管。
//主表格 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)); }
調整下面的位置，自動進行列順序【包含主表格和子表格】調整
效果如下：
需要什么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[<將被轉換為<]]> |
| 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