カテゴリー
jQuery

jqueryとjquery-uiの簡単導入

jQuery / jQuery UI の使用方法について jqGrid を試してみる(導入編) でふれましたが、最新の jQuery は少しファイル構成が変わっているので、jQuery 1.11.2 / jQuery UI 1.11.2 で再度わかりやすくまとめました。

1. jQuery 1.11.2 のダウンロード

https://jquery.com/download/ から ”Download the compressed, production jQuery 1.11.2” リンクを右クリックして「名前を付けてリンク先を保存」でローカルにダウンロードします。デフォルトで jquery-1.11.2.min.js という名前でダウンロードされます。

2. jQuery 1.11.2 のダウンロード

https://jqueryui.com/download/ から :

  • “Version” のセクションより、1.11.2 (Stable, for jQuery1.6+)を選択
  • “Components” のセクションより、Toggle All を選択
  • “Theme” のセクションより、Redmond を選択(※お好きなものを選らんで下さい)
  • Download ボタンをクリック

デフォルトで jquery-ui-1.11.2.custom.zip という名前でダウンロードされます。ダウンロードが完了したら展開します。
展開すると以下のフォルダおよびファイルがあります。

    + external
    + images
    index.html
    jquery-ui.css
    jquery-ui.js
    jquery-ui.min.css
    jquery-ui.min.js
    jquery-ui.structure.css
    jquery-ui.structure.min.css
    jquery-ui.theme.css
    jquery-ui.theme.min.css

3. サイトへ配置

以下のファイルおよびフォルダをサイトへ配置します。ここでは例として /var/www/html/jqdemo/lib へ配置します。

  • jquery-1.11.2.min.js
  • 展開した jquery-ui-1.11.2 から imagesフォルダ、jquery-ui.min.js、jquery-ui.min.css

4. テスト準備

jquery-ui-1.11.2.custom.zip 中にあった index.html に下記の変更を行い、/var/www/html/jqdemo へ配置します。

6 行目
<link href="lib/jquery-ui.min.css" rel="stylesheet">

394-395 行目
<script src="lib/jquery-1.11.2.min.js"></script>
<script src="lib/jquery-ui.min.js"></script>

5. 動作確認
https://www.northwind.mydns.jp/dev/jqdemo/index.html

カテゴリー
jQuery 雑記

jQuery 1.x vs. jQuery 2.x

jQuery を始めて使う場合、jQuery 1.x と jQuery 2.x のどちらをダウンロードすれば良いか?という疑問があるのではないですか?

jQuery ダウンロードサイトを参考にすると、

jQuery 1.x の最新版は 1.11.2 (2015/1/2 現在) です。1.9.0 で大きな変更があり、バージョン 1.9 以前のjQuery をお使いでバージョンアップするには jQuery Migrate Plugin (jQuery 移行プラグイン)を使用することが推奨されています。

jQuery 2.x の最新版は 2.1.3 です。こちらバージョンは jQuery 1.x と同じAPIを提供しているが、IE6, 7, 8 をサポートしていない点が異なります。IE8以前のサポートを考慮する必要がある場合は jQuery 1.x を使用することが推奨されています。

ということで、初めてjQuery を導入される場合、IE8以前をサポートするかどうかです。

ちなみに、当サイトでは、以前にjQuery 1.11.0 へバージョンアップしてを使用しています。

カテゴリー
jqGrid

jqGrid ソートを行ったときにセル入力データが保持されない

別館のjqGrid をローカル配列で使用したインライン編集を行うサンプルで、グリッドの列のソートを行ったときにセルに入力したデータが保持されないという現象がありました。 ==> https://www.northwind.mydns.jp/samples/jqgrid_sample7.php

jqGrid の定義のところで、

scroll:true

オプションを削除すると回避できます。

カテゴリー
jqGrid

jqGrid のデータをCSV形式で出力する方法について再考

こちらにjqGridのデータをCSV出力するサンプルを作りました。

簡単に処理を説明すると、選択したデータを配列としてサーバーへポストして、サーバー上でCSVに変換してクライアントへ出力するだけなんですが、ちょっと問題があります。

jqGrid のセルをフォーマッター(formatter:function(){…}) でセルの値に応じて加工しているとその内容で渡してしまいます。具体的には、たとえば ID 列にリンクを付けるために、フォーマッターで cellvalue を ‘<a href=”xxxx”>id</a>’ というようにリンクつけているような場合、このフォーマッターで処理した値がサーバーにわたりCSV出力されます。

これに対処するため、DBの内容を表示している場合なら、jqGrid にレコードのID値を hidden 列かもしくは加工せず保持しておいて、サーバーへポストするデータとしてはレコードIDのみを渡し、サーバー側でそのレコードIDを使ってクエリしたデータをCSV出力すれば、jqGrid で選択したデータがCSV出力されることになり、こちらの方法の方が良いかなぁと思います。

少し時間がとれたらそちらのサンプルも作成してみます。

以上、備忘録です。

 

カテゴリー
jQuery

jQuery エレメントの存在を確認する方法

ドキュメント中にあるエレメントが存在していたら、その値を取得する処理を jQuery で行うためには $(“#xxxx”).length メソッドを利用します。

// 削除チェックボックスが存在するか?
if ($("#bedeleted").length) {
    // 削除ボタンがチェックされているか?
    if ($("#bedeleted").attr('checked')) {
        ret = window.confirm("xx を削除します。よろしいですか?");
        if (ret) {
        } else {
        }
    }
}

--- 省略 ---
<?php echo '<input type="checkbox" class="checkbox" id="bedeleted" name="bedeleted" > <label>削除する</label>'; ?>

参考: https://docs.jquery.com/Frequently_Asked_Questions#How_do_I_test_whether_an_element_exists.3F