مسج EasyUI القائمة شجرة - شجرة القائمة لإضافة العقدة
هذا البرنامج التعليمي يظهر لك كيفية إرفاق عقدة إلى القائمة شجرة (شجرة). سنقوم إنشاء عقدة شجرة المواد الغذائية التي تحتوي الفواكه والخضروات، ثم إضافة بعض الفواكه الأخرى إلى العقدة الفاكهة الموجودة.
إنشاء شجرة الغذاء
أولا، ونحن خلق شجرة الغذاء، ومتاحة على النحو التالي:
<أسلوب الدرجة = "العرض: 200px؛ الطول: السيارات، الحدود: #CCC الصلبة 1PX؛"> <UL معرف = "ترينيداد وتوباغو" الطبقة = "easyui شجرة" URL = "tree_data.json"> </ UL> </ div>
يرجى ملاحظة أن يتم تعريف عنصر شجرة (شجرة) في العلامة <UL> والبيانات عقدة شجرة تحميل من رابط "tree_data.json".
الحصول على عقدة الأم
ثم نختار عقدة الفاكهة بالضغط على العقدة، سوف نقوم بإضافة بعض البيانات الفواكه الأخرى. حصلت getSelected التنفيذي عقدة المعالجة:
عقدة فار = $ ( '# ترينيداد وتوباغو') شجرة ( 'getSelected')؛
نتيجة عودة أسلوب getSelected هو كائن جافا سكريبت يحتوي على الهوية، والنص، واستهداف الممتلكات. الملكية الهدف هو مرجع كائن DOM يتم تحديد عقدة، سيتم استخدام طريقة إلحاقي من أجل العقد التابعة إضافية.
العقد إضافية
عقدة فار = $ ( '# ترينيداد وتوباغو') شجرة ( 'getSelected')؛
إذا (عقدة) {
العقد فار = [{
"إيد": 13،
"نص": "التوت"
}، {
"إيد": 14،
"نص": "شمام"
}].
$ ( '# ترينيداد وتوباغو). شجرة (' إلحاقي '، {
الأم: node.target،
بيانات: العقد
})؛
}
عند إضافة بعض الفاكهة، وسوف ترى:
كما ترون، وذلك باستخدام شجرة easyui (شجرة) في المكونات إلى عقدة إضافية يست صعبة للغاية.