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 트리 그리드 추가, 삭제, 수정 및 코드 확인을 소개합니다

<script type="text/javascript">
function formatProgress(value){
if (value){
var s = &#39;<div style="width:100%;border:1px solid #ccc">&#39; +
&#39;<div style="width:&#39; + value + &#39;%;background:#cc0000;color:#fff">&#39; + value + &#39;%&#39; + &#39;</div>&#39;
&#39;</div>&#39;;
return s;
} else {
return &#39;&#39;;
}
}
var editingId;
function deleteRow(){
if (editingId != undefined){
$(&#39;#tg&#39;).treegrid(&#39;select&#39;, editingId);
return;
}
var row = $(&#39;#tg&#39;).treegrid(&#39;getSelected&#39;);
if (row){
editingId = row.id
$(&#39;#tg&#39;).treegrid(&#39;remove&#39;, editingId);
$(&#39;#tg&#39;).treegrid(&#39;reloadFooter&#39;);
}
$(".actionbtn").toggleClass("l-btn-disabled");
}
function edit(){
if (editingId != undefined){
$(&#39;#tg&#39;).treegrid(&#39;select&#39;, editingId);
return;
}
var row = $(&#39;#tg&#39;).treegrid(&#39;getSelected&#39;);
if (row){
editingId = row.id
$(&#39;#tg&#39;).treegrid(&#39;beginEdit&#39;, editingId);
}
$(".actionbtn").toggleClass("l-btn-disabled");
}
function insert(){
if (editingId != undefined){
$(&#39;#tg&#39;).treegrid(&#39;select&#39;, editingId);
return;
}
/**/
var rows = $(&#39;#tg&#39;).treegrid(&#39;getChildren&#39;);
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 = $(&#39;#tg&#39;).treegrid(&#39;getSelected&#39;);
if (row){
$(&#39;#tg&#39;).treegrid(&#39;expand&#39;,row.id);
_parentId = row.id;
}else{
var root = $(&#39;#tg&#39;).treegrid(&#39;getRoot&#39;);
_parentId = null;
}
$(&#39;#tg&#39;).treegrid(&#39;append&#39;,{
parent: _parentId, // 这里指定父级标识就可以了
data: [_data]
});
$(&#39;#tg&#39;).treegrid(&#39;beginEdit&#39;,_data.id);
$(".actionbtn").toggleClass("l-btn-disabled");
}
function save(){
if (editingId != undefined){
var t = $(&#39;#tg&#39;);
t.treegrid(&#39;endEdit&#39;, editingId);
editingId = undefined;
var persons = 0;
var rows = t.treegrid(&#39;getChildren&#39;);
for(var i=0; i<rows.length; i++){
var p = parseInt(rows[i].persons);
if (!isNaN(p)){
persons += p;
}
}
var frow = t.treegrid(&#39;getFooterRows&#39;)[0];
frow.persons = persons;
t.treegrid(&#39;reloadFooter&#39;);
$(".actionbtn").toggleClass("l-btn-disabled");
}
}
function cancel(){
if (editingId != undefined){
$(&#39;#tg&#39;).treegrid(&#39;cancelEdit&#39;, 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의 기본 아이콘, PHP 중국어 넷에 주목하세요!