|
之前的项目也曾用过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); 调整下面的位置，自动进行列顺序【包含主表格和子表格】调整
效果如下：
需要什么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>
表格接口方法说明
列方法接口说明
|
|
|
