Easyui Treegrid改变默认图标的方法

前端技术 2023/09/07 JavaScript

普通情况下，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覆盖点，依旧显示默认图标。

下面给大家介绍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>

本文地址：https://www.stayed.cn/item/19267

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案