五分鐘搭建起一個包含CRUD功能的JqGrid表格

2019-11-14 16:10:40

字體：大中小

來源：轉載

供稿：網友

之前的項目也曾用過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 )

強類型方式

@( 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	設置凍結列