aplicação jQuery EasyUI - Criar RSS Feed Reader

Neste tutorial, vamos criar um leitor de RSS por framework jQuery EasyUI.

Usaremos os seguintes plug-ins:

• disposição: Crie um aplicações de interface de usuário.
• datagrid: lista de alimentação Exibição RSS.
• árvore: exibição do canal de alimentação.

Passo 1: Criar layout (Layout)

& Lt; classe de corpo = "layout easyui" & gt;
	<Region Div = "norte" border = "false" class = "rtitle">
		jQuery EasyUI RSS Reader Demonstração
	</ Div>
	<Region Div = "oeste" title = "Canais Árvore" split = "true" border = estilo "false" = "width: 200px; background: #EAFDFF;">
		<Ul id = "t-canais" url = "Dados / channels.json"> </ ul>
	</ Div>
	<Region Div = "center" border = "false">
		<Div class = "easyui-disposição" encaixar = "true">
			<Region Div = "norte" 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>
							<Field Th = "título" width = "100"> Título </ th>
							<Field Th = "description" width = "200"> Descrição </ th>
							<Th campo = "pubdate" width = "80"> Data de publicação </ th>
						</ Tr>
					</ Thead>
				</ Table>
			</ Div>
			<Region Div = "center" border = "false" style = "overflow: hidden">
				<Iframe id = "cc" scrolling = "auto" frameborder = "0" style = "width: 100%; height: 100%"> </ iframe>
			</ Div>
		</ Div>
	</ Div>
& Lt; / body & gt;

Passo 2: Data Grid (DataGrid) para lidar com eventos

Aqui nós temos que lidar com alguns dos eventos desencadeados pelo usuário.

$ ( "# DG»). Datagrid ({
	onSelect: function (índice, row) {
		. $ ( '# Cc') attr ( 'src', row.link);
	},
	onLoadSuccess: function () {
		var linhas = $ (this) .datagrid ( 'getRows');
		Se (rows.length) {
			$ (Este) .datagrid ( 'SelectRow', 0);
		}
	}
});

Este exemplo usa o evento 'onSelect' para exibir o conteúdo da alimentação, para selecionar o primeiro uso linha de evento 'onLoadSuccess'.

Passo 3: A árvore do menu (árvore) eventos de processamento

Quando os dados de árvore de menu (árvore) tenha sido carregado, é preciso selecionar o primeiro nó de folha, chamar o método 'selecionar' para selecionar o nó. evento Use 'onSelect' para obter o nó selecionado, de modo que podemos obter 'url' correspondente ao valor. Finalmente, chamamos a grade de dados (DataGrid) o método de "carga" para atualizar a lista de dados de alimentação.

$ ( 't-canais #'). Árvore ({
	onSelect: function (nó) {
		var url = node.attributes.url;
		$ ( "# DG»). Datagrid ( 'load', {
			url: url
		});
	},
	onLoadSuccess: function (nó, data) {
		Se (data.length) {
			var id = dados [0] .children [0] .children [0] .id;
			var n = $ (this) .tree ( 'encontrar', id);
			$ (Este) .tree ( 'selecionar', n.target);
		}
	}
});

Baixar exemplos jQuery EasyUI

jeasyui-app-rssreader.zip