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)

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

ในการโหลดข้อมูลจากเซิร์ฟเวอร์ระยะไกลคุณควรกำหนดคุณสมบัติ 'URL ในเซิร์ฟเวอร์ของคุณควรจะกลับ JSON จัดรูปแบบข้อมูล ดูตารางข้อมูลเอกสาร (DataGrid) สำหรับข้อมูลรูปแบบข้อมูลเพิ่มเติมเกี่ยวกับมัน

	<table id = "TT" class = "easyui-DataGrid" style = "width: 600px; ความสูง: 250px"
			url = "datagrid2_getdata.php"
			title = "โหลดข้อมูล" iconCls = "ไอคอนบันทึก"
			rownumbers = "true" เลข = "true">
		<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>

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

  • หน้า: หน้าค่าตัวเลขเริ่มต้นที่ 1
  • แถว: แถวต่อหน้า

รหัสฝั่งเซิร์ฟเวอร์

	? $ = หน้า isset ($ _ POST [ 'หน้า']) intval ($ _ POST [ 'หน้า']): 1;
	? $ แถว = isset ($ _ POST [ 'แถว']) intval ($ _ POST [ 'แถว']): 10;
	// ...
	อาร์เอส $ = mysql_query ( "นับเลือก (*) จากรายการ");
	แถว $ = mysql_fetch_row ($ RS);
	ผล $ [ "รวม"] = $ แถว [0];
	
	อาร์เอส $ = mysql_query ( "* เลือกจากรายการวงเงินชดเชย $, $ แถว");
	
	$ รายการ = array ();
	ในขณะที่ ($ แถว = mysql_fetch_object ($ RS)) {
		array_push ($ รายการ $ แถว);
	}
	ผล $ [ "แถว"] = $ รายการ;
	
	json_encode Echo ($ result);

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

jeasyui-datagrid-datagrid2.zip