使用FlexiGrid实现Extjs表格的效果-网络传输小，更方便！

近一段时间Extjs真的是风光无限好，只要是个做CRM/HRM之类的企业现在都在琢磨怎么在项目中用它，不过兄弟我可是不敢，原因很简单：太大/太笨/源码不好调试。但是对于Extjs漂亮的表格与功能的强大，实在是让我垂涎三尺，记得以前有个老外同志写过一个类似的Extjs的Jquery插件，所以就在Jquery的插件海洋中一顿海找，呵呵，还真让我找到了。看来还是我的Jquery好，小巧简单好像一部好的汽车引擎，我想要什么就可以自已DIY，真是方便。

总体方案在网络传输上不超过80KB，速度比500KB大小的Extjs不知道要小上多少哪。。。

下载地址：http://code.google.com/p/flexigrid/

不过由于FlexiGrid在互联网上的大部分资料都是用PHP或者java写的，所以兄弟简单的对它进行了改制，也做了一个山寨版的Extjs表格实现，希望对大家有帮助。

基本使用：

1 基本使用是非常简单的，只需要加入Jquery库与FlexiGrid的JS即可以对表格进行格式化与美化.

<link rel="stylesheet" type="text/css" href="css/flexigrid/flexigrid.css">
  
<script type="text/javascript" src="lib/jquery/jquery-1.2.6.min.js"></script>
  
<script type="text/javascript" src="flexigrid.pack.js"></script>
  
<%--<script type="text/javascript" src="lib/jquery/jquery-1.2.6-vsdoc-cn.js"></script>--%>
  
<script type="text/javascript">
    $("document").ready(function() {
    $('#flexme1').flexigrid();
    $('#flexme2').flexigrid();
    });
</script>

2 加入需要格式化的表格即可

<h1>
    最简单的flexigrid表格-1</h1>
<table id="flexme1">
    <thead>
        <tr>
            <th width="100">
                Col 1
            </th>
            <th width="100">
                Col 2
            </th>
            <th width="100">
                Col 3 is a long header name
            </th>
            <th width="300">
                Col 4
            </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                This is data 1 with overflowing content
            </td>
            <td>
                This is data 2
            </td>
            <td>
                This is data 3
            </td>
            <td>
                This is data 4
            </td>
        </tr>
        <tr>
            <td>
                This is data 1
            </td>
            <td>
                This is data 2
            </td>
            <td>
                This is data 3
            </td>
            <td>
                This is data 4
            </td>
        </tr>
        <tr>
            <td>
                This is data 1
            </td>
            <td>
                This is data 2
            </td>
            <td>
                This is data 3
            </td>
            <td>
                This is data 4
            </td>
        </tr>
        <tr>
            <td>
                This is data 1
            </td>
            <td>
                This is data 2
            </td>
            <td>
                This is data 3
            </td>
            <td>
                This is data 4
            </td>
        </tr>
        <tr>
            <td>
                This is data 1
            </td>
            <td>
                This is data 2
            </td>
            <td>
                This is data 3
            </td>
            <td>
                This is data 4
            </td>
        </tr>
        <tr>
            <td>
                This is data 1
            </td>
            <td>
                This is data 2
            </td>
            <td>
                This is data 3
            </td>
            <td>
                This is data 4
            </td>
        </tr>
        <tr>
            <td>
                This is data 1
            </td>
            <td>
                This is data 2
            </td>
            <td>
                This is data 3
            </td>
            <td>
                This is data 4
            </td>
        </tr>
        <tr>
            <td>
                This is data 1
            </td>
            <td>
                This is data 2
            </td>
            <td>
                This is data 3
            </td>
            <td>
                This is data 4
            </td>
        </tr>
        <tr>
            <td>
                This is data 1
            </td>
            <td>
                This is data 2
            </td>
            <td>
                This is data 3
            </td>
            <td>
                This is data 4
            </td>
        </tr>
        <tr>
            <td>
                This is data 1
            </td>
            <td>
                This is data 2
            </td>
            <td>
                This is data 3
            </td>
            <td>
                This is data 4
            </td>
        </tr>
        <tr>
            <td>
                This is data 1
            </td>
            <td>
                This is data 2
            </td>
            <td>
                This is data 3
            </td>
            <td>
                This is data 4
            </td>
        </tr>
        <tr>
            <td>
                This is data 1
            </td>
            <td>
                This is data 2
            </td>
            <td>
                This is data 3
            </td>
            <td>
                This is data 4
            </td>
        </tr>
    </tbody>
</table>
<p>
</p>
<h1>
    最简单的flexigrid表格-2</h1>
<table id="flexme2">
    <thead>
        <tr>
            <th width="100">
                Col 1
            </th>
            <th width="100">
                Col 2
            </th>
            <th width="100">
                Col 3 is a long header name
            </th>
            <th width="300">
                Col 4
            </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                This is data 1 with overflowing content
            </td>
            <td>
                This is data 2
            </td>
            <td>
                This is data 3
            </td>
            <td>
                This is data 4
            </td>
        </tr>
        <tr>
            <td>
                This is data 1
            </td>
            <td>
                This is data 2
            </td>
            <td>
                This is data 3
            </td>
            <td>
                This is data 4
            </td>
        </tr>
        <tr>
            <td>
                This is data 1
            </td>
            <td>
                This is data 2
            </td>
            <td>
                This is data 3
            </td>
            <td>
                This is data 4
            </td>
        </tr>
        <tr>
            <td>
                This is data 1
            </td>
            <td>
                This is data 2
            </td>
            <td>
                This is data 3
            </td>
            <td>
                This is data 4
            </td>
        </tr>
        <tr>
            <td>
                This is data 1
            </td>
            <td>
                This is data 2
            </td>
            <td>
                This is data 3
            </td>
            <td>
                This is data 4
            </td>
        </tr>
        <tr>
            <td>
                This is data 1
            </td>
            <td>
                This is data 2
            </td>
            <td>
                This is data 3
            </td>
            <td>
                This is data 4
            </td>
        </tr>
        <tr>
            <td>
                This is data 1
            </td>
            <td>
                This is data 2
            </td>
            <td>
                This is data 3
            </td>
            <td>
                This is data 4
            </td>
        </tr>
        <tr>
            <td>
                This is data 1
            </td>
            <td>
                This is data 2
            </td>
            <td>
                This is data 3
            </td>
            <td>
                This is data 4
            </td>
        </tr>
        <tr>
            <td>
                This is data 1
            </td>
            <td>
                This is data 2
            </td>
            <td>
                This is data 3
            </td>
            <td>
                This is data 4
            </td>
        </tr>
        <tr>
            <td>
                This is data 1
            </td>
            <td>
                This is data 2
            </td>
            <td>
                This is data 3
            </td>
            <td>
                This is data 4
            </td>
        </tr>
        <tr>
            <td>
                This is data 1
            </td>
            <td>
                This is data 2
            </td>
            <td>
                This is data 3
            </td>
            <td>
                This is data 4
            </td>
        </tr>
        <tr>
            <td>
                This is data 1
            </td>
            <td>
                This is data 2
            </td>
            <td>
                This is data 3
            </td>
            <td>
                This is data 4
            </td>
        </tr>
    </tbody>
</table>

为了增加FlexiGrid的基本使用效果，我们可以通过参数对其进行基本的调整

自定义表头

具体代码实现：

<script type="text/javascript">
    $("document").ready(function() {
        $('#flexme1').flexigrid({
            colModel: [
            { display: 'ISO', name: 'iso', width: 40, sortable: true, align: 'center' },
            { display: 'Name', name: 'name', width: 180, sortable: true, align: 'left' },
            { display: 'Printable Name', name: 'printable_name', width: 120, sortable: true, align: 'left' },
            { display: 'ISO3', name: 'iso3', width: 130, sortable: true, align: 'left', hide: true },
            { display: 'Number Code', name: 'numcode', width: 80, sortable: true, align: 'right' }
            ]
        });
        $('#flexme2').flexigrid({
            colModel: [
            { display: 'ISO', name: 'iso', width: 40, sortable: true, align: 'center' },
            { display: 'Name', name: 'name', width: 180, sortable: true, align: 'left' },
            { display: 'Printable Name', name: 'printable_name', width: 120, sortable: true, align: 'left' },
            { display: 'ISO3', name: 'iso3', width: 130, sortable: true, align: 'left', hide: true },
            { display: 'Number Code', name: 'numcode', width: 80, sortable: true, align: 'right' }
            ],
            sortname: "iso",
            sortorder: "asc",
  
        });
    });
</script>

自定义折叠，自定义排序的实现

<script type="text/javascript">
    $("document").ready(function() {
        $('#flexme1').flexigrid({
            colModel: [
            { display: 'ISO', name: 'iso', width: 40, sortable: true, align: 'center' },
            { display: 'Name', name: 'name', width: 180, sortable: true, align: 'left' },
            { display: 'Printable Name', name: 'printable_name', width: 120, sortable: true, align: 'left' },
            { display: 'ISO3', name: 'iso3', width: 130, sortable: true, align: 'left', hide: true },
            { display: 'Number Code', name: 'numcode', width: 80, sortable: true, align: 'right' }
            ], width: 700, height: 300, usepager: true, showTableToggleBtn: true, title: "点我折叠"
        });
        $('#flexme2').flexigrid({
            colModel: [
            { display: 'ISO', name: 'iso', width: 40, sortable: true, align: 'center' },
            { display: 'Name', name: 'name', width: 180, sortable: true, align: 'left' },
            { display: 'Printable Name', name: 'printable_name', width: 120, sortable: true, align: 'left' },
            { display: 'ISO3', name: 'iso3', width: 130, sortable: true, align: 'left', hide: true },
            { display: 'Number Code', name: 'numcode', width: 80, sortable: true, align: 'right' }
            ],
            searchitems: [
            { display: 'ISO', name: 'iso' },
            { display: 'Name', name: 'name', isdefault: true }
            ],
            sortname: "iso",
            sortorder: "asc",
            title: "我的测试效果",
            width: 700,
            height: 300,
            usepager: true, showTableToggleBtn: true, rp: 10
  
        });
    });
</script>

高级使用：

1 分页要用到的存储过程

   1: Create PROCEDURE [dbo].[spAll_ReturnRows]

   2:         (

   3:             @SQL nVARCHAR(4000),

   4:             @Page int,

   5:             @RecsPerPage int,

   6:             @ID VARCHAR(255),

   7:             @Sort VARCHAR(255)

   8:         )

   9:         AS

10:

  11:         DECLARE @Str nVARCHAR(4000)

12:

  13:         SET @Str='SELECT   TOP '+

  14:             CAST(@RecsPerPage AS VARCHAR(20))+

  15:             ' * FROM ('+@SQL+') T WHERE T.'+

  16:             @ID+

  17:             ' NOT IN (SELECT   TOP '+

  18:             CAST((@RecsPerPage*(@Page-1)) AS VARCHAR(20))+

  19:             ' '+

  20:             @ID+

  21:             ' FROM ('

  22:             +@SQL+

  23:             ') T9 ORDER BY '+

  24:             @Sort+

  25:             ') ORDER BY '+

  26:             @Sort

27:

  28:         PRINT @Str

29:

  30:         EXEC sp_ExecuteSql @Str

2 异步JSON数据传输实现

   1: using System;

   2: using System.Collections.Generic;

   3: using System.Configuration;

   4: using System.Data;

   5: using System.Data.SqlClient;

   6: using System.Linq;

   7: using System.Text;

   8: using System.Web;

   9: using System.Web.Services;

  10: using Newtonsoft.Json;

11:

  12: namespace GridDemo

  13: {

  14:     /// <summary>

  15:     /// $codebehindclassname$ 的摘要说明

  16:     /// </summary>

  17:     [WebService(Namespace = "http://tempuri.org/")]

  18:     [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]

  19:     public class GetDataSource4 : IHttpHandler

  20:     {

21:

  22:         public void ProcessRequest(HttpContext context)

  23:         {

  24:             context.Response.ContentType = "text/plain";

25:

  26:             //得到当前页

  27:             string CurrentPage = context.Request["page"];

  28:             //得到每页显示多少

  29:             string PageShowLimit = context.Request["rp"];

  30:             //得到主键

  31:             string TableID = context.Request["sortname"];

  32:             //得到排序方法

  33:             string OrderMethod = context.Request["sortorder"];

34:

  35:             //得到要过滤的字段

  36:             string FilterField = context.Request["qtype"];

  37:             //得到要过滤的内容

  38:             string FilterFieldContext;

  39:             if (context.Request.Form["letter_pressed"] == null)

  40:             {

  41:                 FilterFieldContext = "";

  42:             }

  43:             else

  44:             {

  45:                 FilterFieldContext = context.Request["letter_pressed"];

  46:             }

  47:             //得到表的总行数

  48:             string TableRowCount = SqlHelper.ExecuteScalar(ConfigurationManager.AppSettings["SQL2"],

  49:                                     CommandType.Text,

  50:                                     "select count(*) from Person.Address"

  51:                                    ).ToString();

  52:             //得到主SQL

  53:             SqlParameter SQL = new SqlParameter("@SQL", SqlDbType.NVarChar);

  54:             //SQL.Value = "SELECT  * FROM Person.Address";

  55:             if (FilterFieldContext.Length == 0 || FilterField.Length == 0)

  56:             {

  57:                 SQL.Value = "SELECT  AddressID,AddressLine1,AddressLine2,PostalCode,City FROM Person.Address";

  58:             }

  59:             else

  60:             {

  61:                 string[] tmp = FilterField.Split(',');

  62:                 SQL.Value = "SELECT  AddressID,AddressLine1,AddressLine2,PostalCode,City FROM Person.Address where " + tmp[0] + " like '" + FilterFieldContext + "%'";

  63:             }

64:

65:

  66:             SqlParameter Page = new SqlParameter("@Page", SqlDbType.Int);

  67:             Page.Value = Convert.ToInt32(CurrentPage);

68:

69:

  70:             SqlParameter RecsPerPage = new SqlParameter("@RecsPerPage", SqlDbType.Int);

  71:             RecsPerPage.Value = Convert.ToInt32(PageShowLimit);

72:

  73:             SqlParameter ID = new SqlParameter("@ID", SqlDbType.VarChar);

  74:             ID.Value = TableID;

75:

  76:             SqlParameter Sort = new SqlParameter("@Sort", SqlDbType.VarChar);

  77:             Sort.Value = TableID;

78:

  79:             //得到表

  80:             DataTable returnTable = SqlHelper.ExecuteDataset(ConfigurationManager.AppSettings["SQL2"],

  81:                         CommandType.StoredProcedure, "spAll_ReturnRows",

  82:                         new SqlParameter[]

  83:                             {

  84:                                 SQL,Page,RecsPerPage,ID,Sort

  85:                             }).Tables[0];

  86:             context.Response.Write(DtToSON2(returnTable, CurrentPage, TableRowCount));

  87:         }

  88:         /// <summary>

  89:         /// JSON格式转换

  90:         /// </summary>

  91:         /// <param name="dt">DataTable表</param>

  92:         /// <param name="page">当前页</param>

  93:         /// <param name="total">总计多少行</param>

  94:         /// <returns></returns>

  95:         public static string DtToSON2(DataTable dt, string page, string total)

  96:         {

97:

  98:             StringBuilder jsonString = new StringBuilder();

  99:             jsonString.AppendLine("{");

 100:             jsonString.AppendFormat("page: {0},\n", page);

 101:             jsonString.AppendFormat("total: {0},\n", total);

 102:             jsonString.AppendLine("rows: [");

 103:

 104:             for (int i = 0; i < dt.Rows.Count; i++)

 105:             {

 106:                 jsonString.Append("{");

 107:                 jsonString.AppendFormat("id:'{0}',cell:[", dt.Rows[i][0].ToString());

 108:                 for (int j = 0; j < dt.Columns.Count; j++)

 109:                 {

 110:                     if (j == dt.Columns.Count - 1)

 111:                     {

 112:                         jsonString.AppendFormat("'{0}'", dt.Rows[i][j].ToString());

 113:                     }

 114:                     else

 115:                     {

 116:                         jsonString.AppendFormat("'{0}',", dt.Rows[i][j].ToString());

 117:                     }

 118:

 119:                     if (j == dt.Columns.Count - 1)

 120:                     {

 121:                         jsonString.AppendFormat(",'{0}'", "<input type=\"button\" value=\"查看\" id=\"sss\" onclick=\"sss(" + dt.Rows[i][0].ToString() + ")\" />");

 122:                     }

 123:

 124:                 }

 125:

 126:                 jsonString.Append("]");

 127:                 if (i == dt.Rows.Count - 1)

 128:                 {

 129:                     jsonString.AppendLine("}");

 130:

 131:                 }

 132:                 else

 133:                 {

 134:

 135:                     jsonString.AppendLine("},");

 136:                 }

 137:

 138:             }

 139:

 140:             jsonString.Append("]");

 141:             jsonString.AppendLine("}");

 142:

 143:             return jsonString.ToString();

 144:

 145:         }

 146:         public bool IsReusable

 147:         {

 148:             get

 149:             {

 150:                 return false;

 151:             }

 152:         }

 153:     }

 154: }

3 页面实现

   1: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Complex-8.aspx.cs" Inherits="GridDemo.Complex_8" %>

2:

   3: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

   4: <html xmlns="http://www.w3.org/1999/xhtml">

   5: <head id="Head1" runat="server">

   6:     <title></title>

   7:     <link rel="stylesheet" type="text/css" href="/css/flexigrid/flexigrid.css" />

8:

   9:     <script type="text/javascript" src="/lib/jquery/jquery.js"></script>

10:

  11:     <script type="text/javascript" src="flexigrid.js"></script>

12:

  13:     <link type="text/css" rel="Stylesheet" href="facebox/facebox.css" />

  14:     <link type="text/css" rel="Stylesheet" href="body.css" />

15:

  16:     <script type="text/javascript" src="facebox/facebox.js"></script>

17:

  18:     <script type="text/javascript">

  19:         $("document").ready(function() {

  20:             $("#flex1").flexigrid

  21:             ({

  22:                 url: 'GetDataSource4.ashx',

  23:                 dataType: 'json',

  24:                 colModel: [

  25:                 { display: '地址ID', name: 'AddressID', width: 40, sortable: true, align: 'center' },

  26:                 { display: '具体地址1', name: 'AddressLine1', width: 140, sortable: true, align: 'left' },

  27:                 { display: '具体地址2', name: 'AddressLine2', width: 80, sortable: true, align: 'left' },

  28:                 { display: '邮编', name: 'PostalCode', width: 80, sortable: true, align: 'left' },

  29:                 { display: '城市', name: 'City', width: 80, sortable: true, align: 'left' },

  30:                 { display: '操作', name: 'Opt', width: 80, sortable: true, align: 'left' }

  31:                 ],

  32:                 buttons: [

  33:                 { name: 'A', onpress: sortAlpha },

  34:                 { name: 'B', onpress: sortAlpha },

  35:                 { name: 'C', onpress: sortAlpha },

  36:                 { name: 'D', onpress: sortAlpha },

  37:                 { name: 'E', onpress: sortAlpha },

  38:                 { name: 'F', onpress: sortAlpha },

  39:                 { name: 'G', onpress: sortAlpha },

  40:                 { name: 'H', onpress: sortAlpha },

  41:                 { name: 'I', onpress: sortAlpha },

  42:                 { name: 'J', onpress: sortAlpha },

  43:                 { name: 'K', onpress: sortAlpha },

  44:                 { name: 'L', onpress: sortAlpha },

  45:                 { name: 'M', onpress: sortAlpha },

  46:                 { name: 'N', onpress: sortAlpha },

  47:                 { name: 'O', onpress: sortAlpha },

  48:                 { name: 'P', onpress: sortAlpha },

  49:                 { name: 'Q', onpress: sortAlpha },

  50:                 { name: 'R', onpress: sortAlpha },

  51:                 { name: 'S', onpress: sortAlpha },

  52:                 { name: 'T', onpress: sortAlpha },

  53:                 { name: 'U', onpress: sortAlpha },

  54:                 { name: 'V', onpress: sortAlpha },

  55:                 { name: 'W', onpress: sortAlpha },

  56:                 { name: 'X', onpress: sortAlpha },

  57:                 { name: 'Y', onpress: sortAlpha },

  58:                 { name: 'Z', onpress: sortAlpha },

  59:                 { name: '%', onpress: sortAlpha }

  60:                 ],

  61:                 searchitems: [

  62:                  { display: '城市', name: 'City' , isdefault: true},

  63:                  { display: '邮编', name: 'PostalCode' }

  64:                  ],

  65:                 usepager: true,

  66:                 title: '客户信息',

  67:                 useRp: true,

  68:                 rp: 10,

  69:                 showTableToggleBtn: true,

  70:                 width: 700,

  71:                 height: 200,

  72:                 rpOptions: [10, 15, 20, 25, 40, 60], //可选择设定的每页结果数

  73:                 procmsg: '请等待数据正在加载中 …', //正在处理的提示信息

  74:                 resizable: false, //是否可伸缩

  75:                 sortname: "AddressID",

  76:                 //sortorder: "asc",//此列由于存储过程原因无法用

  77:             });

  78:         });

  79:         function sortAlpha(com) {

  80:             jQuery('#flex1').flexOptions({ newp: 1, params: [{ name: 'letter_pressed', value: com }, { name: 'qtype', value: $('select[name=qtype]').val()}] });

  81:             jQuery("#flex1").flexReload();

  82:         }

  83:         function sss(data)

  84:         {

  85:            var temp=eval(data);

  86: //           jQuery.facebox(temp);

  87:            jQuery.facebox({ ajax: 'Default.aspx?id='+temp })

  88:         }

  89:     </script>

90:

  91: </head>

  92: <body>

  93:     <table id="flex1" style="display: none">

  94:     </table>

  95: </body>

  96: </html>

posted @ 2013-11-18 10:31 技术狂阅读(783) 评论(0) 编辑收藏举报

刷新页面返回顶部

技术狂

使用FlexiGrid实现Extjs表格的效果-网络传输小，更方便！

公告