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. magento head.phtml 加载<a target=_parent

    <script language="javascript">function alinks(){  var links = document.getElementsBy ...

  2. hdu_5711_Ingress(TSP+贪心)

    题目连接:hdu5711 这题是 HDU 女生赛最后一题,TSP+贪心,确实不好想,看了wkc巨巨的题解,然后再做的 题解传送门:Ingress #include<cstdio> #inc ...

  3. Servlet程序开发--取得初始化配置信息

    代码: 两个初始化init方法,一起出现的话,有参的才起作用 package org.lxh.servletdemo ; import java.io.* ; import javax.servlet ...

  4. time_wait和clost_wait说明

    在服务器的日常维护过程中,会经常用到下面的命令: netstat -n | awk '/^tcp/ {++S[$NF]} END {for(a in S) print a, S[a]}' 它会显示例如 ...

  5. 基于JAVA语言的多线程技术

    1.简介 多线程技术属于操作系统范围内的知识: 进程与线程 可以这么理解,一个应用程序就是一个进程,在一个进程中包含至少一个线程:进程就是线程的容器,真正工作.处理任务的是线程. 进程是操作系统分配资 ...

  6. 在数据库里面有这么一个表：用m代表男，用f代表女，现在我要输出格式为中文的：男和女，sql语句该怎么写

    在数据库里面有这么一个表:用m代表男,用f代表女,现在我要输出格式为中文的:男和女, sql语句该怎么写 select  case sex when 'm' then '男' else '女'   a ...

  7. HDU 4287 Intelligent IME（字典树）

    在我没用hash之前,一直TLE,字符串处理时间过长,用了hash之后一直CE,(请看下图)我自从经历我的字典树G++MLE,C++AC以后,一直天真的用C++,后来的CE就是因为这个,G++才支持这 ...

  8. 2016"百度之星" - 资格赛（Astar Round1） Problem E

    简单模拟题,耐心写就能过. #include <stdio.h> #include <math.h> #include<cstring> #include<c ...

  9. 优化EF性能

    本文介绍一些改善EF代码.优化其性能的相关方法,如NoTracking,GetObjectByKey, Include等,还包括编译查询.存储模型视图以及冲突处理等内容.. l         Mer ...

  10. openstack controller ha测试环境搭建记录（十一）——配置neutron（网络节点）

    在网络节点配置内核参数:vi /etc/sysctl.confnet.ipv4.ip_forward=1net.ipv4.conf.all.rp_filter=0net.ipv4.conf.defau ...