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. codeforces 558/C Amr and Chemistry(数论+位运算)

    题目链接:http://codeforces.com/problemset/problem/558/C 题意:把n个数变成相同所需要走的最小的步数易得到结论,两个奇数不同,一直×2不可能有重叠枚举每个 ...

  2. 转 玩转Bash变量

    PS : 注意本文讨论的是Bash,而不一定是/bin/sh所链接的那个shell.这里出现的所有代码片段,默认在顶上都添加了#!/bin/bash. 一门自带混淆的语言 while (( $# )) ...

  3. new关键字的理解-问题型

    //输出的结果是?????????//The answer is good and gbc public class Example { String str=new String("goo ...

  4. maven编码 gbk 的不可映射字符解决办法

    出现这个问题修改一下pom文件的编译配置就好了. <plugin> <groupId>org.apache.maven.plugins</groupId> < ...

  5. list实例应用

    Java代码如下: package Test01; import java.util.ArrayList; import java.util.List; public class Test02 { p ...

  6. OpenGL学习-------visual studio 2010配置和第一个OpenGL程序讲解

    OpenGL作为当前主流的图形API之一,它在一些场合具有比DirectX更优越的特性. 1.与C语言紧密结合. OpenGL命令最初就是用C语言函数来进行描述的,对于学习过C语言的人来讲,OpenG ...

  7. PKI 笔记

    PKI – Public Key Infrastructure , 通常翻译为公钥基础设施. PKI 安全平台提供的4个服务,来保证安全的数据,分别是: l  身份识别 l  数据保密 l  数据完整 ...

  8. HashSet 与HashMap底层实现

    1. HashSet底层通过包装HashMap来实现,HashSet在添加一个值的时候,实际上是将此值作为HashMap中的key来进行保存. 2. HashMap的底层实现是通过初始化化一个Entr ...

  9. Is it possible to run native sql with entity framework?

    For .NET Framework version 4 and above: use ObjectContext.ExecuteStoreCommand() if your query return ...

  10. Android init.rc文件浅析

    Android init.rc文件浅析 分类: Android2012-04-13 18:00 13149人阅读 评论(2) 收藏 举报 androidservicepathactionsocketc ...