jQuery EasyUI Anwendung - Erstellen Sie RSS-Feed Reader

Zurück: jQuery EasyUI Anwendungen - ein Deployment - Linie Detail CRUD Anwendung bearbeiten Form zu schaffen

Next: jQuery EasyUI drop - Grund Drag & Drop

In diesem Tutorial werden wir einen RSS-Reader von jQuery EasyUI Rahmen erstellen.

Wir werden die folgenden Plug-ins verwenden:

Layout: eine Benutzeroberfläche Anwendungen erstellen.
Datagrid: Anzeige RSS-Feed-Liste.
Baum: Anzeige Zufuhrkanal.

Schritt 1: Erstellen Layout (Layout)

& Lt; body class = "easyui-Layout" & gt;
	<Div region = "nördlich" border = "false" class = "rtitle">
		jQuery EasyUI RSS Reader Demo
	</ Div>
	<Div region = "westlich" title = "Kanäle Baum" split = "true" border = "false" style = "width: 200px; Hintergrund: #EAFDFF;">
		<Ul id = "t-Kanäle" url = "data / channels.json"> </ ul>
	</ Div>
	<Div region = "center" border = "false">
		<Div class = "easyui-Layout" fit = "true">
			<Div region = "nördlich" 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>
							<Th field = "title" width = "100"> Titel </ th>
							<Th Feld = "description" width = "200"> Beschreibung </ th>
							<Th Feld = "pubdate" width = "80"> Veröffentlichungsdatum </ th>
						</ Tr>
					</ Thead>
				</ Table>
			</ Div>
			<Div region = "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;

Schritt 2: Data Grid (Datagrid) Ereignisse zu behandeln

Hier müssen wir mit einigen der Ereignisse durch den Benutzer ausgelöst beschäftigen.

$ ( '# Dg'). Datagrid ({
	onSelect: function (Index, Zeile) {
		. $ ( '# Cc') attr ( 'src', row.link);
	},
	onLoadSuccess: function () {
		var rows = $ (this) .datagrid ( 'getRows');
		if (rows.length) {
			$ (This) .datagrid ( 'selectRow', 0);
		}
	}
});

In diesem Beispiel wird "onSelect 'Ereignis, um die Inhalte des Feeds angezeigt werden, die erste Zeile use' onLoadSuccess 'Ereignis auszuwählen.

Schritt 3: Der Menübaum (Baum) Prozessierungsereignisse

Wenn der Menübaum (Baum) Daten geladen ist, müssen wir den ersten Blattknoten auszuwählen, rufen Sie die Methode 'wählen', um den Knoten zu wählen. Verwenden Sie 'onSelect' Ereignis den ausgewählten Knoten zu bekommen, so dass wir 'url' entsprechend dem Wert zu erhalten. Schließlich fordern wir das Datenraster (Datagrid), um die "Last" Methode, um die Liste der Feed-Daten zu aktualisieren.

$ ( '# T-Kanäle). Baum ({
	onSelect: function (Knoten) {
		var url = node.attributes.url;
		$ ( '# Dg'). Datagrid ( 'load', {
			url: url
		});
	},
	onLoadSuccess: Funktion (Knoten, Daten) {
		if (data.length) {
			var id = data [0] .children [0] .children [0] .id;
			var n = $ (this) .tree ( 'finden', id);
			$ (Diese) .tree ( 'select', n.target);
		}
	}
});