Learn how to create a RSSFeed reader with the jQuery plug-in EasyUIEasyUI

This article helps you easily learn the jQuery plug-in EasyUI. We will create an RSS reader through the jQueryEasyUI framework, if you are interested, you can refer to the example in this article to create an RSS reader through the jQuery EasyUI framework and share it with you for your reference. The details are as follows:
The running effect is as follows:

We will use the following plug-ins:
Layout:Create an application user interface.
Datagrid:Displays the RSS Feed list.
Tree:Displays the feed channel.
Step 1: Create a Layout (Layout)

 
 jQuery EasyUI RSS Reader Demo 
 
 
 
 
 
 
 
  
  
 
 
   
  
  
 
   
 
    
Title
 
    
Description
 
    
Publish Date
 
   
 
  
  
 
 
  
  
    
 
 

Step 2: Data Grid handles events

Here we want to handle some user-triggered events.

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

In this example, the 'onselect' event is used to display the feed content, and the 'onloadsuccess' event is used to select the first line.
Step 3: Process events using a Tree

When the 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 obtain the selected node, so that we can obtain the corresponding 'url' value. Finally, we call the 'load' method of the data grid to refresh the data in the feed list.

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

The above is a tutorial on how to create an RSS Feed reader on EasyUI. I hope it will be helpful to you.