HARD DAY'S NIGHT別館

当サイトへお越しいただきありがとうございます。 実務に生かせるような技術・ライブラリを使った簡単なサンプルを公開してゆきます。

jqGrid の行を一行おきに背景色を変える

jqGrid の行を見やすくするために一行おきに背景色を変える方法をご紹介します。

loadComplete イベントで、一行おきに背景色を変えるために、対象行から 'ui-widget-content' クラスを取り除き、新たに設定したいクラスを設定します。

コード


jQuery(document).ready(function()
{
    var mydata = [
        { no:"1", title:"Hotel California",          artist:"The Eagles", category:"ロック(一般)" },
        { no:"2", title:"New Kid In Town",           artist:"The Eagles", category:"ロック(一般)" },
        { no:"3", title:"Life In The Fast Lane",     artist:"The Eagles", category:"ロック(一般)" },
        { no:"4", title:"Wasted Time",               artist:"The Eagles", category:"ロック(一般)" },
        { no:"5", title:"Wasted Time (Reprise)",     artist:"The Eagles", category:"ロック(一般)" },
        { no:"6", title:"Victim Of Love",            artist:"The Eagles", category:"ロック(一般)" },
        { no:"7", title:"Pretty Maids All In A Row", artist:"The Eagles", category:"ロック(一般)" },
        { no:"8", title:"Try And Love Again",        artist:"The Eagles", category:"ロック(一般)" },
        { no:"9", title:"The Last Resort",           artist:"The Eagles", category:"ロック(一般)" },
    ];

    jQuery("#list").jqGrid({
        data: mydata,
        datatype: "local",
        colNames:['No.', 'タイトル', 'アーティスト', 'ジャンル' ],
        colModel:[
            {index:'no', name:'no', width:30, align:'right', sorttype:'integer' },
            {index:'title', name:'title', width:150 },
            {index:'artist', name:'artist', width:100 },
            {index:'category', name:'category', width:100 }
        ],
        height:'auto',
        width: 'auto',
        sortname: 'no',
        sortorder: "ASC",
        loadComplete: function () {
            var rowIDs = jQuery("#list").getDataIDs(); 
            $.each(rowIDs, function (i, item) {
                if (i % 2 == 0) {
                    $('#'+item).removeClass('ui-widget-content');
                    $('#'+item).addClass('testcss');
                }
            });
        },
        caption: 'Hotel California'
    });
});
	

HTMLコード


<style>
    .testcss { border: 1px solid #a6c9e2; background-color: #e6e6fa ; color: #222222; }
</style>

<table id="list">
</table>