jQuery EasyUI アプリ -RSSフィードリーダーの作成

このチュートリアルでは、jQuery EasyUI フレームワークを使用して RSS リーダーを作成します。

以下のプラグインを使用します:

• layout：アプリケーションのユーザーインターフェースを作成します。
• datagrid：RSSフィードのリストを表示します。
• tree：フィードチャンネルを表示します。

ステップ 1：レイアウト（Layout）を作成する

<body class="easyui-layout">
    <div region="north" border="false" class="rtitle">
        jQuery EasyUI RSS Reader Demo
    </div>
    <div region="west" title="Channels Tree" split="true" border="false" style="width:200px;background:#EAFDFF;">
        <ul id="t-channels" url="data/channels.json"></ul>
    </div>
    <div region="center" border="false">
        <div class="easyui-layout" fit="true">
            <div region="north" split="true" border="false" style="height:200px">
                <table id="dg" 
                        url="get_feed.php" border="false" rownumbers="true"
                        fit="true" fitColumns="true" singleSelect="true">
                    <thead>
                        <tr>
                            <th field="title" width="100">Title</th>
                            <th field="description" width="200">Description</th>
                            <th field="pubdate" width="80">Publish Date</th>
                        </tr>
                    </thead>
                </table>
            </div>
            <div region="center" border="false" style="overflow:hidden">
                <iframe id="cc" scrolling="auto" frameborder="0" style="width:100%;height:100%"></iframe>
            </div>
        </div>
    </div>
</body>

ステップ 2：データグリッド（DataGrid）のイベント処理

ここでは、ユーザーによってトリガーされるいくつかのイベントを処理します。

$('#dg').datagrid({
    onSelect: function(index,row){
        $('#cc').attr('src', row.link);
    },
    onLoadSuccess:function(){
        var rows = $(this).datagrid('getRows');
        if (rows.length){
            $(this).datagrid('selectRow',0);
        }
    }
});

この例では、フィードの内容を表示するために 'onSelect' イベントを使用し、最初の行を選択するために 'onLoadSuccess' イベントを使用します。

ステップ 3：ツリーメニュー（Tree）のイベント処理

ツリーメニュー（Tree）のデータがロードされたら、最初のリーフノードを選択する必要があります。'select' メソッドを呼び出してそのノードを選択します。 'onSelect' イベントを使用して選択されたノードを取得し、対応する 'url' 値を取得できます。 最後に、データグリッド（DataGrid）の 'load' メソッドを呼び出してフィードリストデータを更新します。

$('#t-channels').tree({
    onSelect: function(node){
        var url = node.attributes.url;
        $('#dg').datagrid('load',{
            url: url
        });
    },
    onLoadSuccess:function(node,data){
        if (data.length){
            var id = data[0].children[0].children[0].id;
            var n = $(this).tree('find', id);
            $(this).tree('select', n.target);
        }
    }
});

jQuery EasyUI サンプルをダウンロード

jeasyui-app-rssreader.zip