我们可以在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 style="width:100%;border:1px solid #ccc">' + '<div style="width:' + value + '%;background:#cc0000;color:#fff">' + 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" class="easyui-linkbutton actionbtn" onclick="save()">save</a> <a href="javascript：void(0)" disabled="disabled" class="easyui-linkbutton actionbtn" onclick="cancel()">cancel</a> </div>
更多easyui treegrid改变默认图标的方法。