บทช่วยสอน jQuery EasyUI ข้อมูลกริด - ไดนามิกเปลี่ยนคอลัมน์ ที่ดีที่สุดในปี 2024 ในบทช่วยสอนนี้ คุณสามารถเรียนรู้ ดาวน์โหลดตัวอย่าง jQuery EasyUI,

jQuery EasyUI ข้อมูลกริด - ไดนามิกเปลี่ยนคอลัมน์

ตารางข้อมูล (DataGrid) คอลัมน์สามารถใช้คุณสมบัติ 'คอลัมน์' ที่กำหนดไว้เพียงแค่ หากคุณต้องการที่จะเปลี่ยนแบบไดนามิกคอลัมน์ที่ไม่มีปัญหา ในการเปลี่ยนคอลัมน์คุณสามารถจำวิธีการ 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 ความกว้างความสูงและอื่น ๆ อีกครั้งหนึ่งที่เราไม่จำเป็นต้องกำหนดให้เรากำหนดสิ่งที่เราจำเป็นต้องเปลี่ยน

ดาวน์โหลดตัวอย่าง jQuery EasyUI

jeasyui-datagrid-datagrid6.zip

jQuery EasyUI ข้อมูลกริด - ไดนามิกเปลี่ยนคอลัมน์
10/30