Use jQueryeasyUI to create an RSSFeed Reader

@ AuthorYHC in this tutorial, we will create an rss reader using the easyUI framework. to view the DEMO, we will use the following plug-in: layout: To create an application interface. datagrid: displays the rssfeed list. tree: displays the feed channel. step 1: Create Layout [html] & lt; bod... sy

@ Author YHC

In this tutorial, we will create an rss reader using easyUI framework.

 

View DEMO

We will use the following plug-ins:

Layout: Create an application interface.
Datagrid: displays the rss feed list.
Tree: displays the feed channel.

Step 1: Create Layout
[Html]


JQuery EasyUI RSS Reader Demo

Url = "get_feed.php" border = "false" rownumbers = "true"
Fit = "true" fitColumns = "true" singleSelect = "true">


Title
Description
Publish Date

 

JQuery EasyUI RSS Reader Demo

 




Url = "get_feed.php" border = "false" rownumbers = "true"
Fit = "true" fitColumns = "true" singleSelect = "true">
 
 
Title 
Description 
Publish Date 
 
 
 






Step 2: datagrid handles events
Here we want to handle some user-triggered events.

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

$ ('# 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 feed content and the 'onloadsuccess' event to select the first line.

Step 3: Process tree events
When the tree data has been loaded, We need to select the first leaf node, call the 'select' method to select the node, and use the 'onselect' event to obtain the selected node, so we can get the corresponding 'url' value.
In the end, we call the 'load' method of the datagrid to refresh the data in the feed list.
[Javascript]
$ ('# 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.tar get );
}
}
});

$ ('# 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.tar get );
}
}
}); Download EasyUI example:
Easyui-rssreader-demo.zip

 

Author: yhc13429826359