一般に、TreeGridアイコンは、以下の図に示すように、デフォルトのフォルダーとファイルフォームです。
たとえば、デフォルトのアイコンを変更するためにJSONテキストにICONCLSを追加できます。
{"合計"：7、 "rows"：[{"id"：1、 "name"： "allタスク "、" begin "：" 3/4/2010 "、" end "：" 3/20/2010 "、" progress "：60、" iconcls "：" icon-ok "}、{" id "：2、" name "："デザイン"、" begin "：" 3/4/2010 "、" end "：" 3/10/2010 "、" progress "：100、" _ dareid "：1、" state "：" closed "}、{" id "：21、" name "：" da Tabase "、" persons "：2、" begin "：" 3/4/2010 "、" end "：" 3/6/2010 "、" progress "：100、" _ dareid "：2}、{" id "：22、" name "：" u ml "、" persons "：1、" begin "：" 3/7/2010 "、" end "：" 3/8/2010 "、" progress "：100、" _ dareid "：2}、{" id "：23、" name "：" export document "、" persons "：1、" begin "：" 3/9/2010 "、" end "：" 3/10/2010 "、" progress "：100、" _ dareid "：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}]、" Foter "：人： "、"人 "：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>' + '％' + '</div>' '</div>';} els {return '';}} var editid; function eleterow（）{if（編集！ undefined）{$（ '＃tg'）。treegrid（ 'select'、editingid）; return;} var row = $（ '＃tg'）。treegrid（ 'getSelected'）; if（row）{editingid = row.id $（ '＃tg'）。 editingid）; $（ '＃tg'）。treegrid（ 'reloadfooter'）;} $（ "。actionbtn"）。gleclass（ "l-btn-disabled"）;} function edit（）{if（editingid！= undefined）{$（ '＃tg'） $（ '＃tg'）。treegrid（ 'getSelected'）; if（row）{editingid = row.id $（ '＃tg'）。treegrid（ 'beginedit'、editingid）;} $（ "。actionbtn"）。toggleclass（ "l-btn-disabled"）;} custition insert（）{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'） row.id;} else {var root = $（ '＃tg'）。treegrid（ 'getroot'）; _ dareid = null;} $（ '＃tg'）。treegrid（ 'append'、{parent：_parentid、//ここで親識別子データを指定できます。 [_data]}）; $（ '＃tg'）。treegrid（ 'beginedit'、_ data.id）; $（ "。actionbtn"）。gleclass（ "l-btn-disabled"）;} function save（）{if（editingid！= undefined）{var t = $（ '＃tg） =未定義; var persons = 0; var rows = t.treegrid（ 'getChildren'）; T.treegrid（ 'getFooterrows'）[0]; flow.persons = persons; t.treegrid（ 'reloadfooter'）; $（ "。actionbtn"）。 editingid）; editingid = undefined;} $（ "。actionbtn"）。gleclass（ "l-btn-disabled"）;} </script> <div style = "margin：10px 0;"> <a href = "javascript：void（0）" disabled = "disabled" onclick = " href = "javascript：void（0）" disabled = "disabled" onclick = "cancel（）"> cancel </a> </div>