jqGridを行毎に色をつける

Javascript jqGrid

画面みたいに表を見やすくするために、
1行おきに色を付けたいときってありますよね。

<style>
.ui-row-even {
    background: LemonChiffon;
}
</style>

<script type="text/javascript">
$(function() {

    $('#grid').jqGrid({
        'colModel': 略
        'gridComplete': function () {
            $('tbody > tr:even', this).addClass('ui-row-even');
        }
    });
});
</script>

jqGridで文字のサイズを変更する

Javascript jqGrid

画面右上にフォントサイズを変更できるサイトってありますよね。
jqGridで同じようなことをする方法。

※ヘッダやページャのheightを調節しないと
　文字が見切れちゃうので注意してください。

$(function () {
    var changeFontSize = function (size)
    {
        $('div.ui-jqgrid').css('font-size', size);
        $('table.ui-jqgrid-htable th').css('height', size)
            .children('div').css('height', size);
        $('div.ui-jqgrid-pager').css('height', size);
    };

    // エレメントを作成
    $box_fontsize = $(document.createElement('div'));
    $f_small = $(document.createElement('a'));
    $f_medium = $(document.createElement('a'));
    $f_large = $(document.createElement('a'));

    // 設定
    $f_small.attr('href', '#small').text('小')
            .bind('click', function(){changeFontSize('0.8em')});
    $f_medium.attr('href', '#medium').text('中')
            .bind('click', function(){changeFontSize('1em')});
    $f_large.attr('href', '#large').text('大')
            .bind('click', function(){changeFontSize('1.6em')});

    $box_fontsize.append($f_small).append($f_medium).append($f_large)
                 .prependTo('body');

custom formatterとunformatを使う(jqGrid.colModel)

Javascript jqGrid

参考

wiki:custom_formatter -jqGrid Wiki

概要

データベースからPHP経由等で取得したデータをフォーマットして表示する。
たとえば、http://d.hatena.ne.jp/というデータをリンクにして表示したいとか、
0ならA、1ならBと表示したいときに使う。

続きを読む

ブログからのリンクを簡単に作る方法

Javascript

ブログからのリンクを作るときに、URLとページタイトルを
取得するのってめんどうだよね。

そんなあなたに！
ブックマークレットという便利なわざがあるらしい。

javascript:function a(){clipboardData.setData('Text','<a href="'+location.href+'" rel="nofollow">'+document.title+'</a>');}a();


上記のコードをお気に入りに入れて、
リンクしたいページでお気に入りからクリックすると、
そのページへのリンク用タグをクリップボードに保存してくれます。

jqGridで表示されているデータをCSVとかにエクスポートする方法（JSON編）

Javascript jqGrid

概要

  • datatypeがjsonの場合です。
  • $('#grid').jqGrid('getGridParam', 'postData')が検索(searchGrid)や更新(reloadGrid)時にサーバー（url)へ送信されるデータです。

目的

jqGridでmultipleSearch:trueのときに、複雑な条件を設定して、並べ替えなんかもしちゃっているときの絞り込んだデータだけをエクスポートしたい。



方法

$(function ()
{
    /**
     * ./export.php
     *
     * export.phpはjqGridによる検索等のパラメータを受け入れ、
     * csvファイルを出力するものとする
     *
    ***/

    var opt = {};
    $('#list').jqGrid(opt);

    var $e = $(document.createElement('a'))
        .attr('href', '#')
        .text('エクスポート')
        .appendTo('body')
        .bind('click', function ()
        {
            var $t = $('#list');

            var pd = $t.jqGrid('getGridParam', 'postData');
            pd = $.param(pd);

            $(this).attr('href', 'export.php?' + pd);
        });

});

ちなみに

そもそもjqGridに渡すurlのパラメータに_export=csvが含まれる場合はCSV出力するようにしておいて、
postdataに入れてリロードしちゃうのはどうだろう。ってだめか。
javascriptからPOSTした返り値でダウンロードダイアログを出す方法を探さねば。

$('#list').jqGrid('setGridParam', {'postData': { '_export' : 'csv' }})
          .trigger('reloadGrid')
          .jqGrid('setGridParam', {'postData': { '_export' : null }});

最速の花粉症！？

寝て起きたらのどの上のほうがかぴかぴになっていて痛い。


花粉症だ！



と、思ったら風邪でした。なんという鼻かぜ。
皆様も急に寒くなったのでお気をつけあれ。