In general, the treegrid icon is the default folder and file form, as shown in the figure below:
We can add iconCls to the json text to change the default icon, for example:
{"total":7,"rows":[{"id":1,"name":"All Tasks","begin":"3/4/2010","end":"3/20/2010","progress":60,"iconCls":"icon-ok"},{"id":2,"name":"Designing","begin":"3/4/2010","end":"3/10/2010","progress":100,"_parentId":1,"state":"closed"},{"id":21,"name":"Da tabase","persons":2,"begin":"3/4/2010","end":"3/6/2010","progress":100,"_parentId":2},{"id":22,"name":"UML","persons":1,"begin":"3/7/2010","end":"3/8/2010","progress":100,"_parentId":2},{"id":23,"name":"Export Document","persons":1,"begin":"3/9/2010","end":"3/10/2010","progress":100,"_parentId":2},{"id":3,"name":"Coding","persons":2,"begin":"3/11/2010","end":"3/18/2010","progress":80},{"id":4,"name":"Testing","persons":1,"begin":"3/19/2010","end":"3/20/2010","progress":20}],"footer":[{"name":"Total Persons:","persons":7,"iconCls":"icon-sum"}]}Then modify icon.css and place the icon to be used in the specified folder.
Usually, if you talk about such modifications, treegrid can display the icons you designed by yourself.
If the icon you set cannot be displayed at this time, you can check the order in which icon.css and easyui.css are introduced on the page. Make sure that easyui.css is in front and icon.css is in the back. Otherwise, the style in easyui.css will overwrite the icon.css point and the default icon will still be displayed.
Below I will introduce jQuery EasyUI treegrid to add, delete, modify and check code
<script type="text/javascript">function formatProgress(value){if (value){var s = '<div>' +'<div>' + value + '%' + '</div>''</div>';return s;} else {return '';}}var editId;function deleteRow(){if (editingId != undefined){$('#tg').treegrid('select', editingId);return;}var row = $('#tg').treegrid('getSelected');if (row){editingId = row.id$('#tg').treegrid('remove', editingId);$('#tg').treegrid('reloadFooter');}$(".actionbtn").toggleClass("l-btn-disabled");}function edit(){if (editingId != undefined){$('#tg').treegrid('select', editingId);return;}var row = $('#tg').treegrid('getSelected');if (row){editingId = row.id$('#tg').treegrid('beginEdit', editingId);}$(".actionbtn").toggleClass("l-btn-disabled");}function insert(){if (editingId != undefined){$('#tg').treegrid('select', editingId);return;}/**/var rows = $('#tg').treegrid('getChildren');editingId = rows.length+1;var row = null;var _data = {"id":editingId,"name":"new name","persons":0,"begin":"3/19/2010","end":"3/20/2010","progress":10};var _parentId = 0;var row = $('#tg').treegrid('getSelected');if (row){$('#tg').treegrid('expand',row.id);_parentId = row.id;}else{var root = $('#tg').treegrid('getRoot');_parentId = null;}$('#tg').treegrid('append',{parent: _parentId, // Here you can specify the parent identifier data: [_data]});$('#tg').treegrid('beginEdit',_data.id);$(".actionbtn").toggleClass("l-btn-disabled");}function save(){if (editingId != undefined){var t = $('#tg');t.treegrid('endEdit', editingId);editingId = undefined;var persons = 0;var rows = t.treegrid('getChildren');for(var i=0; i<rows.length; i++){var p = parseInt(rows[i].persons);if (!isNaN(p)){persons += p;}}var frow = t.treegrid('getFooterRows')[0];frow.persons = persons;t.treegrid('reloadFooter');$(".actionbtn").toggleClass("l-btn-disabled");}}function cancel(){if (editingId != undefined){$('#tg').treegrid('cancelEdit', editingId);editingId = undefined;}$(".actionbtn").toggleClass("l-btn-disabled");}</script><div style="margin:10px 0;"><a href="javascript:void(0)" disabled="disabled" onclick="save()">Save</a><a href="javascript:void(0)" disabled="disabled" onclick="cancel()">Cancel</a></div>