DataGrid ใน EasyUI แสดงข้อมูลในรูปแบบตารางและให้การสนับสนุนการทำงานที่หลากหลายสำหรับการเลือกการเรียงลำดับการจัดกลุ่มและการแก้ไขข้อมูล DataGrid ได้รับการออกแบบมาเพื่อลดเวลาในการพัฒนาและเพื่อป้องกันไม่ให้นักพัฒนามีความรู้เฉพาะ มันมีน้ำหนักเบาและอุดมไปด้วยคุณลักษณะ การผสานเซลล์, ชื่อหลายคอลัมน์, คอลัมน์แช่แข็งและส่วนท้ายเป็นเพียงไม่กี่คุณสมบัติ
1. ทบทวนเนื้อหาของส่วนที่ 4
ในส่วนที่ 4 เราใช้ EasyUI เพื่อสร้างแถบเมนูทางด้านซ้ายและแท็บที่เกี่ยวข้องจะปรากฏขึ้นทางด้านขวาโดยคลิกที่ตัวเลือกเมนู ในส่วนนี้เราจะใช้ DataGrid เพื่อกรอกส่วนแท็บทางด้านขวา ก่อนอื่นให้ดูที่ไฟล์ aindex.jsp ล่าสุดในส่วนที่ 4 (ดูเนื้อหาในส่วนที่ 4):
2. หลายวิธีในการสร้างการควบคุม DataGrid
DataGrid Display Data อยู่ในรูปแบบ JSON ดังนั้นเราต้องจัดทำแพ็คเกจข้อมูลที่ได้จากพื้นหลังเป็นรูปแบบ Jason ก่อนจากนั้นส่งผ่านไปยังแผนกต้อนรับเพื่อให้ DataGrid แสดงผล ในส่วนนี้เราจะไม่ได้รับข้อมูลจากพื้นหลัง ก่อนเตรียมไฟล์. json ซึ่งมีข้อมูลในรูปแบบเดียวกัน จากนั้นเราจะให้ DataGird แสดงผลก่อนที่จะทำฟังก์ชั่นการแสดงผลได้ดีจากนั้นขอข้อมูลพื้นหลัง
ก่อนอื่นให้ดูรูปแบบของ DataGrid Display จากเอกสารอ้างอิงของ EasyUi ดังที่แสดงในรูปด้านล่าง:
เรามองลงไปตามเอกสารอ้างอิงและเราพบว่าพื้นที่ dataGrid ถูกสร้างขึ้นผ่าน <bable> และมีสามวิธีในการสร้าง:
อันแรก: สร้าง dataGrid จากองค์ประกอบตารางที่มีอยู่กำหนดคอลัมน์แถวและข้อมูลใน HTML
ประเภทที่สอง: สร้าง DataGrid Control ผ่านแท็ก <bable> ใช้แท็ก <th> เพื่อกำหนดคอลัมน์ภายในตาราง
ประเภทที่สาม: ใช้ JavaScript เพื่อสร้าง DataGrid Control
เราใช้ประเภทที่สามโดยใช้ JS เพื่อสร้าง DataGrid Control ก่อนอื่นเราต้องเตรียมไฟล์ที่เก็บข้อมูลรูปแบบ JSON มีไฟล์ JSON หลายไฟล์ภายใต้ Webroot/JQuery-Easyui-1.3.5/Demo/DataGrid/ เราเลือก dataGrid_data1.json คัดลอกไปยังไดเรกทอรี WebRoot แก้ไขพารามิเตอร์และเราจะแสดงข้อมูลในไฟล์ JSON นี้ในภายหลัง ดังนี้:
{"total": 10, "rows": [{"code": "fi-sw-01", "productname": "koi", "ราคา": 10.00}, {"รหัส": "k9-dl-01", "productname": "dalmation" {"รหัส": "RP-SN-01", "ProductName": "RattlesNake", "ราคา": 12.00}, {"รหัส": "RP-LI-02", "ProductName": "Iguana", "ราคา": 12.00}, {"รหัส": {"รหัส": "FL-DSH-01", "ProductName": "Manx", "Price": 12.00}, {"Code": "FL-DLH-02", "ProductName": "เปอร์เซีย", "ราคา": 12.00}, {"รหัส": {"รหัส": "AV-CB-01", "ProductName": "Amazon Parrot", "Price": 92.00}, {"Code": "AV-CB-03", "ProductName": "Amazon Parrot", "ราคา": 92.00}]} เราจะเห็นได้ว่ารูปแบบข้อมูล JSON คือ: "key1": value1, "key2": value2 แต่ละค่าสามารถเป็นอาร์เรย์และข้อมูล Jason ใหม่จะถูกบันทึกไว้ในอาร์เรย์
ด้วยไฟล์ JSON เราสามารถออกแบบ DataGrid Control ต่อไป DataGrid ทั้งหมดได้รับการออกแบบใน query.jsp เนื่องจากเนื้อหาที่จะแสดงเป็นเนื้อหาใน query.jsp ลองดูที่หน้า query.jsp:
<%@ page language = "java" import = "java.util.*" pageencoding = "utf-8"%> <! doctype html public "-// w3c // dtd html 4.01 transitional // en"> <html> <head> $ (function () {$ ('#dg'). dataGrid ({// ที่อยู่ URL ของข้อมูลคำขอจะถูกเปลี่ยนเพื่อขอ URL URL ของเราเอง: 'dataGrid_data.json', loadmsg: 'โหลด ...... ', QueryParams: {ประเภท: '' ไม่ต้องตั้งค่าแถบการแช่แข็งในแนวนอน ดัชนี + "," + row) ถ้า (ดัชนี % 2 == 0) {return 'พื้นหลังสี: #ffff;'} อื่น {return 'พื้นหลังสี:#ff0;';}}, // แอตทริบิวต์คอลัมน์เดียวกัน เมื่อความกว้างมากกว่า 250 แถบเลื่อนจะปรากฏขึ้น แต่คอลัมน์แช่แข็งไม่ได้อยู่ในแถบเลื่อน Frozencolumns: [[{ฟิลด์: 'ช่องทำเครื่องหมาย', ช่องทำเครื่องหมาย: จริง}, {ฟิลด์: 'รหัส', ชื่อ: 'หมายเลข', ความกว้าง: 200}], // ชื่อเรื่องซึ่งแสดงให้ผู้คนเห็นคอลัมน์: [[{ฟิลด์: 'ProductName', ชื่อเรื่อง: 'ชื่อหมวดหมู่', ความกว้าง: 100, // ใช้เพื่อจัดรูปแบบค่าของคอลัมน์ปัจจุบันการส่งคืนเป็นรูปแบบข้อมูลสุดท้าย: ฟังก์ชั่น (ค่า, แถว, ดัชนี) }}, {ฟิลด์: 'ราคา', ชื่อเรื่อง: 'ราคา', ความกว้าง: 100, styler: ฟังก์ชั่น (ค่า, แถว, ดัชนี) {// ตั้งค่าสไตล์ของเซลล์ปัจจุบันและสตริงที่ส่งคืนจะถูกส่งโดยตรงไปยังแอตทริบิวต์สไตล์ // console.info ("val:" value + " - - </script> </head> <body> <table id = "dg"> </table> </body> </html>3. คุณสมบัติของ DataGrid Control
เราจะเห็นได้ว่าหากคุณใช้ JS เพื่อสร้าง DataGrid Control คุณต้องใช้แท็ก <bable> ซึ่งส่วนใหญ่ทำใน JS การควบคุมของ DataGrid นั้นทรงพลังมาก ที่นี่เราทำจอแสดงผลขั้นพื้นฐานเป็นหลัก สำหรับฟังก์ชั่นอื่น ๆ เพิ่มเติมโปรดดูเอกสารการพัฒนาของ Easyui ตอนนี้เรากำลังทำการวิเคราะห์เกี่ยวกับไฟล์ query.jsp ด้านบน:
ก่อนอื่น DataGrid Control มีคุณสมบัติสองประการ: หนึ่งคือคุณสมบัติ DataGrid และอื่น ๆ คือคุณสมบัติคอลัมน์ ตามชื่อหมายถึงคุณสมบัติ DataGrid เป็นแอตทริบิวต์ที่เพิ่มเข้ามาในการควบคุม DataGrid ทั้งหมดและคุณสมบัติคอลัมน์สำหรับคอลัมน์ที่แน่นอน มีคุณลักษณะมากมายในแต่ละรายการและมีการสร้างแอตทริบิวต์พื้นฐานและที่ใช้กันทั่วไปเท่านั้นที่นี่
สิ่งที่สำคัญที่สุดในคุณสมบัติ DataGrid คือคุณสมบัติคอลัมน์ซึ่งเป็นอาร์เรย์ที่สามารถสร้างหลายคอลัมน์ดูภาพหน้าจอด้านล่าง:
มาดูรายละเอียดในแอตทริบิวต์คอลัมน์:
ในแอตทริบิวต์คอลัมน์ฟิลด์แสดงชื่อฟิลด์ซึ่งสอดคล้องกับคีย์ของข้อมูล JSON และจากนั้นชื่อเรื่องคือชื่อที่จะแสดงสำหรับผู้ใช้ ดูไฟล์ query.jsp มีคุณลักษณะพื้นฐานอื่น ๆ ที่สามารถอ้างถึงเอกสาร EasyUI ได้ คุณสมบัติที่สำคัญกว่าและใช้กันทั่วไปในคุณสมบัติคอลัมน์คือ Formatter และ Styler ซึ่งใช้ในการจัดรูปแบบค่าของคอลัมน์ปัจจุบันและรูปแบบเซลล์ที่ตั้งไว้ ลองดูที่คุณสมบัติทั้งสองนี้กันเถอะ:
ลองวิเคราะห์รายละเอียดเกี่ยวกับวิธีการใช้คุณสมบัติสองคอลัมน์นี้ในแอตทริบิวต์คอลัมน์ใน query.jsp ด้านบน:
{ฟิลด์: 'ProductName', ชื่อเรื่อง: 'ชื่อหมวดหมู่', ความกว้าง: 100, // ใช้เพื่อจัดรูปแบบค่าของคอลัมน์ปัจจุบันการส่งคืนเป็นตัวฟอร์แมตข้อมูลสุดท้าย: ฟังก์ชั่น (ค่า, แถว, ดัชนี) {return "<pan>" + ค่า + "</span>" // ฟังก์ชั่น (ค่า, แถว, ดัชนี) {// ตั้งค่าสไตล์ของเซลล์ปัจจุบันและสตริงที่ส่งคืนจะถูกส่งโดยตรงไปยังแอตทริบิวต์สไตล์ // console.info ("val:" + value + ", แถว:" + row + ", ดัชนี:" ดัชนี) ถ้า (ค่า <20) {// // แสดงค่าเป็นสีแดง}}}ถ้าอย่างนั้นมาดูคุณสมบัติบางอย่างของ DataGrid Control:
URL แสดงถึงแหล่งข้อมูลที่จะแสดง ตั้งค่าเป็น dataGrid_data.json ที่นี่หมายความว่าแหล่งข้อมูลคือไฟล์ JSON นี้และวางไว้ในไดเรกทอรี WebRoot;
LOADMSG แสดงถึงข้อมูลที่แสดงในระหว่างการโหลดข้อมูล
QueryParams หมายถึงพารามิเตอร์ที่ส่งผ่านไปยังพื้นหลังและไม่สามารถใช้งานได้ที่นี่เนื่องจากเรายังไม่ได้เชื่อมโยงกับพื้นหลัง แต่แสดงเฉพาะไฟล์ JSON ซึ่งจะใช้ในภายหลัง
หลังจากที่ Fitcolums ถูกตั้งค่าเป็นจริงหมายความว่าการขยายแนวนอนจะถูกขยายโดยอัตโนมัติในแนวนอนและความกว้างของกริดแบบปรับตัวจะถูกปรับ ด้วยวิธีนี้จะไม่มีแถบเลื่อนในทิศทางแนวนอนและไม่จำเป็นต้องตั้งค่าความกว้าง
ความกว้าง คือความกว้าง หากข้อมูลยาวเกินไปและไม่สามารถแสดงได้แถบเลื่อนจะปรากฏขึ้นในทิศทางแนวนอน
หลังจาก ลายเส้น ถูกตั้งค่าเป็นจริงหมายความว่าการข้ามม้าลายจะปรากฏขึ้น นี่คือสไตล์การแสดงผล เพียงแค่ลองดู;
หาก NowRap ถูกตั้งค่าเป็นจริงหมายความว่าเมื่อมีข้อมูลมากเกินไปมันจะไม่ถูกห่อหุ้มเป็นบรรทัดมิฉะนั้นเมื่อมีข้อมูลมากเกินไปในบางบรรทัดมันจะน่าเกลียด
เมื่อ การปนเปื้อน ถูกตั้งค่าเป็นจริงหมายความว่าฟังก์ชั่นการเพจถูกเปิดใช้งาน;
เมื่อ Singleselect ถูกตั้งค่าเป็น TRUE จะได้รับการตรวจสอบเฉพาะแถวเดียวเท่านั้น การเลือกฟังก์ชั่นทั้งหมดไม่ถูกต้องและส่วนใหญ่ใช้สำหรับกล่องกาเครื่องหมายในคอลัมน์ด้านหน้า
Frozencolums คือการตั้งค่าคอลัมน์แช่แข็งและคอลัมน์ที่ตั้งค่าใน Frozencolums จะไม่เปลี่ยนขนาด หากตั้งค่า {ฟิลด์: 'ช่องทำเครื่องหมาย' กล่องกาเครื่องหมาย: จริง} ถูกตั้งค่าหมายความว่านี่คือคอลัมน์กล่องกาเครื่องหมายซึ่งถูกเลือกสำหรับผู้ใช้ หากมีการตั้งค่า singleselect ข้างต้นแล้วสามารถเลือกได้เพียงอันเดียวเท่านั้นไม่ใช่ทั้งหมดของพวกเขา
Rowstyler เป็นสไตล์ของทุกแถว พารามิเตอร์สองตัวคือดัชนีแถวและแถว ข้างต้นถูกตั้งค่าว่าแม้แถวเป็นแถวสีขาวและแถวแปลกเป็นสีเหลือง
รอ ... มีคุณสมบัติอื่น ๆ ของการควบคุม DataGrid คุณสามารถอ้างถึงเอกสารทางเทคนิคของ Easyui และฉันจะไม่อธิบายทีละรายการ
4. เอฟเฟกต์ของ DataGrid Data Display
โอเคหลังจากเสร็จสิ้น query.jsp เรารีสตาร์ท Tomcat จากนั้นป้อนพื้นหลังคลิกที่การจัดการหมวดหมู่ในแถบเมนูทางด้านซ้ายและแท็บการจัดการหมวดหมู่จะปรากฏขึ้นทางด้านขวาจากนั้นข้อมูล JSON ที่เราระบุจะปรากฏขึ้น ข้อมูล Jason นี้ถูกวางไว้ในไดเรกทอรี Webroot ด้วยตนเอง ต่อมาเราจะรวม JSON และ struts เพื่อรับข้อมูล JSON แบบไดนามิกที่ส่งจากพื้นหลัง
(หมายเหตุ: ในที่สุดฉันจะให้การดาวน์โหลดซอร์สโค้ดของโครงการทั้งหมด! ทุกคนยินดีที่จะรวบรวมหรือแบ่งปัน)
ที่อยู่ดั้งเดิม: http://blog.csdn.net/eson_15/article/details/51322262
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น