1. Home
  2. jQuery EasyUI ตารางข้อมูล - คอลัมน์รูปแบบ

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

jQuery EasyUI ตารางข้อมูล - คอลัมน์รูปแบบ

ตัวอย่างต่อไปนี้จะมีรูปแบบในข้อมูลคอลัมน์ DataGrid easyui ภายในและใช้การจัดรูปแบบคอลัมน์ที่กำหนดเองถ้าราคาเป็นข้อความน้อยกว่า 20 จะเปลี่ยนเป็นสีแดง

การจัดรูปแบบตารางข้อมูล (DataGrid) คอลัมน์ที่เราจำเป็นต้องตั้งค่าแอตทริบิวต์การจัดรูปแบบซึ่งเป็นฟังก์ชั่น ฟังก์ชั่นการจัดรูปแบบประกอบด้วยสามพารามิเตอร์:

  • คุ้มค่า: ค่าของฟิลด์ที่สอดคล้องกันในคอลัมน์ปัจจุบัน
  • แถว: ข้อมูลแถวปัจจุบันจะถูกบันทึกไว้
  • ดัชนี: ดัชนีแถวปัจจุบัน

การสร้างตารางข้อมูล (DataGrid) 

	<table id = "TT" title = "การจัดรูปแบบคอลัมน์" class = "easyui-DataGrid" style = "width: 550px; ความสูง: 250px"
			url = "ข้อมูล / datagrid_data.json"
			singleSelect = iconCls "true" = "ไอคอนบันทึก">
		<thead>
			<tr>
				<ฟิลด์ Th = "Itemid" width = "80"> รหัสรายการ </ TH>
				<ฟิลด์ Th = "ProductID" width = "80"> รหัสสินค้า </ TH>
				<Th ฟิลด์ = "listprice" width = "80" align = "สิทธิ" การจัดรูปแบบ = "formatPrice"> ราคา </ TH>
				<ฟิลด์ Th = "unitcost" width = "80" align = "สิทธิ"> ต้นทุนต่อหน่วย </ TH>
				<Th ฟิลด์ = "ATTR1" width = "100"> แอตทริบิวต์ </ TH>
				<ฟิลด์ Th = "สถานะ" width = "60" align = "center"> สมรส </ TH>
			</ tr>
		</ thead>
	</ table>

โปรดทราบว่าข้อมูล 'listprice' มีแอตทริบิวต์ 'จัดรูปแบบ' ซึ่งบ่งชี้ว่าฟังก์ชั่นการจัดรูปแบบ

เขียนฟังก์ชั่นการจัดรูปแบบ 

	ฟังก์ชั่น formatPrice (Val แถว) {
		ถ้า (Val <20) {
			ผลตอบแทน '<span style = "สี: สีแดง;"> (' + Val + ') </ span>';
		} else {
			กลับวาล;
		}
	}

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

jeasyui-datagrid-datagrid7.zip

บทแนะนำยอดนิยม

Contact US

jQuery EasyUI ตารางข้อมูล - คอลัมน์รูปแบบ
10/30