تطبيق مسج EasyUI - إنشاء قارئ آر إس إس تغذية
في هذا البرنامج التعليمي، سوف نستحدث قارئ RSS من قبل إطار مسج EasyUI.
سوف نستخدم المكونات الإضافية التالية:
- التخطيط: إنشاء تطبيقات واجهة المستخدم.
- datagrid: العرض RSS قائمة تغذية.
- شجرة: عرض قناة الأعلاف.
الخطوة 1: إنشاء تخطيط (تخطيط)
واللفتنانت؛ الطبقة الجسم = "تخطيط easyui" و GT. <المنطقة شعبة = "الشمال" الحدود = "كاذبة" الطبقة = "rtitle"> مسج EasyUI قارئ آر إس إس تجريبي </ div> <المنطقة شعبة = "الغرب" عنوان = "قنوات شجرة" تقسيم = "الحقيقي" الحدود = "كاذبة" على غرار = "العرض: 200px؛ الخلفية: #EAFDFF؛"> <UL معرف = "تي قنوات" URL = "البيانات / channels.json"> </ UL> </ div> <المنطقة شعبة = "مركز" الحدود = "كاذبة"> <div الطبقة = "تخطيط easyui" تناسب = "صحيح"> <المنطقة شعبة = "شمال" تقسيم = "الحقيقي" الحدود = "كاذبة" على غرار = "الارتفاع: 200px"> <جدول معرف = "المديرية العامة" URL = "get_feed.php" الحدود = rownumbers "كاذبة" = "صحيح" صالح = fitColumns "صحيح" = "صحيح" singleSelect = "صحيح"> <THEAD> <tr> <الحقل ث = "عنوان" العرض = "100"> عنوان </ تشرين> <الحقل ث = "صفا" العرض = "200"> الوصف </ تشرين> <ث الحقل = "pubdate" العرض = "80"> تاريخ النشر </ تشرين> </ tr> </ THEAD> </ الجدول> </ div> <المنطقة شعبة = "مركز" الحدود = "كاذبة" على غرار = "تجاوز: مخفي"> <الإطار من معرف = "سي سي" التمرير = "تلقائي" frameborder = "0" على غرار = "العرض: 100٪؛ الطول: 100٪"> </ iframe> حفظ </ div> </ div> </ div> واللفتنانت؛ / الجسم و GT.
الخطوة 2: بيانات الشبكة (DataGrid) للتعامل مع الأحداث
نحن هنا لابد من التعامل مع بعض الأحداث الناجمة عن المستخدم.
$ ( '# المديرية العامة لل'). Datagrid ({ onSelect: وظيفة (مؤشر، صف) { . $ ( '# نسخة') ATTR ( 'SRC، row.link)؛ }، onLoadSuccess: وظيفة () { الصفوف فار = $ (هذا) .datagrid ( 'getRows')؛ إذا (rows.length) { $ (هذا) .datagrid ( 'selectRow "، 0)؛ } } })؛
يستخدم هذا المثال الحدث "onSelect 'لعرض محتويات الأعلاف، لتحديد استخدام خط أول حدث" onLoadSuccess ".
الخطوة 3: الشجرة القائمة (شجرة) معالجة الأحداث
عندما تم تحميل البيانات شجرة القائمة (شجرة)، ونحن بحاجة لتحديد عقدة ورقة الأولى، استدعاء الأسلوب 'اختر' لتحديد العقدة. الحدث استخدام "onSelect" للحصول على العقدة المحددة، حتى نتمكن من الحصول على 'رابط' المقابلة لقيمة. وأخيرا، فإننا ندعو شبكة البيانات (DataGrid) على "تحميل" طريقة لتحديث قائمة البيانات الأعلاف.
$ ( '# T-قنوات'). شجرة ({ onSelect: وظيفة (عقدة) { فار URL = node.attributes.url. $ ( '# المديرية العامة لل'). Datagrid ( 'الحمل'، { رابط: رابط })؛ }، onLoadSuccess: وظيفة (عقدة، البيانات) { إذا (data.length) { فار معرف = بيانات [0]. الأطفال [0]. الأطفال [0] .id. فار ن = $ (هذا) .tree ( 'العثور على'، معرف)؛ $ (هذا) .tree ( 'اختر'، n.target)؛ } } })؛