Easyui Treegrid改变默认图标的方法


Posted in Javascript onApril 29, 2016

普通情况下,treegrid的图标是默认的文件夹与文件的形式,如下图:

Easyui 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就可以显示出你自己设计的图标了。

Easyui Treegrid改变默认图标的方法

​如果此时还不能显示出你设定的图标,可以查看一下页面中引入icon.css以及easyui.css的顺序,要保证easyui.css在前,icon.css在后。否则,easyui.css中的样式就会将icon.css覆盖点,依旧显示默认图标。

下面给大家介绍jQuery EasyUI treegrid 增删改查代码

<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>
Javascript 相关文章推荐
javascript smipleChart 简单图标类
Jan 12 Javascript
利用ajaxfileupload插件实现文件上传无刷新的具体方法
Jun 08 Javascript
PhantomJS快速入门教程(服务器端的 JavaScript API 的 WebKit)
Aug 06 Javascript
跟我学习javascript的Date对象
Nov 19 Javascript
你不知道的 javascript【推荐】
Jan 08 Javascript
Bootstrap常用组件学习(整理)
Mar 24 Javascript
javascript  删除select中的所有option的实例
Sep 17 Javascript
小程序封装wx.request请求并创建接口管理文件的实现
Apr 29 Javascript
微信小程序开发注意指南和优化实践(小结)
Jun 21 Javascript
微信小程序webview与h5通过postMessage实现实时通讯的实现
Aug 20 Javascript
Vue.js组件props数据验证实现详解
Oct 19 Javascript
react使用CSS实现react动画功能示例
May 18 Javascript
Jquery EasyUI实现treegrid上显示checkbox并取选定值的方法
Apr 29 #Javascript
JS组件Bootstrap导航条使用方法详解
Apr 29 #Javascript
Treegrid的动态加载实例代码
Apr 29 #Javascript
Easyui 之 Treegrid 笔记
Apr 29 #Javascript
浅析BootStrap模态框的使用(经典)
Apr 29 #Javascript
jQuery模仿阿里云购买服务器选择购买时间长度的代码
Apr 29 #Javascript
JavaScript函数柯里化详解
Apr 29 #Javascript
You might like
简单的php中文转拼音的实现代码
2014/02/11 PHP
php之可变变量的实例详解
2017/09/12 PHP
PHP 出现 http500 错误的解决方法
2021/03/09 PHP
JavaScript类和继承 constructor属性
2010/03/04 Javascript
JavaScript中函数声明优先于变量声明的实例分析
2012/03/01 Javascript
让html页面不缓存js的实现方法
2014/10/31 Javascript
jQuery使用CSS()方法给指定元素同时设置多个样式
2015/03/26 Javascript
JS实现的通用表单验证插件完整实例
2015/08/20 Javascript
Bootstrap模块dropdown实现下拉框响应
2016/05/22 Javascript
Bootstrap编写一个在当前网页弹出可关闭的对话框 非弹窗
2016/06/30 Javascript
浅谈Javascript事件对象
2017/02/05 Javascript
基于Node.js模板引擎教程-jade速学与实战1
2017/09/17 Javascript
JS中Object对象的原型概念基础
2018/01/29 Javascript
vue 路由页面之间实现用手指进行滑动的方法
2018/02/23 Javascript
vuejs实现ready函数加载完之后执行某个函数的方法
2018/08/31 Javascript
详解vue-cli3开发Chrome插件实践
2019/05/29 Javascript
koa2 从入门到精通(小结)
2019/07/23 Javascript
json 带斜杠时如何解析的实现
2019/08/12 Javascript
用实例详解Python中的Django框架中prefetch_related()函数对数据库查询的优化
2015/04/01 Python
Python ftp上传文件
2016/02/13 Python
轻松实现python搭建微信公众平台
2016/02/16 Python
代码讲解Python对Windows服务进行监控
2018/02/11 Python
Python当中的array数组对象实例详解
2019/06/12 Python
python的sorted用法详解
2019/06/25 Python
python使用Thread的setDaemon启动后台线程教程
2020/04/25 Python
Python操作Excel把数据分给sheet
2020/05/20 Python
浅析NumPy 切片和索引
2020/09/02 Python
机关门卫制度
2014/02/01 职场文书
新文化运动的基本口号
2014/06/21 职场文书
协商一致解除劳动合同协议书
2014/09/14 职场文书
领导走群众路线整改措施思想汇报
2014/10/12 职场文书
2014年综合治理工作总结
2014/11/20 职场文书
2014年机关党委工作总结
2014/12/11 职场文书
金秋助学感谢信
2015/01/21 职场文书
工作年限证明模板
2015/06/15 职场文书
首次购房证明
2015/06/19 职场文书