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: , align: 'center' }, { display: '第一列', name: 'CustomerName', width: , align: 'left' }, { display: '第二列', name: 'Memo', width: , align: 'left' },
{ display: '第二列', name: 'Memo', width: , align: 'left' },
],
sortname: "Unid",
sortorder: "asc",
usepager: true,
title: 'One Demo',
useRp: true,
rp: ,
width: 'auto',
height: ,
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 = ;
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 = ;
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 // 调用自定义的计算函数