jQuery EasyUI ตารางข้อมูล - เซลล์ที่ผสาน
ตารางข้อมูล (DataGrid) มักจะต้องผสานบางส่วนของเซลล์ กวดวิชานี้จะแสดงวิธีการผสานเซลล์ในตารางข้อมูล (DataGrid) ใน
เพื่อผสานตารางข้อมูล (DataGrid) มือถือเพียงแค่เรียกวิธีการ 'mergeCells' ผ่านพารามิเตอร์ผสานข้อมูลบอกตารางข้อมูล (DataGrid) วิธีการผสานเซลล์ ในเซลล์รวมทั้งหมดนอกเหนือไปจากเซลล์แรกเซลล์อื่น ๆ ที่ซ่อนตัวอยู่ในหลังจากการควบรวมกิจการ
การสร้างตารางข้อมูล (DataGrid)
<table id = "TT" title = "ผสานเซลล์" style = "width: 550px; ความสูง: 250px" url = "ข้อมูล / datagrid_data.json" singleSelect = "true" iconCls = "ไอคอนบันทึก" rownumbers = "true" idField = "Itemid" เลข = "true"> <thead แช่แข็ง = "true"> <tr> <Th ฟิลด์ = "ProductID" width = "80" จัดรูปแบบ = "formatProduct"> รหัสสินค้า </ TH> <ฟิลด์ Th = "Itemid" width = "100"> รหัสรายการ </ TH> </ tr> </ thead> <thead> <tr> <Th colspan = "2"> ราคา </ TH> <Th rowspan = "2" ข้อมูล = "ATTR1" width = "150"> แอตทริบิวต์ </ TH> <Th rowspan = "2" ข้อมูล = "สถานะ" width = "60" align = "center"> สมรส </ TH> </ tr> <tr> <Th ฟิลด์ = "listprice" width = "80" align = "สิทธิ"> ราคา </ TH> <ฟิลด์ Th = "unitcost" width = "80" align = "สิทธิ"> ต้นทุนต่อหน่วย </ TH> </ tr> </ thead> </ table>
เซลล์ที่ผสาน
เมื่อข้อมูลถูกโหลดเราผสานข้อมูลตาราง (DataGrid) บางส่วนของเซลล์เพื่อวางรหัสต่อไปนี้ในฟังก์ชันการเรียกกลับ onLoadSuccess
$ ( '# Tt'). Datagrid ({ onLoadSuccess: ฟังก์ชั่น () { ผสาน var = [{ ดัชนี: 2, rowspan: 2 }, { ดัชนี: 5 rowspan: 2 }, { ดัชนี: 7 rowspan: 2 }]; สำหรับ (var i = 0; i <merges.length; i ++) $ ( '# Tt'). Datagrid ( 'mergeCells' { ดัชนี: ผสาน [I] .index, สนาม: 'ProductID' rowspan: ผสาน [I] .rowspan }); } });