最近では、extjsは本当に非常に人気があります。 CRM/HRM関連の企業である限り、プロジェクトでそれを使用する方法を考えていますが、私は敢えてしません。理由は非常に単純です。大きすぎる/愚かすぎる/ソースコードをデバッグするのは難しいです。しかし、extjsの美しいテーブルと機能は、本当に私を唾液で育てます。外国の同志がExtJSの同様のjQueryプラグインを書いたことを覚えているので、Jqueryプラグインの海でそれを検索しました。ハハ、私は本当にそれを見つけました。私のjQueryの方が良いようです。優れた車のエンジンのように、小さくてシンプルです。何でも好きなことができます。本当に便利です。ネットワーク伝送では、全体のソリューションは80kbを超えず、サイズが500kbのextJの速度よりも速度が小さくなります。 。 。
住所をダウンロード：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"> </scrip> - ％>
<script type = "text/javascript">
$（ "document"）。ready（function（）{
$（ '＃flexme1'）。flexigrid（）;
$（ '＃flexme2'）。flexigrid（）;
}）;
</script>
2フォーマットする必要があるフォームを追加するだけです
コードコピーは次のとおりです。
<h1>
最も簡単なFlexigrid Table-1 </h1>
<表ID = "FlexMe1">
<head>
<tr>
<th>
col 1
</th>
<th>
col 2
</th>
<th>
col 3は長いヘッダー名です
</th>
<th>
col 4
</th>
</tr>
</head>
<tbody>
<tr>
<td>
これは、あふれたコンテンツを持つデータ1です
</td>
<td>
これはデータ2です
</td>
<td>
これはデータ3です
</td>
<td>
これはデータ4です
</td>
</tr>
<tr>
<td>
これはデータ1です
</td>
<td>
これはデータ2です
</td>
<td>
これはデータ3です
</td>
<td>
これはデータ4です
</td>
</tr>
<tr>
<td>
これはデータ1です
</td>
<td>
これはデータ2です
</td>
<td>
これはデータ3です
</td>
<td>
これはデータ4です
</td>
</tr>
<tr>
<td>
これはデータ1です
</td>
<td>
これはデータ2です
</td>
<td>
これはデータ3です
</td>
<td>
これはデータ4です
</td>
</tr>
<tr>
<td>
これはデータ1です
</td>
<td>
これはデータ2です
</td>
<td>
これはデータ3です
</td>
<td>
これはデータ4です
</td>
</tr>
<tr>
<td>
これはデータ1です
</td>
<td>
これはデータ2です
</td>
<td>
これはデータ3です
</td>
<td>
これはデータ4です
</td>
</tr>
<tr>
<td>
これはデータ1です
</td>
<td>
これはデータ2です
</td>
<td>
これはデータ3です
</td>
<td>
これはデータ4です
</td>
</tr>
<tr>
<td>
これはデータ1です
</td>
<td>
これはデータ2です
</td>
<td>
これはデータ3です
</td>
<td>
これはデータ4です
</td>
</tr>
<tr>
<td>
これはデータ1です
</td>
<td>
これはデータ2です
</td>
<td>
これはデータ3です
</td>
<td>
これはデータ4です
</td>
</tr>
<tr>
<td>
これはデータ1です
</td>
<td>
これはデータ2です
</td>
<td>
これはデータ3です
</td>
<td>
これはデータ4です
</td>
</tr>
<tr>
<td>
これはデータ1です
</td>
<td>
これはデータ2です
</td>
<td>
これはデータ3です
</td>
<td>
これはデータ4です
</td>
</tr>
<tr>
<td>
これはデータ1です
</td>
<td>
これはデータ2です
</td>
<td>
これはデータ3です
</td>
<td>
これはデータ4です
</td>
</tr>
</tbody>
</table>
<p>
</p>
<h1>
最も簡単なFlexigrid Table-2 </h1>
<表ID = "FlexMe2">
<head>
<tr>
<th>
col 1
</th>
<th>
col 2
</th>
<th>
col 3は長いヘッダー名です
</th>
<th>
col 4
</th>
</tr>
</head>
<tbody>
<tr>
<td>
これは、あふれたコンテンツを持つデータ1です
</td>
<td>
これはデータ2です
</td>
<td>
これはデータ3です
</td>
<td>
これはデータ4です
</td>
</tr>
<tr>
<td>
これはデータ1です
</td>
<td>
これはデータ2です
</td>
<td>
これはデータ3です
</td>
<td>
これはデータ4です
</td>
</tr>
<tr>
<td>
これはデータ1です
</td>
<td>
これはデータ2です
</td>
<td>
これはデータ3です
</td>
<td>
これはデータ4です
</td>
</tr>
<tr>
<td>
これはデータ1です
</td>
<td>
これはデータ2です
</td>
<td>
これはデータ3です
</td>
<td>
これはデータ4です
</td>
</tr>
<tr>
<td>
これはデータ1です
</td>
<td>
これはデータ2です
</td>
<td>
これはデータ3です
</td>
<td>
これはデータ4です
</td>
</tr>
<tr>
<td>
これはデータ1です
</td>
<td>
これはデータ2です
</td>
<td>
これはデータ3です
</td>
<td>
これはデータ4です
</td>
</tr>
<tr>
<td>
これはデータ1です
</td>
<td>
これはデータ2です
</td>
<td>
これはデータ3です
</td>
<td>
これはデータ4です
</td>
</tr>
<tr>
<td>
これはデータ1です
</td>
<td>
これはデータ2です
</td>
<td>
これはデータ3です
</td>
<td>
これはデータ4です
</td>
</tr>
<tr>
<td>
これはデータ1です
</td>
<td>
これはデータ2です
</td>
<td>
これはデータ3です
</td>
<td>
これはデータ4です
</td>
</tr>
<tr>
<td>
これはデータ1です
</td>
<td>
これはデータ2です
</td>
<td>
これはデータ3です
</td>
<td>
これはデータ4です
</td>
</tr>
<tr>
<td>
これはデータ1です
</td>
<td>
これはデータ2です
</td>
<td>
これはデータ3です
</td>
<td>
これはデータ4です
</td>
</tr>
<tr>
<td>
これはデータ1です
</td>
<td>
これはデータ2です
</td>
<td>
これはデータ3です
</td>
<td>
これはデータ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'}
]、、
ソート名：「ISO」、
並べ替え：「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'}
]、幅：700、高さ：300、usepager：true、showtabletogglebtn：true、title： "Click me to collapse"
}）;
$（ '＃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'}
]、、
検索項目：[
{display： 'iso'、name： 'iso'}、
{display： 'name'、name： 'name'、isdefault：true}
]、、
ソート名：「ISO」、
並べ替え：「ASC」、
タイトル：「私のテスト結果」、
幅：700、
高さ：300、
usepager：true、showtabletogglebtn：true、rp：10
}）;
}）;
</script>
高度な使用：
1.ページネーションに使用されるストアドプロシージャ
コードコピーは次のとおりです。
手順を作成[dbo]。[spall_returnrows]
（
@SQL nvarchar（4000）、
@page int、
@recsperpage int、
@id varchar（255）、
@sort varchar（255）
））
として
@str nvarchar（4000）を宣言する
@str = 'Select Top'+を設定します
cast（@recsperpage as varchar（20））+
' * from（'+@sql+'）t t。'+
@id+
'in in（select top'+
cast（（@recsperpage*（@page-1））as varchar（20））+
'+
@id+
' から （'
+@sql+
'）T9 Order by'+
@sort+
'）注文'+
@選別
@strを印刷します
exec sp_executesql @str
2非同期JSONデータ送信実装
コードコピーは次のとおりです。
システムの使用。
System.collections.genericを使用しています。
System.Configurationを使用します。
System.Dataを使用しています。
System.data.sqlclientを使用しています。
System.linqを使用しています。
System.textを使用しています。
system.webを使用しています。
System.Web.Servicesを使用しています。
Newtonsoft.jsonを使用しています。
名前空間griddemo
{
/// <summary>
/// $ codebehindclassname $の概要説明
/// </summary>
[webservice（namespace = "http://tempuri.org/"）]
[webservicebinding（compormsto = wsiprofiles.basicprofile1_1）]
パブリッククラスgetDataSource4：ihttphandler
{
public void processRequest（httpcontextコンテキスト）
{
context.response.contenttype = "text/plain";
//現在のページを取得します
文字列currentPage = context.request ["page"];
//ページごとに表示される金額を取得します
文字列pageshowlimit = context.request ["rp"];
//プライマリキーを取得します
string tableid = context.request ["sortname"];
//ソートメソッドを取得します
string ordermethod = context.request ["sortorord"];
//フィールドをフィルタリングします
string filterfield = context.request ["qtype"];
//コンテンツをフィルタリングします
文字列filterfieldcontext;
if（context.request.form ["letter_pressed"] == null）
{
filterfieldcontext = "";
}
それ以外
{
filterfieldcontext = context.request ["letter_pressed"];
}
//テーブルの総数を取得します
String TableRowCount = sqlhelper.executescalar（configurationmanager.appsettings ["sql2"]、
commandType.text、
「person.addressからcount（*）を選択してください」
）.toString（）;
//メインSQLを取得します
sqlparameter sql = new SqlParameter（ "@sql"、sqldbtype.nvarchar）;
//sql.value = "select * from person.address";
if（filterfieldcontext.length == 0 || filterfield.length == 0）
{
sql.value = "addressid、addressline1、addressline2、郵便局、city from person.address";
}
それ以外
{
string [] tmp = filterfield.split（ '、'）;
sql.value = "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"、
新しいsqlparameter []
{
sql、page、recsperpage、id、sort
}）。表[0];
context.response.write（dttoson2（returnTable、currentPage、tableRowCount））;
}
/// <summary>
/// json形式の変換
/// </summary>
/// <param name = "dt">データテーブルテーブル</param>
/// <param name = "page">現在のページ</param>
/// <param name = "合計">合計</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（ "合計：{0}、/n"、合計）;
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（））;
}
それ以外
{
jsonstring.appendformat（ "'{0}'、"、dt.rows [i] [j] .toString（））;
}
if（j == dt.columns.count -1）
{
jsonstring.appendformat（ "、 '{0}'"、 "<input type =/" button/"value =/" view/"id =/" ss/"onclick =/" ss（ " + dt.rows [i] [0] .toString（） +"）/"/>"）;
}
}
jsonstring.append（ "]"）;
if（i == dt.Rows.count -1）
{
jsonstring.appendline（ "}"）;
}
それ以外
{
jsonstring.appendline（ "}、"）;
}
}
jsonstring.append（ "]"）;
jsonstring.appendline（ "}"）;
return jsonstring.toString（）;
}
パブリックブールIsReusable
{
得る
{
falseを返します。
}
}
}
}
3ページの実装
コードコピーは次のとおりです。
<％@ page Language = "c＃" autoeventwireup = "true" codebehind = "complex-8.aspx.cs" ensulits = "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"> </scrip>
<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'、
データ型：「JSON」、
colmodel：[
{display： 'addressid'、name： 'addressid'、width：40、sortable：true、align： 'center'}、
{表示： '特定のアドレス1'、名前： 'addressline1'、width：140、sortable：true、align： 'left'}、
{表示： '特定のアドレス2'、名前： 'addressline2'、width：80、sortable：true、align： 'left'}、
{display： 'zip code'、name： 'postalcode'、width：80、sortable：true、align： 'left'}、
{display： 'City'、name： 'City'、width：80、sortable：true、align： 'left'}、
{display： 'opt'、name： 'opt'、width：80、sortable：true、align： 'left'}}
]、、
ボタン：[
{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}
]、、
検索項目：[
{display： 'city'、name： 'City'、isDefault：true}、
{表示：「郵便番号」、名前：「郵便局」}
]、、
usepager：true、
タイトル：「顧客情報」、
userP：true、
RP：10、
showtabletogglebtn：true、
幅：700、
高さ：200、
rpoptions：[10、15、20、25、40、60]、//ページごとに結果の数を選択できます
procmsg：「データが読み込まれているのを待ってください...」、//プロンプトメッセージが処理されています
resizable：false、//スケーラブルですか？
ソート名：「addressid」、
// sortorder： "asc"、//この列は、ストアドプロシージャのために使用できません
}）;
}）;
関数SORTALPHA（com）{
jQuery（ '＃flex1'）。flexoptions（{newp：1、params：[{name： 'lette_presse'、value：com}、{name： 'qtype'、value：$（ 'select [name = qtype]'）。val（）}}）;
jQuery（ "＃flex1"）。flexReload（）;
}
関数SSS（データ）
{
var temp = eval（data）;
// jquery.facebox（temp）;
jquery.facebox（{ajax： 'default.aspx？id ='+temp}）
}
</script>
</head>
<body>
<表>
</table>
</body>
</html>