jQuery EasyUI ตารางข้อมูล - ตั้งตรึงคอลัมน์
ตัวอย่างนี้แสดงให้เห็นถึงวิธีการแช่แข็งบางส่วนของคอลัมน์เมื่อผู้ใช้เลื่อนแถบเลื่อนแนวนอนในตารางคอลัมน์แช่แข็งไม่สามารถเลื่อนไปดูข้างนอก
การตรึงคอลัมน์คุณจำเป็นต้องกำหนดคุณสมบัติ frozenColumns คุณสมบัติ frozenColumn และแอตทริบิวต์เป็นคอลัมน์
$ ( '# Tt'). Datagrid ({ ชื่อเรื่อง: 'คอลัมน์แช่แข็ง' iconCls: ไอคอน 'บันทึก' ความกว้าง: 500 ความสูง: 250 URL: 'ข้อมูล / datagrid_data.json' frozenColumns: [[ {ฟิลด์: 'Itemid' ชื่อเรื่อง: "รหัสรายการ" ความกว้าง: 80} {ฟิลด์: 'ProductID' ชื่อเรื่อง: 'รหัสสินค้า', ความกว้าง: 80} ]] คอลัมน์: [[ {ฟิลด์: 'listprice' ชื่อเรื่อง: 'ราคา' ความกว้าง: 80 จัด: 'ขวา'} {ฟิลด์: 'unitcost' ชื่อเรื่อง: 'หน่วยต้นทุน' ความกว้าง: 80 จัด: 'ขวา'} {ฟิลด์: 'ATTR1' ชื่อเรื่อง: 'แอตทริบิวต์', ความกว้าง: 100} {ฟิลด์: 'สถานะ' ชื่อเรื่อง: 'สถานะ', ความกว้าง: 60} ]] });
คุณไม่จำเป็นต้องเขียนโค้ดจาวาสคริปต์ใด ๆ เพื่อให้คุณสามารถสร้างตารางข้อมูล (DataGrid) ส่วนประกอบดังนี้
<table id = "TT" title = "คอลัมน์แช่แข็ง" class = "easyui-DataGrid" style = "width: 500px; ความสูง: 250px" url = "ข้อมูล / datagrid_data.json" singleSelect = iconCls "true" = "ไอคอนบันทึก"> <thead แช่แข็ง = "true"> <tr> <ฟิลด์ Th = "Itemid" width = "80"> รหัสรายการ </ TH> <ฟิลด์ Th = "ProductID" width = "80"> รหัสสินค้า </ TH> </ tr> </ thead> <thead> <tr> <Th ฟิลด์ = "listprice" width = "80" align = "สิทธิ"> ราคา </ TH> <ฟิลด์ Th = "unitcost" width = "80" align = "สิทธิ"> ต้นทุนต่อหน่วย </ TH> <Th ฟิลด์ = "ATTR1" width = "150"> แอตทริบิวต์ </ TH> <ฟิลด์ Th = "สถานะ" width = "60" align = "center"> สมรส </ TH> </ tr> </ thead> </ table>