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. [转]solr DataImportHandler 解决mysql 表导入内存溢出问题

    最近一个项目要用到solr做全文检索,开始盲人摸象. 用tomcat 7 开始配置,开始正常,但是遇到cookie里有中文就报错. 无奈,换tomcat 6, 结果DataImportHandler ...

  2. XML回顾

    xml加强 一.sax解析    1)原理: 读取xml的某个部分,解析一部分(读取一点,解析一点)    2)步骤:         SAXParserFactory factory = SAXPa ...

  3. hdu_5616_Jam's balance(暴力枚举子集||母函数)

    题目连接:hdu_5616_Jam's balance 题意: 给你一些砝码,和一些要被称出的重量,如果这些砝码能称出来输出YES,否则输出NO 题解:我们想想,这题求组合方式,我们这里可以直接用母函 ...

  4. Apache 实现ProxyPass转发URL到Tomcat并实现http自动转https【转载】

    转自 Apache 实现ProxyPass转发URL到Tomcat并实现http自动转https - OPEN 开发经验库http://www.open-open.com/lib/view/open1 ...

  5. LayoutParams 命名的时候，最好用与子控件相关的字符串命名，

    @Override public View initView() { RelativeLayout container = new RelativeLayout(UIUtils.getContext( ...

  6. POJ 2723 HDU 1816 Get Luffy Out

    二分答案 + 2-SAT验证 #include<cstdio> #include<cstring> #include<cmath> #include<stac ...

  7. fn标签

    <%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>

  8. Naive Bayes在mapreduce上的实现

    Naive Bayes是比较常用的分类器,因为思想比较简单.之所以说是naive,是因为他假设用于分类的特征在类确定的条件下是条件独立的,这个假设使得分类变得很简单,但会损失一定的精度. 具体推导可以 ...

  9. [算法] trie树实现

    小写字母的字典树 #include <stdio.h> #include <stdlib.h> #include <string.h> #define MAXN 1 ...

  10. CSS的三种手段让元素脱离标准本文档流——浮动、绝对定位、固定定位

    1.浮动 浮动是CSS中用到的最多的一个选项,他有三个性质.关于浮动我们要强调一点,永远不是一个东西单独浮动,浮动都是一起浮动,要浮动,大家都浮动. 1.1 浮动元素脱离标准文档流 1.1.1 大概描 ...