這篇文章主要介紹了Easyui Treegrid改變默認(rèn)圖標(biāo)的方法的相關(guān)資料,需要的朋友可以參考下

普通情況下，treegrid的圖標(biāo)是默認(rèn)的文件夾與文件的形式，如下圖：

我們可以在json文本中加入iconCls來(lái)改變默認(rèn)圖標(biāo)，例如樣例中：

{"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以及將要用到的圖標(biāo)放在指定的文件夾。

通常情況下，講過(guò)這樣的修改，treegrid就可以顯示出你自己設(shè)計(jì)的圖標(biāo)了。

如果此時(shí)還不能顯示出你設(shè)定的圖標(biāo)，可以查看一下頁(yè)面中引入icon.css以及easyui.css的順序，要保證easyui.css在前，icon.css在后。否則，easyui.css中的樣式就會(huì)將icon.css覆蓋點(diǎn)，依舊顯示默認(rèn)圖標(biāo)。

下面給大家介紹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, // 這里指定父級(jí)標(biāo)識(shí)就可以了

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>