👨🏾‍🎓 🖇️ 🤷🏻 データを含むテーブルを表示するプラグイン。フレキシグリッド 🐍 ㊗️ 🤲🏻

jQueryプラグイン「 FlexiGrid 」を使用してテーブルを作成します。

経験豊富なプログラマーはすでにこのプラグインに精通していると確信していますが、経験が示すように、一部のプログラマーはまだそのようなことを知りません。

これは、実際にはjQueryの有名なjqGridプラグインに類似しています。

作成者が説明する主な機能は次のとおりです。

列のサイズ変更
テーブルのサイズ変更
タイトルでデータを並べ替える
美しいテーマ
通常のテーブルを変換できます
AJAXの使用-データソース（XMLおよびJSON）
ページナビゲーション
列の表示/非表示
ツールバー
検索する
利用可能なAPI
表の非表示/表示
動的な追加/変更GUI

コアは、一般的なjqGridと同じですが、インターフェースが異なります。ここで、選択はすでにどのプラグインがより満足しているかによって異なります=）まだ違いがありますが、より複雑な機能を使用したり、より微妙なカスタマイズが必要な場合は、それらを見つけることができます。

プラグインは次のブラウザでテストされました：IE6 / IE7、Firefox 2、Opera 9.x、Safari 3.0

通常のHTMLテーブルからFlexGridを生成する機能が本当に気に入りました。

たとえば、 ~~1つの墓地と~~ 1つのテーブルがあります。

< table class ="our_tbl" > < thead > < tr > < th > ID </ th > < th > NAME </ th > < th > CATEGORY </ th > < th > DATE </ 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 > </ tbody > </ table > * This source code was highlighted with Source Code Highlighter .

このためには、次のコードで十分です。

$( '.our_tbl' ).flexigrid(); * This source code was highlighted with Source Code Highlighter .

この機能を使用するには、次のものが必要です。

さて、ここにPHP実装の実用例があります

そこにあるPHPコードは非常に単純で理想からはほど遠いものですが、一般的な原則は明らかです。

$（ "＃flex1" ）.flexigrid
（
{
url： 'post2.php' 、
dataType： 'json' 、
colModel：[
{display： 'ID' 、name： 'id' 、width：40、sortable： true 、align： 'center' }、
{display： 'ISO' 、名前： 'iso' 、幅：40、ソート可能： true 、align： 'center' }、
{display： 'Name' 、name： 'name' 、width：180、sortable： true 、align： 'left' }、
{display： 'Printable Name' 、名前： 'printable_name' 、width：120、sortable： true 、align： 'left' }、
{display： 'ISO3' 、name： 'iso3' 、width：130、 sortable ： true 、align： 'left' 、hide： true }、
{display： 'Number Code' 、名前： 'numcode' 、幅：80、 sortable ： true 、align： 'right' }
]、
ボタン：[
{名前： '追加' 、bclass： '追加' 、onpress：テスト}、
{名前： '削除' 、bclass： '削除' 、onpress：テスト}、
{セパレータ： true }、
{名前： 'A' 、オンプレス：sortAlpha}、
{名前： 'B' 、オンプレス：sortAlpha}、
{名前： 'C' 、オンプレス：sortAlpha}、
{名前： 'D' 、オンプレス：sortAlpha}、
{名前： 'E' 、オンプレス：sortAlpha}、
{名前： 'F' 、オンプレス：sortAlpha}、
{名前： 'G' 、オンプレス：sortAlpha}、
{名前： 'H' 、オンプレス：sortAlpha}、
{名前： 'I' 、オンプレス：sortAlpha}、
{名前： 'J' 、オンプレス：sortAlpha}、
{名前： 'K' 、オンプレス：sortAlpha}、
{名前： 'L' 、オンプレス：sortAlpha}、
{名前： 'M' 、オンプレス：sortAlpha}、
{名前： 'N' 、オンプレス：sortAlpha}、
{名前： 'O' 、オンプレス：sortAlpha}、
{名前： 'P' 、オンプレス：sortAlpha}、
{名前： 'Q' 、オンプレス：sortAlpha}、
{名前： 'R' 、オンプレス：sortAlpha}、
{名前： 'S' 、オンプレス：sortAlpha}、
{名前： 'T' 、オンプレス：sortAlpha}、
{名前： 'U' 、オンプレス：sortAlpha}、
{名前： 'V' 、オンプレス：sortAlpha}、
{名前： 'W' 、オンプレス：sortAlpha}、
{名前： 'X' 、オンプレス：sortAlpha}、
{名前： 'Y' 、オンプレス：sortAlpha}、
{名前： 'Z' 、オンプレス：sortAlpha}、
{名前： '＃' 、オンプレス：sortAlpha}
]、
searchitems：[
{表示： 'ISO' 、名前： 'iso' }、
{display： 'Name' 、名前： 'name' 、isdefault： true }
]、
sortname： "id" 、
sortorder： "asc" 、
usepager： true 、
タイトル： '国' 、
useRp： true 、
rp：10、
showTableToggleBtn： true 、
幅：700、
高さ：255
}
）;
}）;
関数 sortAlpha（com）
{
jQuery（ '＃flex1' ）.flexOptions（{newp：1、 params ：[{name： 'letter_pressed' 、value：com}、{name： 'qtype' 、value：$（ 'select [name = qtype]' ） .val（）}]}）;
jQuery（ "＃flex1" ）.flexReload（）;
}
機能テスト（com、grid）
{
if （com == 'Delete' ）
{
if （$（ '.trSelected' 、grid）.length> 0）{
if （confirm（ 'Delete' + $（ '.trSelected' 、grid）.length + 'items？' ））{
var items = $（ '.trSelected' 、グリッド）;
var itemlist = '' ;
for （i = 0; i <items.length; i ++）{
itemlist + = items [i] .id.substr（3）+ "、" ;
}
$ .ajax（{
タイプ： "POST" 、
dataType： "json" 、
url： "delete.php" 、
データ： "items =" + itemlist、
成功：関数（データ）{
alert（ "クエリ：" + data.query + "-影響を受ける行の合計：" + data.total）;
$（ "＃flex1" ）.flexReload（）;
}
}）;
}
} else {
falseを返します。
}
}
else if （com == 'Add' ）
{
アラート（「新規アイテムアクションの追加」）;
}
}
*このソースコードは、ソースコードハイライターで強調表示されました。

およびPHPコード：

<？ php
関数 countRec （$ fname 、$ tname 、$ where ）{
$ sql = "SELECT count（$ fname）FROM $ tname $ where" ;
$ result = runSQL （$ sql ）;
while （$ row = mysql_fetch_array （$ result ））{
return $ row [ 0 ];
}
}
$ ページ = $ _POST [ 'ページ' ];
$ rp = $ _POST [ 'rp' ];
$ sortname = $ _POST [ 'sortname' ];
$ sortorder = $ _POST [ 'sortorder' ];
if （！$ sortname ）$ sortname = 'name' ;
if （！$ sortorder ）$ sortorder = 'desc' ;
if （$ _POST [ 'query' ]！ = '' ）{
$ where = " WHERE` " 。$ _POST [ 'qtype' ]。 "` LIKE '％ " 。$ _POST [ ' query ' ]。 '％' " ;
} else {
$ where = '' ;
}
if （$ _POST [ 'letter_pressed' ]！ = '' ）{
$ where = " WHERE` " 。$ _POST [ 'qtype' ]。 "` LIKE '" 。$ _POST [ ' letter_pressed ' ]。 '％' " ;
}
if （$ _POST [ 'letter_pressed' ] = = '＃' ）{
$ where = " WHERE` " 。$ _POST [ 'qtype' ]。 "` REGEXP '[[：digit：]]' " ;
}
$ sort = "ORDER BY $ sortname $ sortorder" ;
if （！$ page ）$ page = 1 ;
if （！$ rp ）$ rp = 10 ;
$ start =（（$ page-1 ）* $ rp ）;
$ limit = "LIMIT $ start、$ rp" ;
$ sql = "SELECT id、iso、name、printable_name、iso3、numcode FROM country $ where $ sort $ limit" ;
$ result = runSQL （$ sql ）;
$ total = countRec （ 'iso' 、 'country' 、$ where ）;
header （ "Expires：Mon、26 Jul 1997 05:00:00 GMT" ）;
header （ "Last-Modified：" 。 gmdate （ "D、d MYH：i：s" ）。 "GMT" ）;
header （ "Cache-Control：no-cache、must-revalidate" ）;
header （ "プラグマ：no-cache" ）;
header （ "Content-type：text / x-json" ）;
$ json = "" ;
$ json 。= "{\ n" ;
$ json 。= "page：$ page、\ n" ;
$ json 。= "total：$ total、\ n" ;
$ json 。= "行：[" ;
$ rc = false ;
while （$ row = mysql_fetch_array （$ result ））{
if （$ rc ）$ json 。= "、" ;
$ json 。= "\ n {" ;
$ json 。= "id： '" 。$ row [ ' id ' ]。「 '、」 ;
$ json 。= "cell：['" 。$ row [ ' id ' ]。 "'、'" 。$ row [ 'iso' ]。「 '」 ;
$ json 。= "、 '" 。スラッシュ（$ 行 [ '名前' ]）を追加します。「 '」 ;
$ json 。= "、 '" 。スラッシュ（$ 行 [ 'printable_name' ]）を追加します。「 '」 ;
$ json 。= "、 '" 。スラッシュ（$ 行 [ 'iso3' ]）を追加します。「 '」 ;
$ json 。= "、 '" 。スラッシュ（$ 行 [ 'numcode' ]）を追加します。 "']" ;
$ json 。= "}" ;
$ rc = true ;
}
$ json 。= "] \ n" ;
$ json 。= "}" ;
echo $ json ;
？ >
*このソースコードは、ソースコードハイライターで強調表示されました。

例からコードを取りましたが、自分でやり直したわけではありません。やり直すことができるものがたくさんあります。特に不便なjson文字列アセンブリです。 json_encode（）関数を使用する方がはるかに便利です。

通常、このような種類のテーブルはあまり拡張できませんが、たとえば、管理パネルページは非常に便利で、最も重要なのは迅速です。

PS：私のブログのクロスポスト

データを含むテーブルを表示するプラグイン。 フレキシグリッド

More articles:

データを含むテーブルを表示するプラグイン。フレキシグリッド