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 相关文章推荐
一些常用的JS功能函数代码
Jun 23 Javascript
ext 代码生成器
Aug 07 Javascript
IE 上下滚动展示模仿Marquee机制
Dec 20 Javascript
鼠标划过实现延迟加载并隐藏层的js代码
Oct 11 Javascript
JavaScript中读取和保存文件实例
May 08 Javascript
jQuery实现ToolTip元素定位显示功能示例
Nov 23 Javascript
MUI顶部选项卡的用法(tab-top-webview-main)详解
Oct 08 Javascript
Vue源码探究之状态初始化
Nov 14 Javascript
vue配置接口域名方法总结
May 12 Javascript
CKeditor富文本编辑器使用技巧之添加自定义插件的方法
Jun 14 Javascript
node.js制作一个简单的登录拦截器
Feb 10 Javascript
JS猜数字游戏实例讲解
Jun 30 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中的闭包(匿名函数)浅析
2015/02/07 PHP
日常整理PHP中简单的图形处理(经典)
2015/10/26 PHP
php简单实现多语言切换的方法
2016/05/09 PHP
javascript获取当前日期时间及其它操作函数
2011/01/11 Javascript
JQuery切换显示的效果实例代码
2013/02/27 Javascript
JS正则验证邮箱的格式详细介绍
2013/11/19 Javascript
DOM基础教程之使用DOM设置文本框
2015/01/20 Javascript
javascript表单验证大全
2015/08/12 Javascript
使用nodejs中httpProxy代理时候出现404异常的解决方法
2016/08/15 NodeJs
JS简单实现浮动窗口效果示例
2016/09/07 Javascript
移动端js触摸事件详解
2016/09/18 Javascript
JS实现隔行换色的表格排序
2017/03/27 Javascript
Bootstrap table使用方法汇总
2017/11/17 Javascript
js实现微信/QQ直接跳转到支付宝APP打开口令领红包功能
2018/01/09 Javascript
vue+element-ui集成随机验证码+用户名+密码的form表单验证功能
2018/08/05 Javascript
Vue组件之单向数据流的解决方法
2018/11/10 Javascript
eslint 的三大通用规则详解
2019/05/16 Javascript
python 自动重连wifi windows的方法
2018/12/18 Python
Python使用QQ邮箱发送邮件报错smtplib.SMTPAuthenticationError
2019/12/20 Python
python-xpath获取html文档的部分内容
2020/03/06 Python
什么是python的函数体
2020/06/19 Python
Python进行特征提取的示例代码
2020/10/15 Python
解决TensorFlow训练模型及保存数量限制的问题
2021/03/03 Python
一款纯css3实现的响应式导航
2014/10/31 HTML / CSS
天美时手表加拿大官网:Timex加拿大
2016/09/01 全球购物
Mankind美国/加拿大:英国领先的男士美容护发用品公司
2018/12/05 全球购物
Harman Audio官方商店:购买JBL、Harman Kardon、Infinity和AKG
2019/12/05 全球购物
生态学毕业生自荐信
2013/10/27 职场文书
餐饮加盟计划书
2014/01/10 职场文书
经理助理岗位职责
2014/03/05 职场文书
2014年3.15团委活动总结
2014/03/16 职场文书
2014年银行个人工作总结
2014/12/05 职场文书
幼儿园教师师德表现自我评价
2015/03/05 职场文书
房租涨价通知
2015/04/23 职场文书
医院岗前培训心得体会
2016/01/08 职场文书
导游词之无锡梅园
2019/11/28 职场文书