โดยทั่วไปไอคอน TreeGrid เป็นโฟลเดอร์เริ่มต้นและรูปแบบไฟล์ดังแสดงในรูปด้านล่าง:
เราสามารถเพิ่ม ICONCLS ลงในข้อความ JSON เพื่อเปลี่ยนไอคอนเริ่มต้นตัวอย่างเช่น:
{"total": 7, "rows": [{"id": 1, "name": "ทั้งหมด งาน "," เริ่มต้น ":" 3/4/2010 "," end ":" 3/20/2010 "," ความคืบหน้า ": 60," iconcls ":" icon-ok "}, {" id ": 2," ชื่อ ":" การออกแบบการออกแบบ "," เริ่มต้น ":" 3/4/2010 "," end ":" 3/10/2010 "," ความคืบหน้า ": 100," _ parentid ": 1," state ":" ปิด "}, {" id ": 21," ชื่อ ":" DA Tabase "," Persons ": 2," เริ่มต้น ":" 3/4/2010 "," end ":" 3/6/2010 "," ความคืบหน้า ": 100," _ parentid ": 2}, {" id ": 22," ชื่อ ":" U ml "," บุคคล ": 1," เริ่มต้น ":" 3/7/2010 "," end ":" 3/8/2010 "," ความคืบหน้า ": 100," _ parentid ": 2}, {" id ": 23," ชื่อ ":" ส่งออก เอกสาร "," บุคคล ": 1," เริ่มต้น ":" 3/9/2010 "," end ":" 3/10/2010 "," ความคืบหน้า ": 100," _ parentid ": 2}, {" id ": 3," ชื่อ ":" การเข้ารหัส "," บุคคล ": 2," เริ่มต้น ":" 3/11/2010 " สิ้นสุด ":" 3/18/2010 "," ความคืบหน้า ": 80}, {" id ": 4," ชื่อ ":" การทดสอบ "," บุคคล ": 1," เริ่มต้น ":" 3/19/2010 "," end ":" 3/20/2010 "," ความคืบหน้า ": 20}] บุคคล: "," Persons ": 7," iconcls ":" icon-sum "}]}}จากนั้นแก้ไข icon.css และวางไอคอนที่จะใช้ในโฟลเดอร์ที่ระบุ
โดยปกติหากคุณพูดถึงการดัดแปลงดังกล่าว TreeGrid สามารถแสดงไอคอนที่คุณออกแบบด้วยตัวเอง
หากไอคอนที่คุณตั้งค่าไม่สามารถแสดงได้ในเวลานี้คุณสามารถตรวจสอบคำสั่งซื้อที่ icon.css และ easyui.css ได้รับการแนะนำบนหน้า ตรวจสอบให้แน่ใจว่า easyui.css อยู่ด้านหน้าและ icon.css อยู่ด้านหลัง มิฉะนั้นสไตล์ใน EasyUI.CSS จะเขียนทับจุด ICON.CSS และไอคอนเริ่มต้นจะยังคงปรากฏอยู่
ด้านล่างนี้ฉันจะแนะนำ jQuery easyui treegrid เพื่อเพิ่มลบแก้ไขแก้ไขและตรวจสอบรหัส
<script type = "text/javascript"> formalprogress (value) {if (value) {var s = '<div>' + '<div>' + value + '%' + '</div>' '</div>'; return s;}} {return ''; undefined) {$ ('#tg'). treeGrid ('เลือก', แก้ไข); return;} var row = $ ('#tg'). treeGrid ('getSelected'); ถ้า (แถว) {editingId = row.id $ ('#tg'). EditingId); $ ('#tg'). TreeGrid ('ReloadFooter');} $ (". actionbtn"). toggleclass ("l-btn-disabled");} ฟังก์ชั่นแก้ไข () {ถ้าแก้ไข $ ('#tg'). treegrid ('getSelected'); ถ้า (แถว) {แก้ไข = row.id $ ('#tg'). treegrid ('เริ่มต้น', แก้ไข);} $ (". actionbtn"). toggleclass ("l-btn-disabled"); undefined) {$ ('#tg'). treegrid ('เลือก', แก้ไข); return;}/**/var rows = $ ('#tg'). treeGrid ('getChildren'); editingId = rows.length+1; ชื่อ "," บุคคล ": 0," เริ่มต้น ":" 3/19/2010 "," end ":" 3/20/2010 "," ความคืบหน้า ": 10}; var _parentid = 0; var row = $ ('#tg') row.id;} else {var root = $ ('#tg'). treeGrid ('getRoot'); _ parentId = null;} $ ('#tg'). treeGrid ('ผนวก', {parent: _parentid, // ที่นี่ [_data]}); $ ('#tg'). treegrid ('เริ่มต้น', _ data.id); $ (". actionbtn"). toggleclass ("l-btn-disabled");} ฟังก์ชั่นบันทึก () EditingId); EditingId = undefine; t.treegrid ('getFooterrows') [0]; frow.persons = บุคคล; t.treegrid ('reloadfooter'); $ (". actionbtn"). toggleclass ("l-btn-disabled"); EditingId); EditingId = undefined;} $ (". actionbtn"). toggleclass ("l-btn-disabled");} </script> <div style = "margin: 10px 0;"> <a href = "javaScript: void (0) href = "JavaScript: void (0)" disabled = "disabled" onclick = "cancel ()"> ยกเลิก </a> </div>