五分钟搭建起一个包含CRUD功能的JqGrid表格

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

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