So ändern Sie das Standardsymbol in Easyui Treegrid_jquery

Normalerweise haben Baumrastersymbole die Form von Standardordnern und -dateien, 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"}
]}

Ändern Sie dann 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 zu diesem Zeitpunkt nicht angezeigt werden kann, können Sie die Reihenfolge überprüfen, in der icon.css und easyui.css auf der Seite eingeführt werden. Stellen Sie sicher, dass easyui.css an erster Stelle und icon.css an letzter Stelle steht. Andernfalls überschreibt der Stil in easyui.css icon.css und zeigt weiterhin das Standardsymbol an.

Lassen Sie mich Ihnen den Code zum Hinzufügen, Löschen, Ändern und Überprüfen des jQuery EasyUI-Baumgitters vorstellen

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