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回调函数
Dec 28 Javascript
JavaScript判断变量是否为空的自定义函数分享
Jan 31 Javascript
超级给力的JavaScript的React框架入门教程
Jul 02 Javascript
Jquery ajax加载等待执行结束再继续执行下面代码操作
Nov 24 Javascript
实例剖析AngularJS框架中数据的双向绑定运用
Mar 04 Javascript
JS奇技之利用scroll来监听resize详解
Jun 15 Javascript
微信小程序中时间戳和日期的相互转换问题
Jul 09 Javascript
vue实现类似淘宝商品评价页面星级评价及上传多张图片功能
Oct 29 Javascript
说说Vuex的getters属性的具体用法
Apr 15 Javascript
详解JavaScript 事件流
Sep 02 Javascript
使用Mock.js生成前端测试数据
Dec 13 Javascript
浅谈Vue开发人员的7个最好的VSCode扩展
Jan 20 Vue.js
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图像处理之imagecreate、imagedestroy函数介绍
2014/11/19 PHP
推荐几个开源的微信开发项目
2014/12/28 PHP
php集成套件服务器xampp安装使用教程(适合第一次玩PHP的新手)
2015/06/03 PHP
PHP扩展迁移为PHP7扩展兼容性问题记录
2016/02/15 PHP
理解Javascript闭包
2013/11/01 Javascript
nodejs文件操作模块FS(File System)常用函数简明总结
2014/06/05 NodeJs
js实现仿阿里巴巴城市选择框效果实例
2015/06/24 Javascript
javascript 继承学习心得总结
2016/03/17 Javascript
jquery自动补齐功能插件flexselect用法示例
2016/08/06 Javascript
详解vue-cli本地环境API代理设置和解决跨域
2017/09/05 Javascript
CheckBox多选取值及判断CheckBox选中是否为空的实例
2017/10/31 Javascript
浅谈Node.js 子进程与应用场景
2018/01/24 Javascript
vue中使用sessionStorage记住密码功能
2018/07/24 Javascript
js实现3D旋转相册
2020/08/02 Javascript
python字典多条件排序方法实例
2014/06/30 Python
Python中关键字is与==的区别简述
2014/07/31 Python
Python的函数的一些高阶特性
2015/04/27 Python
python3.5 + PyQt5 +Eric6 实现的一个计算器代码
2017/03/11 Python
一个基于flask的web应用诞生 记录用户账户登录状态(6)
2017/04/11 Python
浅谈Python实现2种文件复制的方法
2018/01/19 Python
用xpath获取指定标签下的所有text的实例
2019/01/02 Python
Python函数基础实例详解【函数嵌套,命名空间,函数对象,闭包函数等】
2019/03/30 Python
python调试神器PySnooper的使用
2019/07/03 Python
python下的opencv画矩形和文字注释的实现方法
2019/07/09 Python
tensorflow多维张量计算实例
2020/02/11 Python
Django调用支付宝接口代码实例详解
2020/04/04 Python
美国在线家装零售商:Build.com
2016/09/02 全球购物
北美女性服装零售连锁店:maurices
2019/06/12 全球购物
荷兰网上药店:Drogisterij.net
2019/09/03 全球购物
经典c++面试题五
2014/12/17 面试题
明星员工获奖感言
2014/08/14 职场文书
公司副总经理岗位职责
2015/04/08 职场文书
祝福语集锦:朋友新店开业祝福语
2019/12/10 职场文书
MySQL 慢查询日志深入理解
2021/04/22 MySQL
Pandas自定义选项option设置
2021/07/25 Python
MySQL创建管理LIST分区
2022/04/13 MySQL