일반적으로 트리그리드 아이콘은 아래와 같이 기본 폴더와 파일 형태로 되어 있습니다.
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 트리그리드 추가, 삭제, 수정 및 코드 확인 방법을 소개해드리겠습니다
<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>