รู้เบื้องต้นเกี่ยวกับ EasyUI
EasyI เป็นคอลเลกชันของปลั๊กอินส่วนต่อประสานผู้ใช้ตาม jQuery
Easyi จัดเตรียมคุณสมบัติที่จำเป็นสำหรับการสร้างแอปพลิเคชัน JavaScript ที่ทันสมัยแบบโต้ตอบ
การใช้ EasyI คุณไม่จำเป็นต้องเขียนโค้ดจำนวนมากคุณเพียงแค่ต้องเขียนแท็ก HTML แบบง่าย ๆ เพื่อกำหนดส่วนต่อประสานผู้ใช้
Easyi เป็นกรอบการทำงานที่สมบูรณ์แบบที่รองรับหน้าเว็บ HTML5 อย่างสมบูรณ์แบบ
Easyui ช่วยคุณประหยัดเวลาและขนาดของการพัฒนาเว็บ
Easyui นั้นเรียบง่าย แต่ทรงพลัง
เมื่อฉันใช้มันเป็นครั้งแรกฉันยังคงใช้ทางอ้อมในวิธีการอ้างอิงที่แนะนำในฟอรัมและบันทึกปัญหาที่ฉันพบ
1. ต้องกำหนดโหนดรูท
2. โหนดรูทหนึ่งโหนดหรือมากกว่านั้น
4. แอตทริบิวต์โหนดพาเรนต์ของโหนดรูทไม่จำเป็นต้องกำหนดหรือถูกกำหนดเป็น 0;
5. ชื่อแอตทริบิวต์โหนดพาเรนต์ของโหนดลูกในแต่ละระดับจะต้องเป็น "_parentid" และไม่สามารถใช้ชื่ออื่นได้ ชื่อนี้ถูกกำหนดไว้ใน jQuery.easyui.js;
6. ไม่จำเป็นต้องส่งออกข้อมูล JSON ในโครงสร้าง "ต้นไม้" ในการดำเนินการพื้นหลัง ตราบใดที่ JSON ของโครงสร้างต่อไปนี้มอบให้กับ Treegrid ในแผนกต้อนรับคุณสามารถสร้างเอาต์พุตต้นไม้ไปยังหน้า (นอกจากนี้ยังเป็นตัวเลือกในการส่งออกพื้นหลังในรูปแบบเด็กรูปต้นไม้)
{"total": 17, "rows": [{"id": 3, "goodsid": 36120, "จำนวน": 2.0000, "rem": "15"}, {"id": 4, "สินค้า": 36123, "จำนวน": 1.0000, "rem": "21"} 5, "goodsid": 36124, "จำนวน": 2.0000, "rem": "23"}, {"id": 8, "goodsid": 36130, "qty": 1.0000, "rem": "1"}, {"id": 9, "สินค้า": 36131, " 000, "rem": "2"}, {"id": 10, "goodsid": 36132, "qty": 1.0000, "rem": "3"}, {"id": 11, "สินค้า": 36133, "จำนวน": 1.0000, "rem": "4"} oodsid ": 36134," _ parentid ": 8," จำนวน ": 1.0000," rem ":" 1 "}, {" id ": 13," goodsid ": 36135," _ parentid ": 8," qty ": 2.0000," rem ":" 2 "} "GoodsId": 36136, "_ parentid": 8, "จำนวน": 1.0000, "rem": "3"}, {"id": 15, "goodsid": 36137, "_ parentid": 8, "qty": 1.0000, "rem": "4"}, {" 6, "GoodsId": 36138, "_ ParentId": 8, "จำนวน": 3.0000, "rem": "5"}, {"id": 17, "goodsid": 36139, "_ parentid": 8, "จำนวน": 1.0000, "rem": "6"} : 18, "goodsid": 36142, "_ parentid": 9, "qty": 1.0000, "rem": "1"}, {"id": 19, "goodsid": 36143, "_ parentid": 9, "จำนวน": 1.0000, "rem": "2"} d ": 20," goodsid ": 36144," _ parentid ": 9," qty ": 1.0000," rem ":" 3 "}, {" id ": 21," goodsid ": 36145," _ parentid ": 9," จำนวน ": 1.0000," rem ":" 4 "}นี่คือการกระทำ
var pls = listall (p.partChild) .tolist (); รายการ <jobch> ผลลัพธ์ = รายการใหม่ <jobch> (); foreach (รายการ var ใน pls) {ถ้า (item.partparent == p.partChild) {result.add (id = item.listid วิธีการข้อมูลต้นไม้ซ้ำซ้อน! EasyI สามารถสร้างต้นไม้โดยอัตโนมัติตาม parentid // object l = new {id = item.listid, text = item.partChild, _parentid = 0, qty = item.qty, rem = item.rem, chlidren = treelist (pls, item.partChild)}; // item.partparentselect a; result.add (ใหม่ {id = item.liistid, goodsid = item.partChild, _parentId = parent.first (). listId, pty = item.qty, rem = item.rem});}}}}นี่คือมุมมองแผนกต้อนรับส่วนหน้า
<div style = "margin: 20px 0;"> </div> <table style = "ความสูง: 250px" ตัวเลือกข้อมูล = "url: '/contosobisite/partslist/jlist/', วิธี: 'get', nowrap: false 'goodsid' "> <ต้นไม้: 'goodsid'"> <ต้นไม้ทรี: 'goodsid' "> goodsid </th> <th data-options =" ฟิลด์: 'id' "> listid </th> <th data-options =" Field: 'listver' data-options = "ฟิลด์: 'qty'"> qty </th> <th data-options = "ฟิลด์: 'rem'"> rem </th> <th data-options = "ฟิลด์: '_ parentid'"> parent </th> </tr> </thead> </table>
JS เวอร์ชัน: jQuery.easyui-1.4.3.min.js; jQuery-1.11.3.min.js
เนื้อหาข้างต้นคือบันทึก TreeGrid EasyUi ที่แชร์โดยตัวแก้ไข ฉันหวังว่ามันจะเป็นประโยชน์กับทุกคน!