1. Home
  2. การประยุกต์ใช้ jQuery EasyUI - สร้างอ่านฟีด RSS

บทช่วยสอน การประยุกต์ใช้ jQuery EasyUI - สร้างอ่านฟีด RSS ที่ดีที่สุดในปี 2024 ในบทช่วยสอนนี้ คุณสามารถเรียนรู้ ดาวน์โหลดตัวอย่าง jQuery EasyUI,

การประยุกต์ใช้ jQuery EasyUI - สร้างอ่านฟีด RSS

ในการกวดวิชานี้เราจะสร้างอ่าน RSS โดยกรอบ jQuery EasyUI

เราจะใช้ปลั๊กอินต่อไป:

  • รูปแบบ: สร้างการใช้งานส่วนติดต่อผู้ใช้
  • DataGrid: จอแสดงผลรายการ RSS Feed
  • ต้นไม้: จอแสดงผลช่องฟีด

ขั้นตอนที่ 1: สร้างเค้าโครง (Layout) 

& lt; ระดับร่างกาย = "easyui แบบการจัดวาง" & gt;
	<ภูมิภาค Div = "เหนือ" border = "false" class = "rtitle">
		jQuery EasyUI RSS Reader สาธิต
	</ div>
	<ภูมิภาค Div = "ตะวันตก" title = "ช่องต้นไม้" แยก = "true" border = "false" style = "width: 200px; พื้นหลัง: #EAFDFF;">
		<ul id = "T-ช่อง" URL = "ข้อมูล / channels.json"> </ ul>
	</ div>
	<ภูมิภาค Div = "center" border = "false">
		<div class = "easyui แบบการจัดวาง" พอดี = "true">
			<ภูมิภาค Div = "เหนือ" แยก = "true" border = "false" style = "height: 200px">
				<table id = "DG" 
						url = "get_feed.php" border = "false" rownumbers = "true"
						พอดี = fitColumns "จริง" = "true" singleSelect = "true">
					<thead>
						<tr>
							<ฟิลด์ Th = "ชื่อ" width = "100"> ชื่อ </ TH>
							<ฟิลด์ Th = "คำอธิบาย" width = "200"> รายละเอียด </ TH>
							<Th ฟิลด์ = "pubDate" width = "80"> วันที่เผยแพร่ </ TH>
						</ tr>
					</ thead>
				</ table>
			</ div>
			<ภูมิภาค Div = "center" border = "false" style = "ล้น: ซ่อน">
				<iframe id = "ซีซี" เลื่อน = "อัตโนมัติ" frameborder = "0" style = "width: 100%; ความสูง: 100%"> </ iframe>
			</ div>
		</ div>
	</ div>
& lt; / body & gt;

ขั้นตอนที่ 2: ตารางข้อมูล (DataGrid) การจัดการเหตุการณ์

ที่นี่เราต้องจัดการกับบางส่วนของเหตุการณ์ที่เกิดขึ้นเรียกโดยผู้ใช้ 

$ ( '# Dg'). Datagrid ({
	onSelect: ฟังก์ชั่น (ดัชนีแถว) {
		. $ ( '# สำเนา) attr (' src 'row.link);
	}
	onLoadSuccess: ฟังก์ชั่น () {
		แถว var = $ (นี้) .datagrid ( 'GetRows');
		ถ้า (rows.length) {
			$ (นี้) .datagrid ( 'selectRow', 0);
		}
	}
});

ตัวอย่างนี้ใช้เหตุการณ์ 'onSelect' เพื่อแสดงเนื้อหาของอาหารที่จะเลือกใช้บรรทัดแรกเหตุการณ์ 'onLoadSuccess'

ขั้นตอนที่ 3: เมนูต้นไม้ (ต้นไม้) กิจกรรมการประมวลผล

เมื่อต้นไม้เมนูข้อมูล (ต้นไม้) ได้รับการโหลดเราต้องเลือกใบเหลืองแรกเรียกว่า 'เลือก' วิธีการในการเลือกโหนด เหตุการณ์ใช้ 'onSelect' ที่จะได้รับโหนดที่เลือกเพื่อที่ว่าเราจะได้รับ "URL" ที่สอดคล้องกับค่า สุดท้ายเราเรียกตารางข้อมูล (DataGrid) 'การโหลดวิธีการในการรีเฟรชรายการของข้อมูลฟีด 

$ ( '# T-ช่อง'). ต้นไม้ ({
	onSelect: ฟังก์ชั่น (โหนด) {
		var url = node.attributes.url;
		$ ( '# Dg'). Datagrid ( 'โหลด' {
			URL: URL
		});
	}
	onLoadSuccess: ฟังก์ชั่น (โหนดข้อมูล) {
		ถ้า (data.length) {
			var id = ข้อมูล [0] .children [0] .children [0] .id;
			var n = $ (นี้) .tree ( 'พบ' ID);
			$ (นี้) .tree ( 'เลือก', n.target);
		}
	}
});

ดาวน์โหลดตัวอย่าง jQuery EasyUI

jeasyui-app-rssreader.zip

บทแนะนำยอดนิยม

Contact US

การประยุกต์ใช้ jQuery EasyUI - สร้างอ่านฟีด RSS
10/30