1. Home
  2. jQuery EasyUI ตารางข้อมูล - ช่วยแก้ไขแบบอินไลน์

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

jQuery EasyUI ตารางข้อมูล - ช่วยแก้ไขแบบอินไลน์

ฟังก์ชั่นที่สามารถแก้ไขได้เมื่อเร็ว ๆ นี้เพิ่มเข้าไปในตารางข้อมูล (DataGrid) ของ จะช่วยให้ผู้ใช้สามารถเพิ่มแถวใหม่ไปยังตารางข้อมูล (DataGrid) ผู้ใช้ยังสามารถอัปเดตอย่างน้อยหนึ่งแถว

กวดวิชานี้จะแสดงให้คุณเห็นวิธีการสร้างตารางข้อมูล (DataGrid) และแก้ไขแบบอินไลน์

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

	$ (ฟังก์ชั่น () {
		$ ( '# Tt'). Datagrid ({
			ชื่อเรื่อง: 'ที่สามารถแก้ไขได้ DataGrid'
			iconCls: ไอคอน 'แก้ไข'
			ความกว้าง: 660
			ความสูง: 250
			singleSelect: จริง
			idField: 'Itemid'
			URL: 'datagrid_data.json'
			คอลัมน์: [[
				{ฟิลด์: 'Itemid' ชื่อเรื่อง: "รหัสรายการ" ความกว้าง: 60}
				{ฟิลด์: 'ProductID' ชื่อเรื่อง: 'สินค้า' ความกว้าง: 100
					จัดรูปแบบ: ฟังก์ชั่น (ค่า) {
						สำหรับ (var i = 0; i <products.length; i ++) {
							ถ้า (สินค้า [I] .productid == ค่า) คืนสินค้า [I] .name;
						}
						ค่าตอบแทน;
					}
					บรรณาธิการ: {
						ประเภท: 'ComboBox'
						ตัวเลือก: {
							valueField: 'ProductID'
							TextField: 'ชื่อ'
							ข้อมูล: ผลิตภัณฑ์
							จำเป็นต้องใช้: จริง
						}
					}
				}
				{ฟิลด์: 'listprice' ชื่อเรื่อง: 'ราคา' ความกว้าง: 80 จัด: 'ขวา' บรรณาธิการ: {ประเภท: 'numberbox' ตัวเลือก: {ความแม่นยำ: 1}}}
				{ฟิลด์: 'unitcost' ชื่อเรื่อง: 'หน่วยต้นทุน' ความกว้าง: 80 จัด: 'ขวา' บรรณาธิการ: 'numberbox'}
				{ฟิลด์: 'ATTR1' ชื่อเรื่อง: 'แอตทริบิวต์', ความกว้าง: 150, Editor: 'ข้อความ'}
				{ฟิลด์: 'สถานะ' ชื่อเรื่อง: 'สถานะ' ความกว้าง: 50 จัด: 'ศูนย์'
					บรรณาธิการ: {
						ประเภท: 'ช่องทำเครื่องหมาย'
						ตัวเลือก: {
							เมื่อ: 'P',
							ออก: ''
						}
					}
				}
				{ฟิลด์: 'การกระทำ' ชื่อเรื่อง: 'การกระทำ', ความกว้าง: 70 จัด: 'ศูนย์'
					จัดรูปแบบ: ฟังก์ชั่น (มูลค่าที่แถวดัชนี) {
						ถ้า (row.editing) {
							var s = '<a href="#" onclick="saverow(this)"> บันทึก </a>';
							var c = '<a href="#" onclick="cancelrow(this)"> ยกเลิก </a>';
							ผลตอบแทน s + C;
						} else {
							var E = '<a href="#" onclick="editrow(this)"> แก้ไข </a>';
							var d = '<a href="#" onclick="deleterow(this)"> ลบ </a>';
							กลับ E + D;
						}
					}
				}
			]]
			onBeforeEdit: ฟังก์ชั่น (ดัชนีแถว) {
				row.editing = true;
				updateActions (ดัชนี);
			}
			onAfterEdit: ฟังก์ชั่น (ดัชนีแถว) {
				row.editing = false;
				updateActions (ดัชนี);
			}
			onCancelEdit: ฟังก์ชั่น (ดัชนีแถว) {
				row.editing = false;
				updateActions (ดัชนี);
			}
		});
	});
	updateActions ฟังก์ชั่น (ดัชนี) {
		$ ( '# Tt'). Datagrid ( 'updateRow' {
			ดัชนี: ดัชนี
			แถว: {}
		});
	}

ต้องการเปิดใช้งานแบบอินไลน์แก้ไขข้อมูลตารางคุณควรเพิ่มคุณสมบัติที่จะคอลัมน์บรรณาธิการ Editor (บรรณาธิการ) บอกตารางข้อมูล (DataGrid) วิธีการแก้ไขเขตข้อมูลและวิธีการประหยัดค่าของฟิลด์ ที่คุณสามารถดูสามบรรณาธิการ (บรรณาธิการ) เรากำหนด: ข้อความ ComboBox และช่องทำเครื่องหมาย 

	ฟังก์ชั่น getRowIndex (เป้าหมาย) {
		var TR = $ (เป้าหมาย) .closest ( 'tr.datagrid แถว');
		กลับ parseInt (tr.attr ( 'DataGrid แถวดัชนี'));
	}
	ฟังก์ชั่น editrow (เป้าหมาย) {
		$ ( '# Tt') DataGrid ( 'BeginEdit' getRowIndex (เป้าหมาย)) .;
	}
	ฟังก์ชั่น deleterow (เป้าหมาย) {
		$ .messager.confirm ( 'ยืนยัน', 'คุณแน่ใจหรือไม่?', ฟังก์ชั่น (R) {
			ถ้า (R) {
				$ ( '# Tt') DataGrid ( 'deleteRow' getRowIndex (เป้าหมาย)) .;
			}
		});
	}
	ฟังก์ชั่น saverow (เป้าหมาย) {
		$ ( '# Tt') DataGrid ( 'EndEdit' getRowIndex (เป้าหมาย)) .;
	}
	ฟังก์ชั่น cancelrow (เป้าหมาย) {
		$ ( '# Tt') DataGrid ( 'CancelEdit' getRowIndex (เป้าหมาย)) .;
	}

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

jeasyui-datagrid-datagrid12.zip

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

Contact US

jQuery EasyUI ตารางข้อมูล - ช่วยแก้ไขแบบอินไลน์
10/30