使用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>

Col 1

</th>

<th>

Col 2

</th>

<th>

Col 3 is a long header name

</th>

<th>

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>

Col 1

</th>

<th>

Col 2

</th>

<th>

Col 3 is a long header name

</th>

<th>

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 分頁用到的存儲過程

複製代碼代碼如下:

Create PROCEDURE [dbo].[spAll_ReturnRows]

(

@SQL nVARCHAR(4000),

@Page int,

@RecsPerPage int,

@ID VARCHAR(255),

@Sort VARCHAR(255)

)

AS

DECLARE @Str nVARCHAR(4000)

SET @Str='SELECT TOP '+

CAST(@RecsPerPage AS VARCHAR(20))+

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

@ID+

' NOT IN (SELECT TOP '+

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

' '+

@ID+

' FROM ('

+@SQL+

') T9 ORDER BY '+

@Sort+

') ORDER BY '+

@Sort

PRINT @Str

EXEC sp_ExecuteSql @Str

2 異步JSON數據傳輸實現

複製代碼代碼如下:

using System;

using System.Collections.Generic;

using System.Configuration;

using System.Data;

using System.Data.SqlClient;

using System.Linq;

using System.Text;

using System.Web;

using System.Web.Services;

using Newtonsoft.Json;

namespace GridDemo

{

/// <summary>

/// $codebehindclassname$ 的摘要說明

/// </summary>

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

[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]

public class GetDataSource4 : IHttpHandler

{

public void ProcessRequest(HttpContext context)

{

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

//得到當前頁

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

//得到每頁顯示多少

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

//得到主鍵

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

//得到排序方法

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

//得到要過濾的字段

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

//得到要過濾的內容

string FilterFieldContext;

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

{

FilterFieldContext = "";

}

else

{

FilterFieldContext = context.Request["letter_pressed"];

}

//得到表的總行數

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

CommandType.Text,

"select count(*) from Person.Address"

).ToString();

//得到主SQL

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

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

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

{

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

}

else

{

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

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

}

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

Page.Value = Convert.ToInt32(CurrentPage);

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

RecsPerPage.Value = Convert.ToInt32(PageShowLimit);

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

ID.Value = TableID;

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

Sort.Value = TableID;

//得到表

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

CommandType.StoredProcedure, "spAll_ReturnRows",

new SqlParameter[]

{

SQL,Page,RecsPerPage,ID,Sort

}).Tables[0];

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

}

/// <summary>

/// JSON格式轉換

/// </summary>

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

/// <param name="page">當前頁</param>

/// <param name="total">總計多少行</param>

/// <returns></returns>

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

{

StringBuilder jsonString = new StringBuilder();

jsonString.AppendLine("{");

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

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

jsonString.AppendLine("rows: [");

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

{

jsonString.Append("{");

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

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

{

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

{

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

}

else

{

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

}

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

{

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

}

}

jsonString.Append("]");

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

{

jsonString.AppendLine("}");

}

else

{

jsonString.AppendLine("},");

}

}

jsonString.Append("]");

jsonString.AppendLine("}");

return jsonString.ToString();

}

public bool IsReusable

{

get

{

return false;

}

}

}

}

3 頁面實現

複製代碼代碼如下:

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

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

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

<head runat="server">

<title></title>

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

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

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

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

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

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

<script type="text/javascript">

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

$("#flex1").flexigrid

({

url: 'GetDataSource4.ashx',

dataType: 'json',

colModel: [

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

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

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

{ display: '郵編', name: 'PostalCode', width: 80, sortable: true, align: 'left' },

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

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

],

buttons: [

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

{ name: '%', onpress: sortAlpha }

],

searchitems: [

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

{ display: '郵編', name: 'PostalCode' }

],

usepager: true,

title: '客戶信息',

useRp: true,

rp: 10,

showTableToggleBtn: true,

width: 700,

height: 200,

rpOptions: [10, 15, 20, 25, 40, 60], //可選擇設定的每頁結果數

procmsg: '請等待數據正在加載中…', //正在處理的提示信息

resizable: false, //是否可伸縮

sortname: "AddressID",

//sortorder: "asc",//此列由於存儲過程原因無法用

});

});

function sortAlpha(com) {

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

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

}

function sss(data)

{

var temp=eval(data);

// jQuery.facebox(temp);

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

}

</script>

</head>

<body>

<table>

</table>

</body>

</html>