Easyui Treegrid改变默认图标的方法

普通情况下，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 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>