最近では、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>