เมนูต้นไม้ jQuery EasyUI - สร้างตาข่ายต้นไม้ที่ซับซ้อน
ตารางต้นไม้ (TreeGrid) สามารถปรากฏที่ซับซ้อนและหลายคอลัมน์สเปรดชีตที่มีข้อมูลพื้นที่ที่มี จำกัด กวดวิชานี้จะแสดงให้เห็นถึงวิธีการแบ่งพาร์ติชันตารางข้อมูลถูกจัดเรียงในตารางและหลายสายส่วนหัวเพื่อที่จะจัดระเบียบข้อมูลทั่วไป
สร้างตารางต้นไม้ (TreeGrid)
<table title = "คอมเพล็กซ์ TreeGrid" class = "easyui-TreeGrid" style = "width: 550px; ความสูง: 250px" url = "ข้อมูล / treegrid2_data.json" rownumbers = showFooter "จริง" = "true" idField = "id" treeField = "ภูมิภาค"> <thead แช่แข็ง = "true"> <tr> <Th ฟิลด์ = "ภูมิภาค" width = "150"> ภูมิภาค </ TH> </ tr> </ thead> <thead> <tr> <Th colspan = "4"> 2009 </ TH> <Th colspan = "4"> 2010 </ TH> </ tr> <tr> <Th ฟิลด์ = "F1" width = "50" align = "สิทธิ"> 1 QRT. </ Th> <Th ฟิลด์ = "F2" width = "50" align = "สิทธิ"> QRT 2st. </ Th> <Th ฟิลด์ = "F3" width = "50" align = "สิทธิ"> QRT 3st. </ Th> <Th ฟิลด์ = "F4" width = "50" align = "สิทธิ"> QRT 4ST. </ Th> <Th ฟิลด์ = "F5" width = "50" align = "สิทธิ"> 1 QRT. </ Th> <Th ฟิลด์ = "F6" width = "50" align = "สิทธิ"> QRT 2st. </ Th> <Th ฟิลด์ = "F7" width = "50" align = "สิทธิ"> QRT 3st. </ Th> <Th ฟิลด์ = "F8" width = "50" align = "สิทธิ"> QRT 4ST. </ Th> </ tr> </ thead> </ table>
ที่คุณสามารถดูต้นไม้ตาราง (TreeGrid) การใช้งานและตารางข้อมูล (Datagrid) เดียวกัน โดยใช้คุณสมบัติ 'แช่แข็ง' เพื่อกำหนดคอลัมน์ที่ตรึงคอลัมน์ 'colspan' และทรัพย์สิน 'rowspan' เพื่อกำหนดส่วนหัวหลายคู่สาย