なんか書いたり紹介したりレビューしたり

BMS差分サイトを少し見栄えよくするJQueryプラグイン【IgGrid : シンプルな使い方編】

2014/11/15 00:35 投稿

  • タグ:
  • HTML
  • JSON
  • javascript
というわけで続きました。
今回は前回紹介したInfragistics Ignite UIのigGridを簡単に使ってみたいと思います。

簡単なサンプルを作ってみました。
http://www6.atpages.jp/japancoolfuku/sample/simple.html

以下ソースコードの説明になります。

--------------------------------
<!-- 既存の<table>タグにそのまま適用する場合 -->

<table id="grid_table">
|
|
</table>

・一般的な<table>タグです。htmlべたに書いてる人はおそらくこうやって管理しているはず。

- - - - - - - - - - - - - - - - - - - - -
<script>
// ここでigGridの初期化を行います
$(function () {
$("#grid_table").igGrid({});
});
</script>

・javascriptです。
・"#grid_table"の部分に<table>のidを指定します ( <table id="grid_table"> )。


--------------------------------
<!-- JSON形式からデータを抽出して適用する場合 -->
※JSONとは → http://hakuhin.jp/js/json.html

<table id="grid_JSON"></table>

・JSONファイルにデータがあるので、ここでは「igGridを表示する<table>はここだよ~」
 って宣言するだけになります。
・実際にはページ読み込み時のigGridの初期化によって<tabel>の中身が作成されます。

- - - - - - - - - - - - - - - - - - - - -
<script>
$.getJSON("./sample.json", function (json) {
  …

・"./sample.json"の位置に、読み込みたいJSONファイルのパスを指定します。
・"function (json)"の"json"は読み込んだJSONデータです。igGridの初期化の際、これを指定します。

- - - - - - - - - - - - - - - - - - - - -
$("#grid_JSON").igGrid({
dataSource: json,

・"#grid_JSON"で、既存の<table>タグにそのまま適用する場合と同じく<table>のidを指定します。
・dataSourceに"json"を指定します。
 ”$.getJSON("./sample.json",function (◎){…”の◎の部分と同じ文字列を入力します。

- - - - - - - - - - - - - - - - - - - - -
columns: [
|
|
{
headerText: "DL",
key: "dl",
dataType: "string",
template: '<a href="${dl}" target="_self"><center>LINK</center></a>'
},
|
|

・列の作成です。
・"{}"の並び順で列が構成されます。
・headerTextには列のタイトルを入力します。表示したい文字列を””で囲ってください。
・keyはJSONファイル内で結びついている名前です。JSONファイルはこちら
 ここではそれぞれの列の"dl"の値("#"とか"##"とか)を出力しています。
 「"key": "表示値"」の形式になってるって理解できればOK
・dataType: "string"は現段階ではあまり気にしない。表示値が文字列ですよーって宣言。
・templateはその列に表示するHTML形式を指定します。
 ここではURLを表示するために<a href="${dl}" target="_self">… ってやってます。
 ”${dl}"には表示値が入ります。
(JSONの「"key": "表示値"」の"表示値"の部分。{}の中身には"key"を入れる)



以上簡単な説明でした。
もっと詳しく知りたい!って人は
公式のサンプル集とかigGridの仕様を見てみるのがいいと思います。なかなかハードル高いけど。

次回は列ヘッダクリックによるソート機能とか、もう少し踏み込んだ内容ができたらいいなと思います。

コメント

コメントはまだありません
コメントを書き込むにはログインしてください。

いまブロマガで人気の記事