2009-01-01から1年間の記事一覧
http://www.trirand.com/blog/jqgrid/jqgrid.htmlで新機能を色々試せます。「Drag & Drop Rows」はなかなかすごいです。
滅多にないけど、ボタンを押した時に属するformとは別のところにsubmitしたい場合などに使用する。 $(function() { $("#submit_button").click( function() { var $form = $('<form action="a.php" method="POST"></form>'); $form.append('<input type="hidden" name="text1" value="hoge" />'); $form.appendTo(document.body); $form.submit(); return …
jqueryui でダイアログを簡単に表示できるんだけど、リサイズに追随してダイアログ内のコンテンツもリサイズしたい時に重宝します。 // ダイアログの初期化 $("#dialog").dialog({ // : // なんやかんや他の初期化パラメータセット // : resizeStart: functi…
http://d.hatena.ne.jp/hiro_nemu/20090723/1248337603 上記のサイトの通りなのだが、同時に使うとカレンダーがダイアログの裏に出ちゃって日付選択できなくて非常に困ります。 以下対策を引用。 .ui-datepicker { width: 17em; padding: .2em .2em 0;}↓この…
json を取得してグリッドに表示するサンプルで使用した jsonフォーマットはちょっと使いにくい。 表示するカラムの順番通りに配置しないといけないし、もしデータが少ないとエラーが発生する。 そこで、カラム名と対応させるようなjsonフォーマットで受け取…
mailman ってメーリングリストサーバアプリケーションがあるのだが、オプションが意味わからん。どうしてこう外人の作るものは意味不明なものが多いのかな。WEBから色々設定できるのは非常に優れものなのにもったいない。今回嵌ったのは添付ファイルが送れな…
今までのサンプルでは、編集時に問題がないことを想定していたが、実際のウェブアプリケーションでは何かしらエラーが発生するもので、その時の対応。 前準備 OK.txt ファイルと NG.txt ファイルを作成する OK.txt の中身 OK NG.txtの中身 NG ソースの説明 …
次は、ナビゲータで「追加」「編集」「削除」時にクエリパラメータをくっつける方法。以下のサンプルでは、 追加、編集時に onclickSubmitParam onclickSubmitValue(edit) editDataParam editDataValue 削除時に onclickSubmitParam onclickSubmitValue(dele…
次は、グリッド直接編集時にクエリパラメータをくっつける方法。以下のサンプルでは、 param1 value1 param2 value2 というパラメータを追加したリクエストを送信するようになります。 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> </head></html>
url パラメータにクエリパラメータをくっ付ける方法でも可能だけど、エスケープの問題とか色々と面倒なので、"postData" ってパラメータにセットすると楽ちんです。以下のサンプルでは、検索時(ページ切り替え時や、ソート時も)に user_id 555 status normal…
昨日の続き。ナビゲーションバーには色々な機能があって ページング ソーティング(カラムをクリックすれば勝手にソートリクエストを飛ばしてくれるので、別にナビゲーションバーの機能ではないが) 検索 詳細表示 追加 編集 削除 と、DBとの連携は完璧だ。※ち…
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…
