Easyui Treegrid改变默认图标的方法
网络编程 2021-07-04 21:04www.168986.cn编程入门
这篇文章主要介绍了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覆盖点,依旧显示默认图标。
狼蚁网站SEO优化给大家介绍jQuery EasyUI treegrid 增删改查代码
<script type="text/javascript"> function formatProgress(value){ if (value){ var s = '<div style="width:100%;border:1px solid #c">' + '<div style="width:' + value + '%;background:#0000;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="javascriptvoid(0)" disabled="disabled" class="easyui-linkbutton actionbtn" onclick="save()">Save</a> <a href="javascriptvoid(0)" disabled="disabled" class="easyui-linkbutton actionbtn" onclick="cancel()">Cancel</a> </div>
编程语言
- 如何快速学会编程 如何快速学会ug编程
- 免费学编程的app 推荐12个免费学编程的好网站
- 电脑怎么编程:电脑怎么编程网咯游戏菜单图标
- 如何写代码新手教学 如何写代码新手教学手机
- 基础编程入门教程视频 基础编程入门教程视频华
- 编程演示:编程演示浦丰投针过程
- 乐高编程加盟 乐高积木编程加盟
- 跟我学plc编程 plc编程自学入门视频教程
- ug编程成航林总 ug编程实战视频
- 孩子学编程的好处和坏处
- 初学者学编程该从哪里开始 新手学编程从哪里入
- 慢走丝编程 慢走丝编程难学吗
- 国内十强少儿编程机构 中国少儿编程机构十强有
- 成人计算机速成培训班 成人计算机速成培训班办
- 孩子学编程网上课程哪家好 儿童学编程比较好的
- 代码编程教学入门软件 代码编程教程