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

    }

}

demo 下载

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 // 调用自定义的计算函数

FlexGrid简单demo的更多相关文章

  1. 设计模式之单例模式的简单demo

    /* * 设计模式之单例模式的简单demo */ class Single { /* * 创建一个本类对象. * 和get/set方法思想一样,类不能直接调用对象 * 所以用private限制权限 * ...

  2. Spring的简单demo

    ---------------------------------------- 开发一个Spring的简单Demo,具体的步骤如下: 1.构造一个maven项目 2.在maven项目的pom.xml ...

  3. 使用Spring缓存的简单Demo

    使用Spring缓存的简单Demo 1. 首先创建Maven工程,在Pom中配置 <dependency> <groupId>org.springframework</g ...

  4. Managed DirectX中的DirectShow应用（简单Demo及源码)

    阅读目录 介绍 准备工作 环境搭建 简单Demo 显示效果 其他 Demo下载 介绍 DirectX是Microsoft开发的基于Windows平台的一组API,它是为高速的实时动画渲染.交互式音乐和 ...

  5. angular实现了一个简单demo，angular-weibo-favorites

    前面必须说一段 帮客户做了一个过渡期的项目,唯一的要求就是速度,我只是会点儿基础的php,于是就用tp帮客户做了这个项目.最近和客户架构沟通,后期想把项目重新做一下,就用现在最流行的技术,暂时想的使用 ...

  6. Solr配置与简单Demo[转]

    Solr配置与简单Demo 简介: solr是基于Lucene Java搜索库的企业级全文搜索引擎,目前是apache的一个项目.它的官方网址在http://lucene.apache.org/sol ...

  7. 二维码简单Demo

    二维码简单Demo 一.视图 @{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name=&qu ...

  8. android JNI 简单demo（2）它JNI demo 写

    android JNI 简单demo(2)它JNI demo 写 一.搭建Cygwin 环境:http://blog.csdn.net/androidolblog/article/details/25 ...

  9. Ext简单demo示例

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

随机推荐

  1. 转：selenium 并行启动多个浏览器

    https://github.com/fool2fish/selenium-doc/blob/master/official-site/selenium-grid.md Selenium Grid 快 ...

  2. Apache无法启动提示the requested operation has failed

    主要参考这篇 http://apps.hi.baidu.com/share/detail/15868128 但还是遇到一些问题,记录如下: 1. 配置完成后,restart apache,出现 the ...

  3. 标准与扩展ACL实验

    一标准访问控制列表实验: 实验拓扑: 实验目的:掌握标准与扩展ACL的配置 实验要求:拒绝R1到R3的所有流量 实验步骤: 步骤1 按如上拓扑做好底层配置,并检测相邻设备之间的连通性 步骤2起静态路由 ...

  4. POJ2096 概率dp 入门

    http://acm.hust.edu.cn/vjudge/contest/view.action?cid=118282#problem/B 挺好的一个题目: 不过刚开始嘛,看别人题解长知识.这个人写 ...

  5. jna

    http://topmanopensource.iteye.com/blog/1752355

  6. 两种不同的重置样式方法(normalize.css)

    重置样式非常多,凡是一个前端开发人员肯定有一个常用的重置CSS文件并知道如何使用它们.他们是盲目的在做还是知道为什么这么做呢?原因是不同的浏览器对一些元素有不同的默认样式,如果你不处理,在不同的浏览器 ...

  7. 【BZOJ 1579】 1579: [Usaco2009 Feb]Revamping Trails 道路升级 （最短路）

    1579: [Usaco2009 Feb]Revamping Trails 道路升级 Description 每天,农夫John需要经过一些道路去检查牛棚N里面的牛. 农场上有M(1<=M< ...

  8. 深入浅出Ajax（三）

    <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> &l ...

  9. libtiff库使用

    此文章为了记录我在使用libtiff库中的一些问题而写,将不断补充. libtiff库是读取和写入tiff文件最主要的一个开源库,但文档写的实在不敢恭维.相对资料也是异常稀少. libtiff库的安装 ...

  10. 再探CRC(转)

    源:http://hi.baidu.com/skystalker/item/228a263147f74e87f5e4ad8d 之前写了CRC16的程序,虽说能用,却不知其所心然,现在要用CRC32,重 ...