【Javascript】jQueryプラグインjqGridの紹介
こんにちわ!
てんとう虫@infiniです(`・ω・´)
今回は前回のjsTreeに続き
jqGridの紹介をしてみたいと思います!
概要はjsTreeと同じく
HTML,XML,jsonのデータを用いてグリッドが生成できるプラグインです!
使用方法
では実際に使用してみたいと思います!
まずはHTMLに各種設定ファイルを読ませます。
<script type="text/javascript" src="jQuery.js"></script> <link rel="stylesheet" type="text/css" href="jquery-ui-1.8.16.custom/css/ui-lightness/jquery-ui-1.8.16.custom.css" /> <link rel="stylesheet" type="text/css" href="jquery.jqGrid-4.1.2/css/ui.jqgrid.css" /> <script type="text/javascript" src="jquery.jqGrid-4.1.2/js/jquery.jqGrid.min.js" ></script>
そしてJavaScriptも書きます。
解説はコメントにて
$(document).ready(function(){ var mydata = [ {code:"001", hira:"あああ", kana:"アアア"}, {code:"002", hira:"いいい", kana:"イイイ"}, {code:"003", hira:"ううう", kana:"ウウウ"}, {code:"004", hira:"えええ", kana:"エエエ"}, {code:"005", hira:"おおお", kana:"オオオ"}, {code:"006", hira:"かかか", kana:"カカカ"}, ]; $("#list").jqGrid({ data : mydata, //上記で作成したデータ datatype: 'local', //xmlでもjsonでもないのでlocal caption : '文字一覧', //表の題名 colNames: ['コード','ひらがな','カタカナ'], //各項目の表示名 colModel: [ {index:'code', name:'code'}, //indexは添字(ソート時などに見られる)。nameに表示したいデータ名を入れる {index:'hira', name:'hira'}, {index:'kana', name:'kana'}, ], sortname : "code", //デフォルトでcodeをみてソートし表示する sortorder : "ASC" //デフォルトで昇順にする }); });
XMLのデータから生成
XMLのデータを用意します。
<root> <Items> <content> <code>001</code> <fruits>apple</fruits> </content> <content> <code>002</code> <fruits>orange</fruits> </content> <content> <code>003</code> <fruits>remon</fruits> </content> </Items> </root>
そしてJavaScriptも
$(document).ready(function() { $('#list').jqGrid({ url : 'ahaha.xml', //読み込ませるxmlファイル名を指定 datatype : 'xml', //xmlファイルを読ませるのでxmlに caption : '果物一覧', colNames : [ 'code', 'fruit'], colModel : [ { name : 'code', index : 'code', xmlmap : 'code' }, { name : 'fruits', index : 'fruits', xmlmap : 'fruits' }, ], xmlReader : { root : 'Items', //xmlファイルのroot要素 row : 'content', //xmlファイルのrow要素 repeatitems : false //オブジェクトの配列をデータとして受け取る }, }); });
ちゃんとXMLのデータを使用することが出来ました♪
サブグリッド生成
次にサブグリッドというグリッドの生成を行います。
サブグリッドはグリッドの中にグリッドが入っているやつです。
グリッドの中で簡単なツリーみたいなのが作成できるのです。
先ほど作成した果物一覧の中にサブグリッドを作成してみます。
上記のコードのxmlReaderの項目の次に
続けて以下のプロパティを書きます。
subGrid : true, //サブグリッドを使用する subGridRowExpanded: function(subgrid_id, row_id) { var subgrid_table_id; subgrid_table_id = subgrid_id + "_t"; $("#" + subgrid_id).html("<table id='" + subgrid_table_id + "'></table>"); //サブグリッドのテーブルを作成 $("#" + subgrid_table_id).jqGrid( { //普通のグリッドと同じようにプロパティを設定 height : 80, url : 'Detail.xml', datatype : 'xml', colNames : [ 'color', 'size'], colModel : [ { name : 'color', index : 'color', xmlmap : 'color' }, { name : 'size', index : 'size', xmlmap : 'size' }, ], xmlReader : { root : 'Items', row : 'content', repeatitems : false }, });
とても簡単に生成することが出来ました♪
グルーピング生成
最後にグルーピングという機能を紹介して終わりたいと思います。
グルーピングとは
グリッドの要素を勝手にソートし、項目ごとにグループ分けしてくれます
とりあえず実際に実装してみます。
$(document).ready(function() { var mydata = [ {name:"りんご", place:"青森", price:"120", num:"168050"}, {name:"みかん", place:"和歌山", price:"30", num:"103500"}, {name:"ぶどう", place:"山梨", price:"300", num:"103270"}, {name:"みかん", place:"愛媛", price:"80", num:"107310"}, {name:"ぶどう", place:"長野", price:"350", num:"165820"}, {name:"りんご", place:"岩手", price:"200", num:"101740"}, {name:"ぶどう", place:"山形", price:"280", num:"105260"}, {name:"りんご", place:"長野", price:"100", num:"134260"}, {name:"みかん", place:"静岡", price:"100", num:"197310"}, ]; $('#list').jqGrid({ data : mydata, datatype : 'local', colNames : [ '名前', '生産地', '値段','生産量'], colModel : [ { name : 'name', index : 'name',summaryType:'count', summaryTpl : '({0}) total'}, //summaryType:'count'で項目数をカウント { name : 'place', index : 'place'}, { name : 'price', index : 'Price',summaryType: 'avg'}, //summaryType: 'avg'で項目の平均を算出 { name : 'num',index : 'num',summaryType: 'sum'}, //summaryType: 'sum'で項目の合計を算出 ], caption : 'fruitGrid', height : 'auto', //データの量に合わせた表の高さにする grouping : true, //グルーピングを使用する groupingView: { //グルーピングの設定 groupField : ['name'], //グループ化したい項目 groupText : ['<b>{0}</b>'], //グループ化した項目の表示名 groupOrder : ['asc'], //昇順 groupSummary : [true] //サマリータイプを使用する } }); });
これを実行します。
きれいにグルーピング化することができました(^o^)
平均や合計なども出せるのでとても便利です★
基本的な部分しか紹介は出来ていませんが
何かのお役に立てるとうれしいです。
これからも少しずついろんな機能について行進して行こうと思いますので
ぜひよろしくお願いいたします!
てんとう虫@infiniでした〜(`・ω・´)