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

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

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>

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

jeasyui-datagrid-datagrid5.zip

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

Contact US

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