일반적으로 TreeGrid 아이콘은 아래 그림과 같이 기본 폴더 및 파일 양식입니다.
예를 들어 기본 아이콘을 변경하기 위해 JSON 텍스트에 ICONCLS를 추가 할 수 있습니다.
{ "Total": 7, "행": [{ "id": 1, "name": "모두 작업 ","시작 ":"3/4/2010 ","END ":"3/20/2010 ","Progress ": 60,"ICONCLS ":"ICON-OK "}, {"ID ": 2,"NAME ":"DESIGNING ","시작 ":"3/4/2010 ","end ":"3/10/2010 ","Progress ": 100,"_ Parentid ":"State ":"Closed "}, {"id ": 21,"name ":"da Tabase ","Persons ":"2, "시작": "3/4/2010", "End": "3/6/2010", "Progress": 100, "_ Parentid": 2}, { "id": 22, "name": "u ML ","사람 ": 1,"시작 ":"3/7/2010 ","End ":"3/8/2010 ","Progress ": 100,"_ Parentid ": 2}, {"id ": 23,"name ":"내보내기 문서 ","사람 ":"시작 ":"3/9/2010 ","End ":"3/10/2010 ","Progress ": 100,"_ Parentid ": 2}, {"id ": 3,"이름 ":"코딩 ":"perns ":"시작 ":"3/11/2010 "," end ":"3/18/2010 ","Progress ": 80}, {"id ": 4,"name ":"테스트 ","사람 ":"시작 ":"3/19/2010 ","END ":"3/20/2010 ","Progress ": 20}],"풋내어 ":"이름 ":"총. " 사람 : ","사람 ": 7,"iconcls ":"icon-sum "}}}그런 다음 ICON.CSS를 수정하고 지정된 폴더에 사용할 아이콘을 배치하십시오.
일반적으로 이러한 수정에 대해 이야기하면 TreeGrid는 직접 디자인 한 아이콘을 표시 할 수 있습니다.
현재 설정된 아이콘을 표시 할 수없는 경우 ICON.CSS 및 EASYUI.CSS가 페이지에 도입 된 순서를 확인할 수 있습니다. EasyUi.css가 앞에 있고 icon.css가 뒷면에 있는지 확인하십시오. 그렇지 않으면 EasyUi.css의 스타일은 icon.css point를 덮어 쓰고 기본 아이콘이 여전히 표시됩니다.
아래에 jQuery EasyUi TreeGrid를 소개하여 코드를 추가, 삭제, 수정 및 확인합니다.
<script type = "text/javaScript"> 함수 형식 프로그램 (value) {if (value) {vale s = '<div>' + '<div>' + value + '%' + '</div>' '</div>'; return s;} else {return ';}}} var editid; function deleterow (if! if! if! 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', retoy); $ ( '#tg'). treeGrid ( 'getSelected'); if (row) {editingId = row.id $ ( '#tg'). treeGrid ( 'beginedit', editingId);} $ ( ". ActionBtn"). toggleclass ( "l-btn-disabled"); undefined) {$ ( '#tg'). TreeGrid ( 'select', editingId); return;}/**/var rows = $ ( '#tg'). treeGrid ( 'getChildren'); editingId = rows.length+1; var row = null; var _data = { "id": editingid, "new" 이름 ","사람 ": 0,"시작 ":"3/19/2010 ","End ":"3/20/2010 ","Progress ": 10}; var _parentid = 0; var row = $ ( '#tg'). treegrid ( 'getSelect'); if (row) {$ ( '#tg') row.id;} else {var root = $ ( '#tg'). TreeGrid ( 'getRoot'); _ parentid = null;} $ ( '#tg'). TreeGrid ( '부록', {부모 : _ParentID, // 여기 부모 식별자 데이터를 지정할 수 있습니다. [_data]}); $ ( '#tg'). TreeGrid ( 'beginedit', _ data.id); $ ( ". ActionBtn"). toggleclass ( "l-btn-disableditabled");} 함수 save () {if (editingid! = undefined) {var t = $ ( '#tg'); t.treegrid ( '#tg'); = 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 = person; t.treegrid ( 'Reloadfooter'); $ ( ". ActionBtn"). ToggleClass ( "l-btn-disabled");}} 함수 cancel () {if (editiedid! = undefined) { '#tg'). editingId); editingId = undefined;} $ ( ". ActionBtn"). ToggleClass ( "l-btn-disabled");} </script> <div style = "margin : 10px 0;"> <a href = "javaScript : void (0)"disabled = "inclick ="save </a> <<<a href = "javaScript : void (0)"disabled = "disabled"onclick = "cance ()"> 취소 </a> </div>