javascript
特に説明を要しないのでコードだけ $(".ui-dialog-buttonpane button:contains('登録')")).button("disable"); // 押せないようにする $(".ui-dialog-buttonpane button:contains('登録')")).button("enable"); // 押せるようにする 参考URL) http://stackov…
// <tr>...<td class="selected">...</tr> というような<tr>を指定するセレクタ $("table > tbody > tr:has(td.selected)"); // 逆に<tr>...<td class="selected">...</tr> ではない<tr>を指定するセレクタ $("table > tbody > tr:not(:has(td.selected))"); // 逆に<tr>...<td class="selected">...</tr> ではなく、且つ // <tr class="last">でもない<tr>を指定するセレクタ $(…</tr></tr></tr></tr>
たとえばjavascriptで このページに行って テキストボックスに「ほげほげ」と入力して送信ボタンを押し 結果のhtmlから id=result な要素のテキストを取得する というような処理を書くとき、それぞれの動作の間にサーバからの返答がどれぐらいかかるかわから…
jQuery使ってframeのウィンドウをごにょごにょしようと思って色々試したのだが、どうも上手くいかない。 var frame = document.getElementById("myframe"); alert( $("#txt1", frame).val() ); // これが上手くいかないどうやら、frameは直接使えないような…
1回呼ぶ毎に違う結果を返す関数 var f = function() { (function(){ var f1 = function(){ alert("f1"); f = function(){f2();}; }; var f2 = function(){ alert("f2"); f = function(){f1();}; }; return f1; })()(); }; f(); // f1 f(); // f2 f(); // f1 …
http://www.trirand.com/blog/jqgrid/jqgrid.htmlそんなに目新しい機能追加はなさそうです。
http://www.trirand.com/blog/jqgrid/jqgrid.htmlで新機能を色々試せます。「Drag & Drop Rows」はなかなかすごいです。
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フォーマットで受け取…
今までのサンプルでは、編集時に問題がないことを想定していたが、実際のウェブアプリケーションでは何かしらエラーが発生するもので、その時の対応。 前準備 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>