1. Home
  2. aplicación de jQuery EasyUI - Crear RSS Feed Reader

El mejor tutorial de aplicación de jQuery EasyUI - Crear RSS Feed Reader en 2024. En este tutorial podrás aprender Descargar ejemplos de jQuery EasyUI,

aplicación de jQuery EasyUI - Crear RSS Feed Reader

En este tutorial, vamos a crear un lector de RSS por framework jQuery EasyUI.

Vamos a utilizar los siguientes plug-ins:

  • Presentación: Crear una aplicación de interfaz de usuario.
  • cuadrícula de datos: Pantalla RSS RSS lista.
  • árbol: Pantalla canal de alimentación.

Paso 1: Crear una presentación (Diseño) 

& Lt; body class = "easyui-diseño" & gt;
	<Región Div = "norte" border = "false" class = "rtitle">
		jQuery EasyUI lector de RSS Demostración
	</ Div>
	<Región Div = split = "true" border = estilo de "falsa" "oeste" title = "Canales árbol" = "width: 200px; fondo: #EAFDFF;">
		<Ul id = "t-canales" url = "data / channels.json"> </ ul>
	</ Div>
	<Región Div = "center" border = "true">
		<Div class = "easyui-diseño" encaja = "true">
			<Región Div = "norte" split = "true" border = estilo de "falsa" = "height: 200px">
				<Tabla id = "dg" 
						url = "" border = get_feed.php rownumbers "falsas" = "true"
						fit = "true" fitColumns = "true" singleSelect = "true">
					<Culata en T>
						<Tr>
							<= Th campo "título" width = "100"> Título </ th>
							<Campo Th = "Descripción" width = "200"> Descripción </ th>
							<= Th Campo "pubdate" width = "80"> Fecha de publicación </ th>
						</ Tr>
					</ Culata en T>
				</ Table>
			</ Div>
			<Región Div = "center" border = "false" style = "overflow: hidden">
				<Iframe id = "cc" scrolling = frameborder "Auto" = "0" style = "width: 100%; altura: 100%"> </ iframe>
			</ Div>
		</ Div>
	</ Div>
& Lt; / body & gt;

Paso 2: Data Grid (cuadrícula de datos) para controlar los eventos

Aquí tenemos que hacer frente a algunos de los eventos activados por el usuario. 

$ ( '# Dg'). Datagrid ({
	onSelect: function (índice, fila) {
		. $ ( '# Cc') attr ( 'src', row.link);
	},
	onLoadSuccess: function () {
		filas var = $ (this) .datagrid ( ''); GetRows
		si (rows.length) {
			$ (Este) .datagrid ( 'selectRow', 0);
		}
	}
});

En este ejemplo se utiliza evento 'onSelect' para mostrar el contenido de la alimentación, para seleccionar el primer uso de la línea de eventos 'onLoadSuccess'.

Paso 3: El árbol de menús (Árbol) de procesamiento de eventos

Cuando se ha cargado los datos de los menús (árbol), hay que seleccionar el primer nodo hoja, llame al método "seleccionar" para seleccionar el nodo. Uso caso 'onSelect' para obtener el nodo seleccionado, por lo que podemos conseguir 'url' correspondiente al valor. Por último, llamamos al método "carga" para actualizar la lista de datos del canal de cuadrícula de datos (DataGrid). 

$ ( '# canales T'). Árbol ({
	onSelect: la función (nodo) {
		var url = node.attributes.url;
		$ ( '# Dg'). Datagrid ( "carga", {
			url: url
		});
	},
	onLoadSuccess: function (nodo, datos) {
		si (data.length) {
			var id = datos [0] .children [0] .children [0] .id;
			var n = $ (this) .tree ( "encontrar", id);
			$ (Este) .tree ( 'select', n.target);
		}
	}
});

Descargar ejemplos de jQuery EasyUI

jeasyui-app-rssreader.zip

Hot Tutorials

Contact US

aplicación de jQuery EasyUI - Crear RSS Feed Reader
10/30