เมนูต้นไม้ jQuery EasyUI - ต้นไม้โหลดขี้เกียจโหนดตาราง
บางครั้งเราได้รับต้นไม้ตารางลำดับชั้นอย่างเต็มที่ (TreeGrid) ข้อมูล นอกจากนี้เรายังต้องการตารางต้นไม้ (TreeGrid) ลำดับชั้นโหนดโหลดขี้เกียจ ขั้นแรกให้โหลดเพียงโหนดด้านบน คลิกที่ไอคอนแล้วขยายโหนดในการโหลดโหนดของเด็ก กวดวิชานี้จะแสดงวิธีการสร้างต้นไม้ที่มีลักษณะโหลดตารางเฉื่อย (TreeGrid)
สร้างตารางต้นไม้ (TreeGrid)
<table id = "ทดสอบ" title = "โฟลเดอร์ Browser" class = "easyui-TreeGrid" style = "width: 700px; ความสูง: 300px" ข้อมูลตัวเลือก = " URL: 'ข้อมูล / treegrid_data.json' วิธีการ: 'ได้รับ' rownumbers: จริง idField: 'ID' treeField: 'ชื่อ' loadFilter: myLoadFilter "> <thead> <tr> <Th ฟิลด์ = "ชื่อ" width = "220"> ชื่อ </ TH> <ฟิลด์ Th = "ขนาด" width = "100" align = "สิทธิ"> ขนาด </ TH> <Th ฟิลด์ = "วันที่" width = "150"> วันที่แก้ไข </ TH> </ tr> </ thead> </ table>
ที่จะวางโหนดลูกโหลดแต่ละโหนดที่เราจำเป็นต้องเปลี่ยนชื่อคุณสมบัติ 'เด็ก' ดังแสดงในรหัสต่อไปนี้ 'เด็ก' คุณสมบัติเปลี่ยนชื่อ 'children1' เมื่อคุณขยายโหนดที่เราเรียกว่า 'ต่อท้าย' วิธีการในการโหลดข้อมูลโหนดลูกของมัน
'LoadFilter' รหัส
ฟังก์ชั่น myLoadFilter (ข้อมูล parentId) { ฟังก์ชั่น setData () { สิ่งที่ต้องทำ var = []; สำหรับ (var i = 0; i <data.length; i ++) { todo.push (ข้อมูล [I]); } ในขณะที่ (todo.length) { var โหนด = todo.shift (); ถ้า (node.children) { node.state = 'ปิด'; node.children1 = node.children; node.children = ไม่ได้กำหนด; สิ่งที่ต้องทำ = todo.concat (node.children1); } } } setData (ข้อมูล); var TG = $ (นี้); var opts = tg.treegrid ( 'ตัวเลือก'); opts.onBeforeExpand = ฟังก์ชั่น (แถว) { ถ้า (row.children1) { tg.treegrid ( 'ผนวก' { ผู้ปกครอง: แถว [opts.idField] ข้อมูล: row.children1 }); row.children1 = ไม่ได้กำหนด; tg.treegrid ( 'ขยาย' แถว [opts.idField]); } ผลตอบแทน row.children1 == undefined; }; ส่งกลับข้อมูล; }