datagrid中 formatter 的formatter样式不生效解决方案

2019独角兽企业重金招聘Python工程师标准>>>

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>
<%}%>

 

转载于:https://my.oschina.net/GeminiLiu/blog/698331