jEasyUI creates RSS reader
In this tutorial, we will create an RSS reader through the jQuery EasyUI framework.
We will use the following plugins:
layout: Create the user interface of the application.
datagrid: Displays a list of RSS feeds.
tree: Display feed channel.
Step 1: Create 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>
Step 2: Data Grid (DataGrid) handle events
Here we have to handle some Events triggered by the user.
$('#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);
}
}
});This example uses the 'onSelect' event to display the content of the feed, and the 'onLoadSuccess' event to select the first row.
Step 3: Tree menu (Tree) handles events
When the tree menu (Tree) data has been loaded, we need to select the first leaf node and call the 'select' method to select the node. Use the 'onSelect' event to get the selected node so we can get the corresponding 'url' value. Finally, we call the 'load' method of the DataGrid to refresh the feed list data.
$('#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);
}
}
});
