Latest web development tutorials
×

jQuery EasyUI หลักสูตร

jQuery EasyUI หลักสูตร jQuery EasyUI แนะนำโดยย่อ

jEasyUI ใบสมัคร

jEasyUI การสร้างแอพลิเคชัน CRUD jEasyUI การสร้างตารางข้อมูล CRUD jEasyUI แบบฟอร์มใบสมัคร CRUD jEasyUI สร้างอ่าน RSS

jEasyUI ลากและวาง

jEasyUI ลากและวางพื้นฐาน jEasyUI สร้างตะกร้าสินค้าลดลง jEasyUI สร้างหลักสูตรโรงเรียน

jEasyUI เมนูและปุ่ม

jEasyUI การสร้างเมนูง่ายๆ jEasyUI ปุ่มสร้างการเชื่อมโยง jEasyUI สร้างปุ่มเมนู jEasyUI ปุ่มสร้างแยก

jEasyUI แบบ

jEasyUI สร้างรูปแบบเส้นขอบ jEasyUI สร้างรูปแบบที่ซับซ้อน jEasyUI สร้างแผงพับ jEasyUI สร้างแท็บ jEasyUI แบบไดนามิกเพิ่มแท็บ jEasyUI เพิ่มแท็บเล่นอัตโนมัติ jEasyUI สร้างสไตล์ XP บนแผงด้านข้างซ้าย

jEasyUI ตารางข้อมูล

jEasyUI แปลงเป็น HTML ตารางข้อมูลตาราง jEasyUI ได้รับข้อมูลที่เลือกแถว jEasyUI เพิ่มสอบถามรายละเอียดเพิ่มเติม jEasyUI เพิ่มแถบเครื่องมือ jEasyUI สร้างแถบเครื่องมือที่ซับซ้อน jEasyUI การตั้งค่าคอลัมน์แช่แข็ง jEasyUI คอลัมน์เปลี่ยนแบบไดนามิก jEasyUI คอลัมน์รูปแบบ jEasyUI ตั้งค่าการจัดเรียง jEasyUI การสั่งซื้อที่กำหนดเอง jEasyUI สร้างการรวมกันของคอลัมน์ jEasyUI เพิ่มช่องทำเครื่องหมาย jEasyUI เพจที่กำหนดเอง jEasyUI เปิดใช้งานการแก้ไขแบบอินไลน์ jEasyUI บรรณาธิการขยาย jEasyUI การดำเนินงานของคอลัมน์ jEasyUI เซลล์ที่ผสาน jEasyUI สร้างมุมมองที่กำหนดเอง jEasyUI สร้างสรุปท้าย jEasyUI เงื่อนไขที่กำหนดแถวสีพื้นหลัง jEasyUI สร้างตารางทรัพย์สิน jEasyUI สายการขยายตัวแสดงรายละเอียด jEasyUI สร้างเขตการปกครอง jEasyUI แสดงข้อมูลขนาดใหญ่ jEasyUI เพิ่มองค์ประกอบหน้า

jEasyUI หน้าต่าง

jEasyUI การสร้างหน้าต่างที่เรียบง่าย jEasyUI ที่กำหนดเองแถบหน้าต่าง jEasyUI หน้าต่างและเค้าโครง jEasyUI สร้างโต้ตอบ jEasyUI กำหนดเองกล่องโต้ตอบ

jEasyUI เมนูต้นไม้

jEasyUI ใช้แท็กเพื่อสร้างเมนูต้นไม้ jEasyUI สร้างเมนูต้นไม้ตรงกัน jEasyUI การเพิ่มเมนูโหนด jEasyUI สร้างเมนูต้นไม้ที่มีช่องทำเครื่องหมาย jEasyUI ลากและวางเมนูควบคุมต้นไม้ jEasyUI โหลดต้นไม้เมนูโหนดแม่ / ลูก jEasyUI การสร้างตารางตามต้นไม้ jEasyUI สร้างตาข่ายต้นไม้ที่ซับซ้อน jEasyUI ตารางต้นไม้โหลดแบบไดนามิก jEasyUI เพิ่มตารางต้นไม้แท็บ jEasyUI โหลดขี้เกียจต้นไม้ตารางโหนด

jEasyUI ฟอร์ม

jEasyUI ส่งแบบฟอร์มในการสร้างไม่ตรงกัน jEasyUI รูปแบบการตรวจสอบสิทธิ์ jEasyUI สร้างแบบหล่นลงต้นไม้กล่อง jEasyUI รูปแบบกล่องแบบหล่นลง jEasyUI กรองตารางข้อมูลแบบเลื่อนลง

jEasyUI คู่มืออ้างอิง

jQuery EasyUI วิดเจ็ต jQuery EasyUI กระจาย

jQuery EasyUI ตารางข้อมูล - รับข้อมูลที่เลือกแถว

ตัวอย่างนี้แสดงให้เห็นถึงวิธีการที่จะได้รับข้อมูลแถวที่เลือก

ตารางข้อมูล (DataGrid) ส่วนประกอบมีสองวิธีที่จะดึงแถวที่เลือกของข้อมูล:

  • getSelected: รับที่แถวแรกของข้อมูลจะถูกเลือกถ้าเส้นไม่ได้เลือกมันกลับ null มิฉะนั้นจะส่งกลับระเบียน
  • getSelections: รับแถวที่เลือกทั้งหมดของข้อมูลส่งกลับอาร์เรย์ของระเบียนองค์ประกอบข้อมูล

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

	<table id = "TT" class = "easyui-DataGrid" style = "width: 600px; ความสูง: 250px"
			url = "ข้อมูล / datagrid_data.json"
			title = "โหลดข้อมูล" iconCls = "ไอคอนบันทึก">
		<thead>
			<tr>
				<ฟิลด์ Th = "Itemid" width = "80"> รหัสรายการ </ TH>
				<ฟิลด์ Th = "ProductID" width = "80"> รหัสสินค้า </ TH>
				<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>

โดยใช้การสาธิต

ขอรับข้อมูลแถวที่เลือก:

	แถว var = $ ( '# TT') DataGrid ( 'getSelected') .;
	ถ้า (แถว) {
		แจ้งเตือน ( 'รหัสรายการ:' + row.itemid + "\ nPrice:" + row.listprice);
	}

รับ itemid แถวที่เลือกทั้งหมด:

	รหัส var = [];
	var แถว = $ ( '# TT') DataGrid ( 'getSelections') .;
	สำหรับ (var i = 0; i <rows.length; i ++) {
		ids.push (แถว [I] .itemid);
	}
	แจ้งเตือน (ids.join ( '\ n'));

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

jeasyui-datagrid-datagrid3.zip