Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

jQueryを利用した軽量・高機能なクライアントサイド実装!

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加
2011/07/12 14:00
目次

クライアントサイドでデータ管理するigDataSourceと高機能なグリッドigGrid

 igDataSourceは、igGridコントロールなどのデータバインドコントロールとデータソースの間で動作するコンポーネントです。igDataSourceがサポートするソースは、以下のとおりです。

  • Webサービス全般(oData、WCFなど)
  • ローカルデータ(JSON、XML、HTMLテーブル、JavaScript配列など)
  • 関数の戻り値

 igGridはigDataSourceなどのデータソースをもとに仮想化やページング、ソートや、フィルター機能をクライアントサイドで実現する高機能で軽快に動作するグリッドコンポーネントです。それぞれのコンポーネントの関係は図2のようになります。

図2 igDataSourceとigGrid
図2 igDataSourceとigGrid

 なお、igDataSourceとigGridを使用することで、図3~6のようなグリッドが簡単に作成できます。

図3 igDataSourceとigGrid実行直後
図3 igDataSourceとigGrid実行直後

 フィルターの方法も、ドロップダウンから選択できます(図4)。

図4 igDataSourceとigGrid
図4 igDataSourceとigGrid

 値を入力することでフィルター結果がすぐに反映されます(図5)。

図5 igDataSourceとigGrid
図5 igDataSourceとigGrid

 行選択やページング機能も、すべてクライアントサイドで動作します(図6)。

図6 igDataSourceとigGrid
図6 igDataSourceとigGrid

 データは、oDataとして提供されているアメリカのオンラインDVDレンタル会社Netflixのデータを使用しています。

 それでは、サンプル作成について解説します。コードは以下の通りです。

igDataSourceとigGridによるサンプル例(igDataSource&igGrid.htm)
<!-- (1)CSSとJavaScriptの参照 -->
<link type="text/css" href="jquery.ui.custom.min.css" rel="stylesheet" />
<link type="text/css" href="ig.ui.min.css" rel="stylesheet" /> 

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.4.4.js" ></script> 
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/jquery-ui.js"></script>  
<script type="text/javascript" src="jquery.tmpl.js" ></script>
<script type="text/javascript" src="ig.ui.min.js" ></script>
<script type="text/javascript">
    
    var ds,
        oDataSchema,
        url = "http://odata.netflix.com/Catalog/Titles?$format=json&$callback=?&$top=500",

    // (2)データスキーマの作成
    oDataSchema = new $.ig.DataSchema("json", { fields: [
        { name: "Name" },
        { name: "ReleaseYear" },
        { name: "Synopsis"}],
        searchField: "d"
    });

    // (3)データソースのオブジェクト生成
    ds = new $.ig.DataSource({ type: "remoteUrl", dataSource: url, schema: oDataSchema, responseDataKey: "d", responseDataType: "jsonp" }).dataBind();

    $(function(){
        // (4)各種設定やデータソースを設定し、#iggridにグリッドを生成
        $("#iggrid").igGrid({
            caption : '映画タイトルと概要',
            columns: [
                { headerText: "映画タイトル", key: "Name", width:"200px" },
                { headerText: "公開年", key: "ReleaseYear", width:"70px" },
                { headerText: "映画のあらすじ", key: "Synopsis", width:"700px" },
            ],
            virtualization: true,
            autoGenerateColumns: false,
            dataSource: ds,
            scrollbars: true,
            height: '400px',
            features: [
                {
                    name: 'Paging',
                    type: 'local',
                    pageSize: 50
                },
                {
                    name: 'Sorting'
                },
                {
                    name: 'Selection'
                },
                {
                    name: 'Filtering',
                }
            ]
            });
    });
</script>
</head>
<body>
<h1>igDataSource & igGridサンプル</h1>
<div class="sampleContents">
<table id="iggrid">
</table>

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • WINGSプロジェクト ナオキ(ナオキ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XMLD...

バックナンバー

連載:Infragistics NetAdvantageチュートリアル

もっと読む

All contents copyright © 2005-2019 Shoeisha Co., Ltd. All rights reserved. ver.1.5