普通情况下,treegrid的图标是默认的文件夹与文件的形式,如下图:
我们可以在json文本中加入iconCls来改变默认图标,例如样例中:
然后修改icon.css以及将要用到的图标放在指定的文件夹。
通常情况下,讲过这样的修改,treegrid就可以显示出你自己设计的图标了。
如果此时还不能显示出你设定的图标,可以查看一下页面中引入icon.css以及easyui.css的顺序,要保证easyui.css在前,icon.css在后。否则,easyui.css中的样式就会将icon.css覆盖点,依旧显示默认图标。
下面给大家介绍jQuery EasyUI treegrid 增删改查代码
'
'
';
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,"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