普通情況下，treegrid的圖標是默認的文件夾與文件的形式，如下圖：
我們可以在json文本中加入iconCls來改變默認圖標，例如樣例中：
{"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":"Database","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"}]}然後修改icon.css以及將要用到的圖標放在指定的文件夾。
通常情況下，講過這樣的修改，treegrid就可以顯示出你自己設計的圖標了。
如果此時還不能顯示出你設定的圖標，可以查看一下頁面中引入icon.css以及easyui.css的順序，要保證easyui.css在前，icon.css在後。否則，easyui.css中的樣式就會將icon.css覆蓋點，依舊顯示默認圖標。
下面給大家介紹jQuery EasyUI treegrid 增刪改查代碼
<script type="text/javascript">function formatProgress(value){if (value){var s = '<div>' +'<div>' + value + '%' + '</div>''</div>';return s;} else {return '';}}var editingId;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, // 這裡指定父級標識就可以了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>