Easily learn jQuery plug-in EasyUI EasyUI creates RSS Feed reader

Easily learn jQuery plug-in EasyUI EasyUI creates RSS Feed reader_jquery

WBOY

Release： 2016-05-16 15:28:37

Original

1312 people have browsed it

The example in this article describes the creation of an RSS reader through the jQuery EasyUI framework and shares it with everyone for your reference. The details are as follows:
The screenshot of the running effect is as follows:

We will use the following plugins:
layout: Creates the user interface of the application.
datagrid: Display RSS Feed list.
tree: Show 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>

Copy after login

Step 2: DataGrid handles 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);
 }
 }
});

Copy after login

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);
 }
 }
});

Copy after login

The above is the relevant tutorial on creating an RSS Feed reader with EasyUI. I hope it will be helpful to everyone's learning.