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

時間  2019-11-06
標籤 五分 5分 搭建 一個 包含 crud 功能 jqgrid 表格 欄目 網站開發 简体版
原文   原文鏈接

以前的項目也曾用過JgGrid對它的基本功能也是略有了解，網上有個國外的開源的項目，可是不適合我的的風格，因此花了3天空餘的時間封裝了下JqGrid，也算是參加開發工做10個月以來寫的第一個比較完整的小例子，高手們就直接飄過不用看了，可是因爲時間短，還有不少的不足，須要後期再完善。git

總體思路就是一個配置類，同時兼容了鏈式編程的風格，全部的動做接口都以Set開頭，便於識別。記錄下來之後作我的的使用手冊。github

    源碼地址:https://github.com/halower/JqGridForMvc/web

 

推薦寫法：編程

鏈式編程風格

@(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));
        }

調整下面的位置，自動進行列順序【包含主表格和子表格】調整json

效果以下：服務器

須要什麼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的風格，同時可使代碼結構和關聯度清晰，同時保留配置類能夠也讓本身習慣傳統風格的人本身配置post

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.comui

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程