datagrid中formatter是在页面渲染后才执行,因此直接在formatter里使用datagrid自己的linkbutton样式无法生效
解决方案
在onLoadSuccess方法里使用js修改datagrid控件,另附图标自动闪动方法
<%layout("/eova/layout/default.html",{'title' : '系统监控'}){%>
<script>
var shinflag = false;//闪动标识
function shining(){
if(shinflag){
$(".conn-error").linkbutton({plain:true, iconCls:'icon-bulletcross'});
shinflag = false;
}else{
$(".conn-error").linkbutton({plain:true, iconCls:'icon-readmetxt' });
shinflag = true;
}
}
function freshTable(){
var url = $('#conn').datagrid('options').url;
if (url.indexOf("_t=") > 0) {
url = url.replace(/_t=\d+/, "_t=" + new Date().getTime());
} else {
url = url.indexOf("?") > 0
? url + "&_t=" + new Date().getTime()
: url + "?_t=" + new Date().getTime();
}
$('#conn').datagrid('reload');
}
$(function(){
$('#conn').datagrid({
url:'/system/connLoad',
singleSelect: true,
columns:[[
{field:'connstatus',title:'状态',width:30,
formatter: function(value, row, index){
if (value == "success") {
return "<a href='javascript:void(0);' class='conn-success' visibility='hidden'/>";
}else if(value == "error"){
return "<a href='javascript:void(0);' class='conn-error'/>";
}else{
return "<a href='javascript:void(0);' class='conn-ready'/>";
}
}},
{field:'name',title:'系统名称',width:70},
{field:'url',title:'监听地址',width:220},
{field:'destribute',title:'系统描述',width:110}
]],
toolbar: [{
text: '手动刷新',
iconCls: 'icon-arrowrefresh',
handler: function () { freshTable(); }
}],
onLoadSuccess:function(data){
$(".conn-success").linkbutton({plain:true, iconCls:'icon-accept' });
$(".conn-error").linkbutton({plain:true, iconCls:'icon-bulletcross' });
$(".conn-ready").linkbutton({plain:true, iconCls:'icon-hourglass' });
}
});
setInterval("freshTable();",60*1000);//设置60秒自动刷新
setInterval("shining();",200);
})
</script>
<table id="conn" width="auto" height="auto" class="easyui-datagrid" ></table>
<%}%>