Apprenez facilement le plug-in jQuery EasyUI EasyUI crée un flux RSS reader

Apprenez facilement le plug-in jQuery EasyUI EasyUI crée un flux RSS reader_jquery

WBOY

Libérer： 2016-05-16 15:28:37

original

1277 Les gens l'ont consulté

L'exemple de cet article décrit la création d'un lecteur RSS via le framework jQuery EasyUI et le partage avec tout le monde pour votre référence. Les détails sont les suivants :
La capture d'écran de l'effet en cours d'exécution est la suivante :

Nous utiliserons les plugins suivants :
layout : Crée l'interface utilisateur de l'application.
Grille de données : Afficher la liste des flux RSS.
arborescence : Afficher le canal de flux.
Étape 1 : Créer une mise en page

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

Copier après la connexion

Étape 2 : DataGrid gère les événements

Ici, nous devons gérer certains événements déclenchés par l'utilisateur.

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

Copier après la connexion

Cet exemple utilise l'événement 'onSelect' pour afficher le contenu du flux, et l'événement 'onLoadSuccess' pour sélectionner la première ligne.
Étape 3 : Le menu Arbre (Tree) gère les événements

Lorsque les données du menu arborescent (Tree) ont été chargées, nous devons sélectionner le premier nœud feuille et appeler la méthode 'select' pour sélectionner le nœud. Utilisez l'événement 'onSelect' pour obtenir le nœud sélectionné afin que nous puissions obtenir la valeur 'url' correspondante. Enfin, nous appelons la méthode 'load' du DataGrid pour actualiser les données de la liste de flux.

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

Copier après la connexion

Ce qui précède est le didacticiel pertinent sur la création d'un lecteur de flux RSS avec EasyUI. J'espère qu'il sera utile à l'apprentissage de chacun.