So ändern Sie das Standardsymbol in Easyui Treegrid

Normalerweise liegen Baumrastersymbole in Form von Standardordnern und -dateien vor, wie unten gezeigt:

Wir können iconCls zum JSON-Text hinzufügen, um das Standardsymbol zu ändern. zum Beispiel im Beispiel:

{"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"}
]}

Dann modifizieren Sie icon.css und platzieren Sie die zu verwendenden Symbole im angegebenen Ordner.

Normalerweise kann Treegrid nach der Durchführung solcher Änderungen die von Ihnen entworfenen Symbole anzeigen.

Wenn das von Ihnen festgelegte Symbol derzeit nicht angezeigt werden kann, können Sie die Reihenfolge überprüfen, in der icon.css und easyui.css auf der Seite eingeführt werden easyui.css befindet sich vorne, icon.css befindet sich hinten. Andernfalls überschreibt der Stil in easyui.css icon.css und zeigt weiterhin das Standardsymbol an.

Im Folgenden wird Ihnen der Code zum Hinzufügen, Löschen, Ändern und Überprüfen des jQuery EasyUI-Baumgitters vorgestellt

<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>

Weitere verwandte Artikel zum Ändern Das Standardsymbol von Easyui Treegrid, bitte achten Sie auf PHP Chinese Net!