FlexiGrid+Mvc3示例(一)
在ＷＥＢ前端开发中，用到比较多的Ｇrid插件，主要有FlexiGrid和JqGrid两大插件。这里，我想介绍一下FlexiGrid.
首先我想介绍一下的是FlexiGrid的原理理论的知识。
从FlexiGrid官方文档来看，他主要能够将ＪＳＯＮ和ＸＭＬ格式的数据转换成Grid的能力，这里我们主要讲解ＪＳＯＮ方式。
FlexiGrid对于ＪＳＯＮ格式，是有自身的一个格式规范的。一般是这样：
{page:1,total:2,rows:[{Id:'c0509d34-e860-4698-91e5-210fab32dc2f',cell:['c0509d34-e860-4698-91e5-210fab32dc2f','True','4','31@qq.com']}
,{Id:'c0509d34-e860-4698-91e5-210fab32dc3f',cell:['c0509d34-e860-4698-91e5-210fab32dc3f','False','4','32@qq.com']}]}
从格式上来看，我们传输的ＪＳＯＮ主要有三个值，page,total,rows.其中page表示当前返回的页码，total表示数据的总条数，rows里面嵌套的是行对象。
我们对于ＪＳＯＮ的组装也主要是体现在rows这个节点上，rows可以包括众多的子对象，每个子对象为Table中的一行，或者理解为数据中的某一个实体。
每一个Rows子对象包含２个子节点：Id和cell,Id表示当前数据行的Id，cell表示在前端需要展示的数据的值，其顺序与前端代码的显示顺序一一对应。
下面我把组装Flexigrid格式的Json方法贴上：
/// <summary> /// 将list转换成FlexiGrid约定格式的Json /// </summary> /// <typeparam name="T"></typeparam> /// <param name="obj"></param> /// <param name="page">当前页数</param> /// <param name="total">总量</param> /// <returns></returns> public static string GetFlexiGridJson<T>(List<T> obj, int page, int total) { string json = "page:{0},total:{1},rows:[{2}]"; StringBuilder value = new StringBuilder(); PropertyInfo[] propinfos = null; foreach (var i in obj) { StringBuilder input = new StringBuilder(); if (propinfos == null) { propinfos = i.GetType().GetProperties(); } foreach (PropertyInfo j in propinfos) { if (j.Name.ToLower() == "id") { input.AppendFormat("{0}:'{1}',cell:[", j.Name, j.GetValue(i, null)); } input.AppendFormat("'{0}',", j.GetValue(i, null)); } input.Remove(input.Length - 1, 1); input.AppendFormat("]"); value.AppendFormat("{0},", "{" + input.ToString() + "}"); } value.Remove(value.Length - 1, 1); json = "{" + string.Format(json, page, total, value) + "}"; return json; }
FlexiGrid的数据交互最重要的就是其ＪＳＯＮ格式的组装。
下面贴上关于FlexiGrid的参数说明：
height: 200, //flexigrid插件的高度，单位为px width: 'auto', //宽度值，auto表示根据每列的宽度自动计算，在IE6下建议设置具体值否则会有问题 striped: true, //是否显示斑纹效果，默认是奇偶交互的形式 novstripe: false,//没用过这个属性 minwidth: 30, //列的最小宽度 minheight: 80, //列的最小高度 resizable: false, //resizable table是否可伸缩 url: false, //ajax url,ajax方式对应的url地址 method: 'POST', // data sending method,数据发送方式 dataType: 'json', // type of data loaded,数据加载的类型，xml,json errormsg: '发生错误', //错误提升信息 usepager: false, //是否分页 nowrap: true, //是否不换行 page: 1, //current page,默认当前页 total: 1, //total pages,总页面数 useRp: true, //use the results per page select box,是否可以动态设置每页显示的结果数 rp: 25, // results per page,每页默认的结果数 rpOptions: [10, 15, 20, 25, 40, 100], //可选择设定的每页结果数 title: false, //是否包含标题 pagestat: '显示记录从{from}到{to}，总数 {total} 条', //显示当前页和总页面的样式 procmsg: '正在处理数据，请稍候 ...', //正在处理的提示信息 query: '', //搜索查询的条件 qtype: '', //搜索查询的类别 qop: "Eq", //搜索的操作符 nomsg: '没有符合条件的记录存在', //无结果的提示信息 minColToggle: 1, //允许显示的最小列数 showToggleBtn: true, //是否允许显示隐藏列，该属性有bug设置成false点击头脚本报错。 hideOnSubmit: true, //是否在回调时显示遮盖 showTableToggleBtn: false, //是否显示【显示隐藏Grid】的按钮 autoload: true, //自动加载，即第一次发起ajax请求 blockOpacity: 0.5, //透明度设置 onToggleCol: false, //当在行之间转换时，可在此方法中重写默认实现，基本无用 onChangeSort: false, //当改变排序时，可在此方法中重写默认实现，自行实现客户端排序 onSuccess: false, //成功后执行 onSubmit: false, // 调用自定义的计算函数，基本没用 //Style gridClass: "bbit-grid"//样式 }, p); ---------------------------------------------------------------------------------------------- 2、支持ajax跨域： url中加callback=? 后台获得callback函数的名字 返回json数据格式为:print(callbackName+"("+jsonString+")"); ---------------------------------------------------------------------------------------------- 3、Flexigrid(HUGO.CM修改版v1.1)使用说明: 1、加载flexigrid。p：选项参数集合 $(“”).flexigrid(p); 2、重新加载数据。 $(“”).flexReload(p); 3、更改flexigrid参数。P：选项参数集合 $(“”).flexOptions (p); 4、隐藏/显示列。cid：列索引，visible：bool $(“”).flexToggleCol (cid, visible); 5、绑定数据。Data：数据源 $(“”).flexAddData (data); 6、no select plugin by me 。不知道做什么用的 $(“”).noSelect (p); 7、重新指定宽度和高度。 $(“”).flexResize(w,h); 8、翻页。type：first、prev、next、last、input $(“”).changePage(type); ---------------------------------------------------------------------------------------------- 4、Flexigrid——colModel: 属性名 类型 描述 display string 显示的列名 name string 绑定的列名 sortable bool 是否可以排序 align string 对其方式 width int 列的宽度 hide bool 是否隐藏该列 pk bool 是否为主键标识、如果是则隐藏该列，值存入隐藏域中 process function customValue function 自定义显示值。(如性别：数据库为Bit类型，通过customValue方法返回“男/女”)参数：value,i ---------------------------------------------------------------------------------------------- 5、Flexigrid——事件 事件名 参数 描述 返回值 onDragCol dcoln,dcolt 拖动列后触发 无 onToggleCol cid,visible 隐藏/显示列后触发 无 onChangeSort sortname,sortorder 自定义排序事件 无 onChangePage newp 自定义翻页事件 无 onSuccess 无 数据获取成功时触发 无 onError XMLHttpRequest,textStatus,errorThrown 出现错误时触发 无 onSubmit 无 在获取数据前时触发 bool onRowSelect this 行选中事件 无 ---------------------------------------------------------------------------------------------- 6、Flexigrid——buttons 属性名 类型 描述 name string 按钮名称 bgclass string 样式 onpress function 点击触发的方法 separator bool 分割线 ---------------------------------------------------------------------------------------------- 7、Flexigrid——searchitems 属性名 类型 描述 display string 搜索类型下拉列表框：显示的列名 name string 搜索类型下拉列表框：绑定的列名 isdefault bool 是否为默认搜索类型 //注：如果searchitems：true，则自动根据所有字段生成下拉列表框
示例：
1:在html中引用Jquery,FlexiGrid以及css：
<link href="@Url.Content("~/Scripts/Assets/FlexiGrid(1.8.3JQ)/css/flexigrid.pack.css")" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script src="@Url.Content("~/Scripts/Assets/FlexiGrid(1.8.3JQ)/flexigrid.js")" type="text/javascript"></script>
2:配置FlexiGrid(以下参数配置请参加博客的参数列表)
<script type="text/javascript"> $(document).ready(function () { $("#TbInvitationCode").flexigrid({ url: "MembershipManager/GetInvitationCode?UseState=3&r=" + Date().toLocaleString(), dataType: "json", height: "auto", width: "auto", usepager: true, title: "邀请码", showtogglebtn: true, userp: true, rp: 20, sortder: "asc", sortname: "iso", pagestat: '显示记录从{from}到{to}，总数 {total} 条', nomsg: '没有符合条件的记录存在', errormsg: '运行错误', hideOnSubmit: true, colModel: [ { display: 'ID', name: 'id', sortable: true, align: 'center' }, { display: '授权邮箱', name: 'Email', sortable: true, align: 'center' }, { display: '发送日期', name: 'CreateDate', sortable: true, align: 'center' }, { display: '注册日期', name: 'ActivationDate', sortable: true, align: 'center' }, ], buttons: [{ name: 'Add', bclass: 'add', onpress: undefined }, { name: 'Delete', bclass: 'delete', onpress: undefined }, { separator: true}], searchitems: [{ display: '授权邮箱', name: 'Email' }, { display: 'Name', name: 'name', isdefault: true}] }); }); </script>
如上配置：
colModel负责显示数据，其顺序对应JSON中Rows子对象的顺序，display表示显示的列名，sortable表示此列具备排序功能，hide表示此列是否显示(true/false)，align表示字符对齐方式。
3:Ｃ# Json输出Action
public class MembershipManagerController : Controller { // // GET: /MembershipManager/ public ActionResult Index() { return View(); } public ActionResult SendInvitationCode() { return View(); } public string GetInvitationCode() { int id = Convert.ToInt32(User.Identity.Name); int page = Convert.ToInt32(InputOperation.GetUriRequest("page")); UseState state = (UseState)Convert.ToInt32(InputOperation.GetUriRequest("UseState")); IInvitationCodeRepository Repository = ObjectContainerFactory.ObjectContainer.Resolve<IInvitationCodeRepository>(); FlexiGridPager F = new FlexiGridPager(id,state); var list = Repository.GetInvitationCode(F); string json = JsonHelper.GetFlexiGridJson<InvitationCode>(list, page, list.Count); return json; } }
public class JsonHelper { /// <summary> /// 将list转换成FlexiGrid约定格式的Json /// </summary> /// <typeparam name="T"></typeparam> /// <param name="obj"></param> /// <param name="page">当前页数</param> /// <param name="total">总量</param> /// <returns></returns> public static string GetFlexiGridJson<T>(List<T> obj, int page, int total) { string json = "page:{0},total:{1},rows:[{2}]"; StringBuilder value = new StringBuilder(); PropertyInfo[] propinfos = null; foreach (var i in obj) { StringBuilder input = new StringBuilder(); if (propinfos == null) { propinfos = i.GetType().GetProperties(); } foreach (PropertyInfo j in propinfos) { if (j.Name.ToLower() == "id") { input.AppendFormat("{0}:'{1}',cell:[", j.Name, j.GetValue(i, null)); } input.AppendFormat("'{0}',", j.GetValue(i, null)); } input.Remove(input.Length - 1, 1); input.AppendFormat("]"); value.AppendFormat("{0},", "{" + input.ToString() + "}"); } value.Remove(value.Length - 1, 1); json = "{" + string.Format(json, page, total, value) + "}"; return json; }
4:经过以上代码，可以将ＪＳＯＮ字符串发送到客户端，但笔者发现，Flexigrid对于ＪＳＯＮ数据获取时的ＡＪＡＸ方法的Success事件并不能接收到ＪＳＯＮ字符串，所以理改Flexigrid插件如下：
$.ajax({ type: p.method, url: p.url, data: param, dataType: "html",//原为p.datatype success: function (data) { data = eval("(" + data + ")");//笔者增加 g.addData(data); }, error: function (XMLHttpRequest, textStatus, errorThrown) { try { if (p.onError) p.onError(XMLHttpRequest, textStatus, errorThrown); } catch (e) {} } });
最终效果：
因为案例导出不易，所以未能添加实际案例下载，请见谅。若有疑问请联系。
更多WEB开发技术请加群：Asp.Net高级群 号码：261882616 博主以及同事和你共同探讨感兴趣的话题。
