FlexGrid简单demo

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,  40, align: 'center' },

    { display: '第一列', name: 'CustomerName',  180, align: 'left' },

    { display: '第二列', name: 'Memo',  120, align: 'left' },
     { display: '第二列', name: 'Memo',  120, align: 'left' },
                ],
                sortname: "Unid",
                sortorder: "asc",
                usepager: true,
                title: 'One Demo',
                useRp: true,
                rp: 10,
                 'auto',
                height: 255,
                query:"a=1&b=2"
            })
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
         <table id="flex1" style="">
        </table>
    </div>
    </form>
</body>
</html>

View Code

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 = 0;
        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 = 0;
        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>();
    }
}

View Code

demo 下载

flexgrid参数说明

height: 200, //flexigrid插件的高度，单位为px

 ‘auto’, //宽度值，auto表示根据每列的宽度自动计算

striped: true, //是否显示斑纹效果，默认是奇偶交互的形式

novstripe: false,

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