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