FlexGrid简单demo
1.首先加入以下代码
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <link rel="stylesheet" type="text/css" href="flexigrid-1.1/css/flexigrid.pack.css" /> <script type="text/javascript" src="flexigrid-1.1/js/JQuery.1.5.2.min.js"></script> <script type="text/javascript" src="/flexgrid/flexigrid-1.1/js/flexigrid.js"></script> <title></title> <script> $().ready(function () { $("#flex1").flexigrid({ url: '/flexgrid/json.ashx', dataType: 'json', colModel: [ { display: '任务编号', name: 'Unid', sortable: true, width: 40, align: 'center' }, { display: '第一列', name: 'CustomerName', width: 180, align: 'left' }, { display: '第二列', name: 'Memo', width: 120, align: 'left' }, { display: '第二列', name: 'Memo', width: 120, align: 'left' }, ], sortname: "Unid", sortorder: "asc", usepager: true, title: 'One Demo', useRp: true, rp: 10, width: 'auto', height: 255, query:"a=1&b=2" }) }); </script> </head> <body> <form id="form1" runat="server"> <div> <table id="flex1" style=""> </table> </div> </form> </body> </html>
2.json.ashx代码如下
<%@ WebHandler Language="C#" Class="json" %> using System; using System.Web; using System.Linq; using System.Collections.Generic; using System.Web.Script.Serialization; using System.Reflection; public class json : IHttpHandler { public int pagesize = int.Parse(HttpContext.Current.Request["rp"]); //页显示数量 public int pageindex= int.Parse(HttpContext.Current.Request["page"]); //页码 public void ProcessRequest (HttpContext context) { Bind2(context); } //OK public void Bind1 (HttpContext context) { context.Response.ContentType = "text/plain"; DB_CSM_20150615Entities db = new DB_CSM_20150615Entities(); var list = db.T_TASK.Where(u => u.TASK_ID != null); int recordCount = 0; recordCount = list.Count(); list = list.OrderBy(u => u.TASK_ID); list = list.Skip(pageindex * pagesize).Take(pagesize); FlexigridObject fo = new FlexigridObject(); fo.page = pageindex; fo.total = recordCount; foreach (var v in list) //for (int i = (pageindex - 1) * pagesize + 1; i <= pageindex *pagesize; i++) { FlexigridRow fr = new FlexigridRow() { id = v.TASK_ID.ToString(), cell = new List<string>() { v.TASK_ID.ToString(), "bbcc" + v.TASK_CODE, "cc" + v.TASK_LEVEL_ID } }; fo.rows.Add(fr); } JavaScriptSerializer js = new JavaScriptSerializer(); string outStr = js.Serialize(fo); context.Response.Write(outStr); } /// <summary> /// 利用反射 获取类里属性 /// </summary> /// <param name="context"></param> public void Bind2(HttpContext context) { context.Response.ContentType = "text/plain"; DB_CSM_20150615Entities db = new DB_CSM_20150615Entities(); var list = db.T_TASK.Where(u => u.TASK_ID != null); int recordCount = 0; recordCount = list.Count(); list = list.OrderBy(u => u.TASK_ID); list = list.Skip(pageindex * pagesize).Take(pagesize); FlexigridObject fo = new FlexigridObject(); fo.page = pageindex; fo.total = recordCount; foreach (var v in list) //for (int i = (pageindex - 1) * pagesize + 1; i <= pageindex *pagesize; i++) { List< string> lt = new List<string>(); foreach (var p in v.GetType().GetProperties()) { object temp=p.GetValue(v); if (temp != null) { lt.Add(temp.ToString()); } } FlexigridRow fr = new FlexigridRow() { id = v.TASK_ID.ToString(), cell =lt }; fo.rows.Add(fr); } JavaScriptSerializer js = new JavaScriptSerializer(); string outStr = js.Serialize(fo); context.Response.Write(outStr); } public bool IsReusable { get { return false; } } public class FlexigridObject { public int page; public int total; public List<FlexigridRow> rows = new List<FlexigridRow>(); } public class FlexigridRow { public string id; public List<string> cell = new List<string>(); } }
flexgrid参数说明
height: 200, //flexigrid插件的高度，单位为px
width: ‘auto’, //宽度值，auto表示根据每列的宽度自动计算
striped: true, //是否显示斑纹效果，默认是奇偶交互的形式
novstripe: false,
minwidth: 30, //列的最小宽度
minheight: 80, //列的最小高度
resizable: true, //是否可伸缩
url: false, //ajax方式对应的url地址
method: ‘POST’, // 数据发送方式
dataType: ‘xml’, // 数据加载的类型
errormsg: ‘Connection Error’,//错误提升信息
usepager: false, //是否分页
nowrap: true, //是否不换行
page: 1, //默认当前页
total: 1, //数据的总行数
useRp: true, //是否可以动态设置每页显示的结果数
rp: 15, // 每页显示的行数
rpOptions: [10,15,20,25,40],//可选择设定的每页结果数
title: false,//是否包含标题
pagestat: ‘Displaying {from} to {to} of {total} items’,//显示当前页和总页面的样式
procmsg: ‘Processing, please wait …’,//正在处理的提示信息
query: ”,//搜索查询的条件
qtype: ”,//搜索查询的类别
nomsg: ‘No items’,//无结果的提示信息
minColToggle: 1, //minimum allowed column to be hidden
showToggleBtn: true, //show or hide column toggle popup
hideOnSubmit: true,//隐藏提交
autoload: true,//自动加载
blockOpacity: 0.5,//透明度设置
onToggleCol: false,//当在行之间转换时
onChangeSort: false,//当改变排序时
onSuccess: false,//成功后执行
onSubmit: false // 调用自定义的计算函数
