l'application jQuery EasyUI - Créer Lecteur de flux RSS

Précédent: applications jQuery EasyUI - créant un détail CRUD formulaire de demande de modification de la ligne de déploiement

Suivant: jQuery EasyUI drop - glisser-déposer de base

Dans ce tutoriel, nous allons créer un lecteur RSS par framework jQuery EasyUI.

Nous allons utiliser les plug-ins suivants:

mise en page: Créez des applications d'interface utilisateur.
datagrid: Affichage RSS Liste des aliments du bétail.
arbre: canal d'alimentation d'affichage.

Étape 1: Créer la mise en page (mise en page)

& Lt; classe body = "easyui-layout" & gt;
	<Région Div = "nord" border = "false" class = "rtitle">
		jQuery EasyUI Lecteur RSS Demo
	</ Div>
	<Région Div = "ouest" title = "Canaux Arbre" split = "true" border = le style "false" = "width: 200px; fond: #EAFDFF;">
		<Ul id = "t-canaux" url = "data / channels.json"> </ ul>
	</ Div>
	<Région Div = "center" border = "false">
		<Div class = "easyui-layout" adapter = "true">
			<Région Div = "nord" split = "true" border = le style "false" = "height: 200px">
				<Table id = "dg" 
						url = "get_feed.php" border = rownumbers "faux" = "true"
						ajustement = "true" fitColumns = "true" singleSelect = "true">
					<Thead>
						<Tr>
							<Field Th = "title" width = "100"> Titre </ th>
							<Field Th = "description" width = "200"> Description </ th>
							<Th field = "pubdate" width = "80"> Date de publication </ th>
						</ Tr>
					</ Thead>
				</ Table>
			</ Div>
			<Région Div = "center" border = "false" style = "overflow: hidden">
				<Iframe id = "cc" scrolling = "auto" frameborder = "0" style = "width: 100%; hauteur: 100%"> </ iframe>
			</ Div>
		</ Div>
	</ Div>
& Lt; / body & gt;

Étape 2: Grille de données (DataGrid) pour gérer les événements

Ici, nous devons faire face à certains des événements déclenchés par l'utilisateur.

$ ( '# Dg'). Datagrid ({
	onSelect: function (index, ligne) {
		. $ ( '# Cc') attr ( 'src', row.link);
	},
	onLoadSuccess: function () {
		lignes var = $ (this) .datagrid ( 'de GetRows');
		if (rows.length) {
			$ (Ce) .datagrid ( 'selectRow', 0);
		}
	}
});

Cet exemple utilise l'événement 'onSelect' pour afficher le contenu de l'alimentation, pour sélectionner la première utilisation de la ligne de l'événement 'onLoadSuccess de.

Étape 3: L'arbre de menu (Arbre) événements de traitement

Lorsque l'arborescence des menus (Arbre) données ont été chargées, nous devons sélectionner le premier noeud feuille, appelez la méthode 'select' pour sélectionner le nœud. événement Utilisez 'onSelect' pour obtenir le noeud sélectionné, de sorte que nous pouvons obtenir 'url' correspondant à la valeur. Enfin, nous appelons la grille de données (DataGrid) la méthode «de charge» pour actualiser la liste des données de flux.

$ ( '# T-canaux »). Arbre ({
	onSelect: function (noeud) {
		var url = node.attributes.url;
		$ ( '# Dg'). Datagrid ( «charge», {
			url: url
		});
	},
	onLoadSuccess: function (noeud, données) {
		if (data.Length) {
			var id = data [0] .children [0] .children [0] .id;
			var n = $ (this) .tree ( «trouver», id);
			$ (Ce) .tree ( 'select', n.target);
		}
	}
});