【ハウツー】わずか数行で"ものすごいテーブル"に! - jQueryプラグイン「Flexigrid」 (1) ドラッグ&ドロップでカラム幅を変更可能 | エンタープライズ | マイコミジャーナル
Webアプリケーションの操作性を向上させるために、いまや欠かすことのできないJavaScript。Prototype.jsやjQueryといった各種フレームワークを使用して、ユーザビリティを高めている開発者も少なくないだろう。 ここ数年の間でYahoo! UI LibraryやExt JS、Dojo Toolkitといった、開発のしやすさや・操作性の向上はもちろんのこと、綺麗なデザインも兼ね備えているライブラリが増えてきた。既存のWebアプリケーションに少しのコードを追加するだけで、機能もデザインも付加できるこれらのライブラリは非常に魅力的だ。 ここではテーブルで組んだリストに対して、まるで表計算ソフトのような操作性を提供するFlexigridライブラリを紹介したい。 ネイティブアプリケーション並みのリストを実現 FlexigridとはPaulo P. Marinas氏が開発・公開している
jQueryでテーブルをかなり便利にフォーマットしてくれる『Flexigrid』 - IDEA*IDEA ～ 百式管理人のライフハックブログ ～
ドットインストール代表のライフハックブログ
Flexigrid
※ 画像は公式サイトデモより 業務システムのみならず、メールや一覧の機能で必要になるのがテーブルを使った一覧機能だ。このとき、比較元になるのがエクセルをはじめとした表計算ソフトウェアだろう。あのレベルのUIをWebベースで再現するのはほぼ不可能とさえ言えそうだ。 ドラッグアンドドロップによるカラムの並べ替えや表示/非表示の切り替えが可能 無理矢理カスタマイズして膨大に工数を増やすのではなく、ライブラリを使って柔軟に、素早く対応しよう。 今回紹介するオープンソース・ソフトウェアはFlexigrid、jQueryを使ったテーブル操作ライブラリだ。 Flexigridは既存のテーブルに対して利用できるライブラリで、普通のテーブルをカラムの並べ替えや表示/非表示、幅の変更など優れたUIをもったテーブルに変更してくれる。対応ブラウザはIE6/IE7、Firefox 2、Opera 9.x、Safar
flexigrid.info
flexigrid.info 2024 著作権. 不許複製 プライバシーポリシー
flexigrid.info
flexigrid.info 2024 著作権. 不許複製 プライバシーポリシー
Flexigrid 手軽に使えるExcel風グリッドＵＩ「Flexigrid for jQuery」。 カラムのソート、ページング、項目のフィルタリングが可能なグリッドＵＩ。 jQueryベースで、18KBで使えます。 単純なグリッドＵＩ ソート機能やページング機能を搭載したグリッド jQueryをメインで使っていて、手軽にこうしたエクセル風ＵＩを実装したい場合に使えそうです。 関連エントリ リッチなExcel風グリッドインタフェースを提供するJavascriptライブラリ「dhtmlxGrid」 Yahoo! UI Library を使ったページ送りが可能なグリッドコンポーネント AjaxベースのPHPを使ったグリッドコンポーネント Ajax+PHP+Smarty+script.aculo.usなデータグリッドコンポーネント 高機能なJavascriptツリーグリッドコンポーネント
【ハウツー】わずか数行で"ものすごいテーブル"に! - jQueryプラグイン「Flexigrid」 | エンタープライズ | マイコミジャーナル
Copyright (C) Mainichi Communications Inc. All rights reserved. 掲載記事の無断転載を禁じます
データを簡単にテーブルにフォーマットしてくれるjQuery プラグイン Flexigrid を使ってみた。 Flexigrid http://www.flexigrid.info/ Google Code http://code.google.com/p/flexigrid/ DBから吸い出して管理画面などでさくっとテーブルにしたい場合に非常に便利！ 具体的にどんなことができるのかはマイコミジャーナルさんの記事がわかりやすいのでリンク わずか数行で”ものすごいテーブル”に! – jQueryプラグイン「Flexigrid」 ただこのプラグインあまりリファレンスがない・・・ jsを開けばオプションは一目瞭然なのだが、自分メモとして残しておきます。 オプションパラメータ一覧 UIパラメータ width テーブルの横幅。数値もしくは auto が利用可能。auto に設定した際は横のリサイズは無
Flexigrid
こんばんは。松田です。 ほんのちょっと手を入れるだけで、ただのテーブルレイアウトがかっこよくなってしまうjQueryプラグイン「Flexigrid」を使ってみました。 「Flexigrid」を使うと、カラムの表示/非表示機能、色分け、配置換え、リサイズなどいろんな機能を自動的に付けてくれます。 まずは普通にテーブルを作ってみます。 ソース とてもシンプルでかっこわるいですね！ これをFlexigridを使ってかっこよくしてみます。 やることは３つ。 ・headタグ内でスクリプトとCSSの読み込み ・テーブルにID（ここでは'flexigrid_table'）を指定 ・スクリプト $('#flexigrid_table').flexigrid(); の呼び出し これだけです。 そして、Flexigrid化したテーブルが下のものになります。 ソース すごくオサレになりましたね！ ※IE7ではt
【ハウツー】わずか数行で"ものすごいテーブル"に! - jQueryプラグイン「Flexigrid」 (2) 既存テーブルにFlexigridを組み込む | エンタープライズ | マイコミジャーナル
動作サンプル - 既存テーブルにFlexigridを組み込む jQuery 1.2.6とFlexigridを用意し、実際にテーブルリストに組み込んで使ってみた。ここでのWebブラウザ実行環境は次のとおり。 Microsoft Windows XP SP2 / Microsoft Internet Explorer 7 FreeBSD 8-current / Mozilla Firefox 2 まずは既存のテーブルに対して組み込んでみる。ベースとなるHTMLソースコードとWebブラウザでの実行結果は次のとおり。 base_table.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Con
jQuery TreeView, Flexigrid を Rails で使ってみた - yuumi3のお仕事日記
訳あって、jQuery プラグインの TreeView, Flexigrid を Ruby on Rails + jRails で使ってみました。以下の画像のように左のツーリー(TreeView)で選択したディレクトリー内のファイル一覧が 右側の テーブル(Flexgrid) に表示されます。 使っているソフトなど jQuery jQuery Flexigrid for jQuery クールなグリッド(テーブル)の表示 jQuery plugin: Treeview ツーリー表示 jRails - jQuery on Rails Railsのlink_to_remote等のAjax機能を jQueryで使えるようにするプラグイン nickfessel.com - Put Flexigrid on Rails Flexigrid用 Ruby on Railsのコード例 今回作ったコード 実際
【ハウツー】わずか数行で"ものすごいテーブル"に! - jQueryプラグイン「Flexigrid」 (3) ページャ/ソート機能付きテーブルリストを作る | エンタープライズ | マイコミジャーナル
動作サンプル - JSON+Ajaxでソートなどを可能にしたテーブルリスト FlexigridはJSON形式やXML形式で一覧画面に表示するデータをやりとりさせることで、ページャやソートなどの機能を簡単に組み込むことができるようになっている。ここではPHPを使用し、MySQLから郵便番号データを取り出してJSON形式で返すサンプルファイルを作成してみた。サーバ実行環境は次のとおり。 OS: FreeBSD 8-current Webサーバ: Apache 2.2.8 PHP: 5.2.6 MySQL: 5.0.51a pdo_mysqlインストール済み 各ソースコードと、実行結果は次のとおり。 zip_json.php (※) <?php function sanitizeTag($var) { if ( is_array($var) ) { $var = array_map("sanit
blog.cuegraphix.com - jQueryのFlexigridを使ってみた(2) データ成形編
前回 Flexigrid のパラメータのメモを残しましたが、表をHTMLに表示する際、データベースのデータをそのまま表示するのではなく、表示用に変換させてから表示するという場合が少なくありません。 たとえば表に画像を表示したり、詳細ページのリンクを張ったりと。 出力する JSON なり XML 自体を変換して出力してやれば済む話なんですが、タグをそのまま出力するのでエスケープ処理をさせたりしなくちゃならない。 なんとなくここまできたら表示部は表示部で分離させたい！となりました。 で、いろいろ模索してると見つけました！ パラメータに preProcess というメソッドを指定することができ、データ取得時の表示直前に全読み込みデータを引数として渡されます。 たとえば下記のようなデータを読み込むとします。 { page: 1, total: 5, rows: [ {id:'1',cell:['1
【ハウツー】わずか数行で"ものすごいテーブル"に! - jQueryプラグイン「Flexigrid」 (4) オプションも豊富 | エンタープライズ | マイコミジャーナル
利用可能なオプション Flexigridはオプションが豊富に用意されており、実行時にJSON形式で指定できる。今回使用したオプションは次のとおり。 url : データを実際にやり取りするファイルパスを指定 procmsg : 読み込み中に表示するメッセージを変更する pagestat : 読み込み完了後に表示するメッセージを変更する method : データ送信時のメソッドを指定 dataType : データ形式を指定。XMLかJSONのうちいずれか colModel : 表示するカラム、ソート可否や幅などを指定 searchitems : クイックサーチ用に使用するアイテムを定義 sortname : デフォルトでソートするカラムを指定 sortorder : デフォルトのソート順を指定 usepager : ページャを使用するかしないかを指定 useRp : 一度に表示する件数を操作で
【ハウツー】わずか数行で"ものすごいテーブル"に! - jQueryプラグイン「Flexigrid」 | マイナビニュース
Webアプリケーションの操作性を向上させるために、いまや欠かすことのできないJavaScript。Prototype.jsやjQueryといった各種フレームワークを使用して、ユーザビリティを高めている開発者も少なくないだろう。 ここ数年の間でYahoo! UI LibraryやExt JS、Dojo Toolkitといった、開発のしやすさや・操作性の向上はもちろんのこと、綺麗なデザインも兼ね備えているライブラリが増えてきた。既存のWebアプリケーションに少しのコードを追加するだけで、機能もデザインも付加できるこれらのライブラリは非常に魅力的だ。 ここではテーブルで組んだリストに対して、まるで表計算ソフトのような操作性を提供するFlexigridライブラリを紹介したい。 ネイティブアプリケーション並みのリストを実現 FlexigridとはPaulo P. Marinas氏が開発・公開している
【ハウツー】わずか数行で"ものすごいテーブル"に! - jQueryプラグイン「Flexigrid」 (1) ドラッグ&ドロップでカラム幅を変更可能 | エンタープライズ | マイコミジャーナル
Webアプリケーションの操作性を向上させるために、いまや欠かすことのできないJavaScript。Prototype.jsやjQueryといった各種フレームワークを使用して、ユーザビリティを高めている開発者も少なくないだろう。 ここ数年の間でYahoo! UI LibraryやExt JS、Dojo Toolkitといった、開発のしやすさや・操作性の向上はもちろんのこと、綺麗なデザインも兼ね備えているライブラリが増えてきた。既存のWebアプリケーションに少しのコードを追加するだけで、機能もデザインも付加できるこれらのライブラリは非常に魅力的だ。 ここではテーブルで組んだリストに対して、まるで表計算ソフトのような操作性を提供するFlexigridライブラリを紹介したい。 ネイティブアプリケーション並みのリストを実現 FlexigridとはPaulo P. Marinas氏が開発・公開している
jQueryﾌﾟﾗｸﾞｲﾝのFlexigridを使ってみた。 テーブルがｶｯｺｲｸなった(ΦωΦ) 配布サイトの内容を要約すると。 ただただ格好良くしたいだけの場合 $("table").flexigrid() 引数付きで格好良くしたい場合 $("table").flexigrid({ height : 'auto', striped : false }); Ajaxでデータを取ってきて格好良くしたい場合 $("#flex1").flexigrid({ url: 'post2.php', dataType: 'json', colModel : [ {display: 'ISO', name : 'iso', width : 40, sortable : true, align: 'center'}, {display: 'Name', name : 'name', width : 180
Flexigridのサイトを見つけられない人へ
► 2018 (1) ► 1月 (1) ► 2017 (4) ► 6月 (3) ► 5月 (1) ► 2016 (15) ► 12月 (4) ► 11月 (1) ► 10月 (2) ► 7月 (3) ► 6月 (1) ► 5月 (3) ► 1月 (1) ► 2015 (13) ► 12月 (1) ► 10月 (1) ► 9月 (1) ► 6月 (1) ► 5月 (1) ► 3月 (2) ► 2月 (3) ► 1月 (3) ► 2014 (11) ► 12月 (1) ► 9月 (2) ► 8月 (2) ► 6月 (1) ► 4月 (4) ► 2月 (1) ► 2013 (15) ► 12月 (3) ► 11月 (3) ► 8月 (2) ► 7月 (4) ► 5月 (1) ► 4月 (2) ► 2012 (7) ► 10月 (1) ► 7月 (1) ► 4月 (3) ► 1月 (2) ► 20
Flexigrid は Paulo P. Marinas 氏によって開発されているグリッドライブラリです。 MIT ライセンスで配布されています。 Flexigrid を利用するとデータのソート、フィルター、カラム・テーブルのリサイズ、ページネーションなどを簡単にできるようになります。 ここでは Flexigrid の基本的な使い方と、少し発展的な利用方法について説明します。 少し発展的な話題はこちら: FlexiGrid - AJAX でデータ取得 FlexiGrid - 行のカスタマイズ 基本的な使い方 Flexigrid の入手方法と設定方法 Flexigrid は Flexigrid のサイトから無償でダウンロード可能です (MIT ライセンス)。 flexigrid-<バージョン>.zip をダウンロードしてきて展開すると js と css というフォルダーがあります。 この中の
Flexigrid Jqueryベースのテーブル修飾script、FlexigridをZend Frameworkで使ってみよう、という習作です。 マイコミの記事を参考にしながら作ってみました。 テーブルデータは id,title,description,date のありがちな感じで。 とりあえずは、テンプレート。Smartyで作ってありますが、HTMLそのままですから、他のテンプレートでも問題ないでしょう。 [smarty] [/smarty] 確かjqueryは$(){～だけで、ready()の効果があるような気がしたけど、とりえあず。 Flexigrid本体は、ダウンロード>解凍したものを、ルート/js/flexigrid/の中に直接放り込んであります。今回はjqueryだけ、別途用意したものを読み込んでいますので、pathにご注意ください。 このテンプレートを/flexigrid/
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML上のテーブル操作の決定版·Flexigrid MOONGIFT
手軽に使えるExcel風グリッドＵＩ「Flexigrid for jQuery」:phpspot開発日誌
blog.cuegraphix.com - jQueryのFlexigridを使ってみた
簡単にテーブルをカッコよくするjQueryプラグイン「Flexigrid」を使ってみた
flexigridと戯れる - loiter on the sideroad
フレックシグリッド (Flexigrid) によるグリッド操作 - jQuery 入門
Zend FrameworkでFlexigrid習作 | プログラムの種 ブログ