表を彩るjavascript「jQuery Grid Plugin」

テーブルで作成した表は項目が多くなると見づらくなります。
また横幅が限られる環境では2行に渡ってしまったり、フォントサイズを小さくしなければいけません。
jQuery Grid Pluginは項目の幅をスライドできたり、行ごとの色をスタライプ状に変更したり、クリック/ダブルクリック時にも色を変化させられます。
jGrid

使用方法
jQuery Grid Pluginからjquery.grid.core.jsをjquery.jsをダウンロードします。
<script src="http://yourdomain/jquery.js" type="text/javascript"></script>
<script src="http://yourdomain/jquery.grid.core.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(function($){
var t=$("#id名");
t.grid({
navigate:{
maintainSelection:false
},
scroll:{
width:"600", //横幅
height:"300", //高さ
colWidths:[200,200,200]  //項目の幅
},
stripe:true, //ストライプ
columnResize:true //項目のスライド
});
});
</script>

またストライプの色やクリック時の色はCSSで指定します。
.selected{background-color:limegreen !important;}
.activated{background-color:tomato !important;}
.even {background-color:#efefef}
.odd {background-color:#cde}
#test thead tr {
background-color: #EBEADB !important;
border: 1px solid #CBC7B8 !important;
text-align: left !important;
font-weight: normal !important;
}
#test tfoot tr {
background-color: #EBEADB !important;
border: 1px solid #CBC7B8 !important;
text-align: left !important;
font-weight: normal !important;
}
#test{
border-left: 1px solid #CBC7B8;
border-right: 1px solid #CBC7B8;
}

最後にtableで作成した表にid名を付与すれば完成です。
表を彩るjavascript「jQuery Grid Plugin」サンプル

sponsors

「表を彩るjavascript「jQuery Grid Plugin」」をシェアする

記事作成:
記事URL:

TOP > > > 表を彩るjavascript「jQuery Grid Plugin」