applicazione jQuery EasyUI - Crea RSS Feed Reader
In questo tutorial, creeremo un lettore RSS per framework jQuery EasyUI.
Useremo i seguenti plug-in:
- Layout: Creare un applicazioni di interfaccia utente.
- datagrid: Visualizzazione RSS Lista Feed.
- albero: visualizzazione del canale di alimentazione.
Passo 1: Creare Layout (layout)
& Lt; classe corpo = "easyui-layout" & gt; <Regione Div = "nord" border = "false" class = "rtitle"> jQuery EasyUI RSS Reader Demo </ Div> <Regione Div = split = "true" border = stile "West" title = "Canali Tree" "false" = "width: 200px; sfondo: #EAFDFF;"> <Ul id = "T-canali" url = "dati / channels.json"> </ ul> </ Div> <Regione Div = "center" border = "false"> <Div class = "easyui-layout di" fit = "true"> <Regione Div = "nord" split = "true" border = stile "false" = "Altezza: 200px"> <Table id = "dg" url = "get_feed.php" border = "false" rownumbers = "true" fit = "true" fitColumns = "true" singleSelect = "true"> <Thead> <Tr> <Field Th = "title" width = "100"> Titolo </ th> <Field Th = "description" width = "200"> Descrizione </ th> <Th campo = larghezza "pubdate" = "80"> Data di pubblicazione </ th> </ Tr> </ Thead> </ Table> </ Div> <Regione Div = "center" border = "false" style = "overflow: hidden"> <Iframe id = "cc" scrolling = frameborder "auto" = "0" style = "width: 100%; height: 100%"> </ iframe> </ Div> </ Div> </ Div> & Lt; / body & gt;
Fase 2: Data Grid (DataGrid) per gestire gli eventi
Qui abbiamo a che fare con alcuni degli eventi innescati da parte dell'utente.
$ ( '# Dg'). DataGrid ({ onSelect: la funzione (indice, riga) { . $ ( '# Cc') attr ( 'src', row.link); }, onLoadSuccess: function () { var file = $ (this) .datagrid ( 'GetRows'); if (rows.length) { $ (This) .datagrid ( 'selectRow', 0); } } });
Questo esempio utilizza evento 'onSelect' per visualizzare il contenuto del mangime, per selezionare la prima linea di utilizzo evento 'onLoadSuccess'.
Fase 3: l'albero dei menu (Albero) eventi di elaborazione
Quando i dati menu ad albero (Tree) è stato caricato, dobbiamo selezionare il primo nodo foglia, chiamare il metodo 'selezionare' per selezionare il nodo. evento Usa 'onSelect' per ottenere il nodo selezionato, in modo che possiamo ottenere 'url' corrispondente al valore. Infine, chiamiamo la griglia di dati (DataGrid) il metodo di 'carico' per aggiornare l'elenco dei dati del feed.
$ ( '# T-canali'). Albero ({ onSelect: function (nodo) { var url = node.attributes.url; $ ( '# Dg'). DataGrid ( 'carico', { URL: URL }); }, onLoadSuccess: la funzione (nodo, dati) { if (data.length) { var id = dati [0] .children [0] .children [0] .id; var n = $ (this) .TREE ( 'trovare', id); $ (This) .TREE ( 'selezionare', n.target); } } });