Maison > php教程 > PHP开发 > Comment changer l'icône par défaut dans Easyui Treegrid

Comment changer l'icône par défaut dans Easyui Treegrid

高洛峰
Libérer: 2016-12-29 13:39:41
original
1768 Les gens l'ont consulté

Normalement, les icônes de la grille arborescente se présentent sous la forme de dossiers et de fichiers par défaut, comme indiqué ci-dessous :

Easyui Treegrid改变默认图标的方法

Nous pouvons ajouter des iconCls au texte json pour modifier l'icône par défaut, par exemple dans l'exemple :

{"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"}
]}
Copier après la connexion

Modifiez ensuite icon.css et placez les icônes à utiliser dans le dossier spécifié.

Normalement, après avoir effectué de telles modifications, treegrid peut afficher les icônes que vous avez conçues.

Easyui Treegrid改变默认图标的方法

Si l'icône que vous avez définie ne peut pas être affichée pour le moment, vous pouvez vérifier l'ordre dans lequel icon.css et easyui.css sont introduits sur la page. easyui.css est devant, icon.css est à l'arrière. Sinon, le style dans easyui.css écrasera icon.css et affichera toujours l'icône par défaut.

Ce qui suit est une introduction à l'ajout, à la suppression, à la modification et à la vérification du code de la grille arborescente 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>
Copier après la connexion


Pour plus d'articles connexes sur la façon de modifier l'icône par défaut d'Easyui Treegrid, veuillez faire attention au réseau chinois PHP !


Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Recommandations populaires
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal