jQuery EasyUI使用教程之创建一个RSS阅读器

<jQuery EasyUI最新版下载>

在本文中，我们将使用jQuery EasyUI框架创建一个RSS阅读器。

查看演示

我们将使用以下插件：

• layout：创建应用程序的用户界面
• datagrid：显示RSS Feed列表
• tree：显示Feed频道

Step 1：创建布局

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

< 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 >

Step 2：处理数据网格的事件

在这里，我们需要处理一些由用户触发的事件。

1 2 3 4 5 6 7 8 9 10 11

$( '#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'事件来显示Feed的内容，同时调用'onLoadSuccess'事件来选择第一行。

Step 3：处理tree的事件

当tree数据被加载时，我们需要选择第一个子节点，调用'select'方法来选择该节点。使用'onSelect'事件来获得被选择的节点，这样就能得到对应的'url'值。最后，我们调用数据网格的'load'方法来刷新Feed列表。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

$( '#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); } } });

下载该EasyUI示例：jeasyui-app-rssreader.zip