2009-09-01から1ヶ月間の記事一覧
jqGrid のポイントとなる機能。結構色々なことができるし、ソースを見ても頑張った形跡がありありと見て取れる。ま、そういう所には得てしてバグが入り込むものだ。(^^; 前準備 というわけで2点ソースを修正する必要があります。いずれも grid.formedit.js …
今まではドキュメント内で生成した配列データを表示していましたが、外部にあるjsonファイルを読み込むサンプルです。 用意するJSONファイル こんなカンジのファイルです。test.json というファイル名で保存します。 UTF-8 で保存します。(このサンプルでは…
1つの画面に複数グリッドを表示するサンプルです。 注意点 jqGrid が出力するHTMLは、一部の要素でid属性が重複してしまいます。ざっとソースを眺めたカンジで カラム名 複数選択時のチェックボックス などで重複しそうです。ただ、HTML的には不正なのですが…
jQueryUI のダイアログユーティリティーとの連携サンプルです。 ボタンを押すとうにょ〜んとダイアログが出てきてグリッドが表示されます。 チェックボックスをチェックして「選択」ボタンを押すと、ダイアログが消えて、元の画面に選択された情報が表示され…
前準備 例によって前準備が必要で、こちらからjquery-jsonというjQueryのプラグインをDLして、jsフォルダにコピーしておく。このプラグインで、配列やらオブジェクトやらを文字列化してくれる。 サンプルはこんなプログラムです。 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> </html>
別に無くても良い機能なんだけど、グリッドの上下にツールバーを配置することができる。まぁステータスバーみたいな付加情報を表示するのに便利かな、というぐらい。サンプルでは、選択された行数を表示させるようにしたり、選択中の情報を表示するボタンを…
jQuery UIのカレンダーを使用するサンプル。 以下の前準備が必要なので注意。いずれもコピー元はjQuery UIのフォルダ以下にあります。 jquery-ui-1.7.2.custom.js を js フォルダにコピーし、インクルードする jquery-ui-i18n.js を js/i18n フォルダにコピ…
グリッド直接編集サンプルは以前ご紹介したけど、今度はもうちょっと高機能なものもできるというサンプルです。 だがその前に！！ 実はjqGrid 3.5にはちょっとしたバグがあって上手く動きません。なので、jqGridのソースを修正するところから始まります。(こ…
いつも読み込んでいるjavascripファイル「jquery.jqGrid.min.js」は、コメントやら不要なスペース、改行を全部削除して、できる限りファイルサイズを小さくしたファイルです。なので、別に暗号化されてるわけでは無いですが、このソースを追っていくのは不可…
行をクリックした時に何かしたい、という要望は必ずあると思うので、そのサンプルです。 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </meta></head></html>
配列データをそのまま表示するのではなく、自前で列を作成します。 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>カスタム列サ…</meta></head></html>
今回は、グリッドを直接編集するサンプルです。 簡単に説明すると、 editRow で編集状態にします saveRow で更新します(サーバと通信します) キャンセルの場合は restoreRow で元に戻します という手順になります。 saveRow では、指定したURLに対して、パラ…
複数行を選択するサンプル。 multiselect: true にするだけなので簡単。 あとは、"selarrrow" から、選択中の行ID一覧を取得し、行データを取得するだけなので、削除やら更新は省略。 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> </head></html>
getGridParam 関数で、色んな内部データを取得できる。とりあえず全パラメータ名でテストするサンプル。個々の意味は名前からある程度判断できる。 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> </head></html>
すこしレベルアップしたサンプル。 ちなみに、addRowData の一つ目の引数はnullではダメです。undefined にすると、自動で采番してくれます。 さらにちなみに、jqGridが内部的に保持しているIDと、画面に表示されているIDは別物となってます。
http://www.trirand.com/jqgrid/jqgrid.html:サンプルサイト で、「ほうほう、こんなことができるのか」とjqGridの凄さにびっくりしたかもしれないけど、「一体どうやって使うのよ？これ」と最初はかなり戸惑ってしまうので、まずは超簡単なサンプルを用意し…
※install.txt ってファイルも参考に。 前準備 予め、http://www.jqueryui.com/home から、UIのcssファイルをDLしてくる。カスタムしてもいいし、デフォルトのままでもOK。ま、無難に「Current (stable) (1.7.2: jQuery 1.3+)」っていう出来合いのやつをDLす…
http://www.trirand.com/blog/?page_id=6:DLサイトで、ダウンロードするのだが、やたらいっぱいチェックボックスがあって面食らうと思います。まここはひとまず全部にチェックを入れてDLします。(この記事を書いてる時点ではVersion：jquery.jqGrid-3.5.3.zi…
今日からjqGridについての調査結果をまとめていこうと思う。 jqGridってのは、jQueryというjavascriptライブラリを利用して作られたGridコンポーネントで、なかなかすごいヤツだ。 まずはリンクを貼り付けておこう サンプルサイト：http://www.trirand.com/j…
