jQuery EasyUI ตารางข้อมูล - แปลง HTML ตารางข้อมูลตาราง
ตัวอย่างนี้แสดงให้เห็นถึงวิธีการแปลงตาราง (ตาราง) สำหรับตารางข้อมูล (DataGrid)
กริด (DataGrid) ข้อมูลคอลัมน์ข้อมูลจะถูกกำหนดไว้ใน <thead> แท็กข้อมูลจะถูกกำหนดไว้ใน <tbody> แท็ก ตรวจสอบให้แน่ใจว่าการตั้งค่าทั้งหมดชื่อเขตข้อมูลคอลัมน์ดูตัวอย่างต่อไปนี้:
<table id = "TT" class = "easyui-DataGrid" style = "width: 400px; ความสูง: อัตโนมัติ;"> <thead> <tr> <Th ฟิลด์ = "name1" width = "50"> Col 1 </ TH> <Th ฟิลด์ = "NAME2" width = "50"> Col 2 </ TH> <Th ฟิลด์ = "NAME3" width = "50"> Col 3 </ TH> <Th ฟิลด์ = "NAME4" width = "50"> Col 4 </ TH> <Th ฟิลด์ = "NAME5" width = "50"> Col 5 </ TH> <Th ฟิลด์ = "name6" width = "50"> Col 6 </ TH> </ tr> </ thead> <tbody> <tr> <td> ข้อมูล 1 </ td> <td> ข้อมูล 2 </ td> <td> ข้อมูล 3 </ td> <td> ข้อมูล 4 </ td> <td> ข้อมูล 5 </ td> <td> ข้อมูล 6 </ td> </ tr> <tr> <td> ข้อมูล 1 </ td> <td> ข้อมูล 2 </ td> <td> ข้อมูล 3 </ td> <td> ข้อมูล 4 </ td> <td> ข้อมูล 5 </ td> <td> ข้อมูล 6 </ td> </ tr> <tr> <td> ข้อมูล 1 </ td> <td> ข้อมูล 2 </ td> <td> ข้อมูล 3 </ td> <td> ข้อมูล 4 </ td> <td> ข้อมูล 5 </ td> <td> ข้อมูล 6 </ td> </ tr> <tr> <td> ข้อมูล 1 </ td> <td> ข้อมูล 2 </ td> <td> ข้อมูล 3 </ td> <td> ข้อมูล 4 </ td> <td> ข้อมูล 5 </ td> <td> ข้อมูล 6 </ td> </ tr> </ tbody> </ table>
ดีคุณสามารถกำหนดส่วนหัวของตารางที่ซับซ้อนตัวอย่างเช่น:
<thead> <tr> <Th ฟิลด์ = "name1" width = "50" rowspan = "2"> Col 1 </ TH> <Th ฟิลด์ = "NAME2" width = "50" rowspan = "2"> Col 2 </ TH> <Th ฟิลด์ = "NAME3" width = "50" rowspan = "2"> Col 3 </ TH> <Th colspan = "3"> รายละเอียด </ TH> </ tr> <tr> <Th ฟิลด์ = "NAME4" width = "50"> Col 4 </ TH> <Th ฟิลด์ = "NAME5" width = "50"> Col 5 </ TH> <Th ฟิลด์ = "name6" width = "50"> Col 6 </ TH> </ tr> </ thead>
ตอนนี้คุณสามารถมองเห็นส่วนหัวที่ซับซ้อนได้ถูกสร้างขึ้น