タグ別アーカイブ: data

data の取得方法

今回も備忘録的な内容です。
内容は地味なんですが一応記載しておきます。

簡単な話 Table タグを利用して表を作っているんですが必要項目が結構あったため、
普段はあまり利用しないのですがdata を使った対応を行いました。

・・・件数が多くなると結構遅くなるんですね。
まぁ、これは data に限ったことではないですし、色々な意見の中には data 自体を
利用すること自体があまり良くないといった話もあります。

本当は他の方法がいいのかもしれませんが、既存のシステムを大きく変えたくはありません。
ということで少しでも改善できればと行ったのが以下の内容です。
なお、今回は取得のみで設定は省いています。
設定処理も含めて変更するのであれば一式で別方式にするほうが良いかなと思います。

■ 既存の書き方(取得方法)

hoge = $(element).data(key);

まぁ、一般的な書き方ではないかなと思います。
data 内容は特に問題がなければ、私もこの方法にて取得していました。

■ 変更した書き方(取得)

jObj = $(element);
hoge = $.data(jObj, key);

今回変更した方法は上記の内容です。
このような取得方法は初めてでしたが、調べるとかなり昔から使用できたようです。
また、一旦 object 化してから扱う必要があるようです。
もとより、高速化の都合上そのつもりだったため、特に問題はありませんが・・・

実際は元ソースの組み方によるのでしょうが、数値では差はあっても体感速度に関しては、
変化があるかに関しては微妙でした。
 ※今後、さらに件数が増えれば話は別でしょうが・・・

今回はその他の処理も含みで、速度改善に関してご了承頂けたので安心しました。
まぁ、速度改善に関しては PHP の絡みもあり、一概には言えませんがシステム的に
data 形式にて処理を扱う場合には注意したいと思います。

なお、Demo としては体感でわかるレベルでも無いため Sample プログラムはありません(笑)

この投稿は役に立ちましたか? 役に立った 役に立たなかった 0 人中 0 人がこの 投稿 は役に立ったと言っています。

要素へのデータ紐づけ

今回は要素へのデータ紐づけに関してです。

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <script src="./jquery-1.9.1.min_.js"></script>   

        <script type="text/javascript"><!--

            $(function(){

                $('#d_set').click(function() {
                    $('#disp_data').data('set_value', $('#input_data').val());
                    $('#input_data').val('')
                })
                
                $('#d_add').click(function() {
                    $('#disp_data').data('set_value', $('#disp_data').data('set_value') + ' ' + $('#input_data').val());
                    $('#input_data').val('')
                })

                $('#d_remove').click(function() {
                    $('#disp_data').removeData('set_value');
                    alert('Data Remove OK!');
                })

                $('#d_disp').click(function() {
                    $('#disp_data').empty().text($('#disp_data').data('set_value'));
                })

            });

        --></script>

        <link rel="stylesheet" href="reset.css" type="text/css">
        <style type="text/css"><!--

            div {
                margin       : 10px;
            }

            button {
                margin-right : 5px;
            }

        --></style>

    </head>
    <body>

        <div id="main_area">
            <div>
                <h1>Data Input</h1>
                <input id="input_data" />
                <button id="d_set">Data Set</button>
                <button id="d_add">Data Add</button>
            </div>
            <div>
                <h1>Data Disp</h1>
                <button id="d_disp">Data Disp</button>
            </div>
            <div id="disp_data"></div>
            <div>
                <h1>Data Remove</h1>
                <button id="d_remove">Data Remove </button>
            </div>
        </div>

    </body>
</html>

sample

sample の入力欄に文字を入力して「Data Set」の button をクリックすることで
data を object のに紐づけることができます。

その時点では紐づけした data は表示されていませんが「Data Disp」の button を
click することで紐づけされた data を表示されることができます。

今回の内容は個人的には少し嬉しかったりします。
今まではとりあえず attr などで適当な名前を付けて設定していましたが
余り綺麗ではないと感じていました。

今回からは変な値を attr する必要も無いので安心できます。
ちなみに、配列でのデータの登録も出来るので非常に安心です。
ちょっと気になるのは、実際はどこに保存されているのかということでしょうか・・・

jQuery はここからダウンロードしてください。

この投稿は役に立ちましたか? 役に立った 役に立たなかった 0 人中 0 人がこの 投稿 は役に立ったと言っています。