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