文档章节

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

GeminiLiu
 GeminiLiu
发布于 2016/06/21 11:10
字数 303
阅读 100
收藏 0

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

 

© 著作权归作者所有

共有 人打赏支持
GeminiLiu
粉丝 3
博文 41
码字总数 12824
作品 0
西城
程序员
easyui1.4.2 formatter处理json内嵌数据undefined

问题描述: easyui升级到1.4.2后,原来使用的获取json嵌套数据的函数“formatter: function (value,row) { return row.business.region }”不好使了,datagrid初始化加载数据的时候,会报错提...

zqz0125
2015/07/03
0
2
easyui的datagrid的某个field的取值是一个数组,如何利用formatter循环设置field和显示

页面显示效果: html页面设置datagrid的field字段: userList是从struts2传到前台的一个集合,该集合是用户的集合,每个用户有一个消耗,field根据userList来设置多个消耗字段 在JS中formatt...

文文1
2016/12/12
564
0
easyui datagrid 日间格化(JS 日期时间本地化显示)

easyui datagrid 日期时间显示不正常,后台java 类型为 DATE 经过JSON工具一转化传到前台来就是这样,不便 于是想格式化一下, 格式化代码 如下: $('#gridTable').datagrid({ title: '系统通...

易水寒丶开源
2015/11/04
0
0
Easy ui 的 datagrid columns的formatter渲染问题

使用Easyui 的datagrid的组件,发现在$(function(){ //初始化datagrid}); 后,对formatter会执行一次渲染,结果是formatter:function(value,rowData,index){}是取不到数据的。等到$(funtion...

云海逍遥生
2015/08/31
1K
1
为datagrid的列加上formatter后为什么表格就无法显示出来了?

我有些datagrid的列需要加formatter,但某些列加上formatter就会导至datagrid整个无法显示,我测试把formatter函数直接返回固定值也不行,这到底是为什么啊?我确定列里的值都是非空的,有些...

耿军
2012/10/14
943
1

没有更多内容

加载失败,请刷新页面

加载更多

【大福利】极客时间专栏返现二维码大汇总

我已经购买了如下专栏,大家通过我的二维码你可以获得一定额度的返现! 然后,再给大家来个福利,只要你通过我的二维码购买,并且关注了【飞鱼说编程】公众号,可以加我微信或者私聊我,我再...

飞鱼说编程
今天
1
0
Spring5对比Spring3.2源码之容器的基本实现

最近看了《Spring源码深度解析》,该书是基于Spring3.2版本的,其中关于第二章容器的基本实现部分,目前spring5的实现方式已有较大改变。 Spring3.2的实现: public void testSimpleLoad(){...

Ilike_Java
今天
1
0
【王阳明心学语录】-001

1.“破山中贼易,破心中贼难。” 2.“夫万事万物之理不外于吾心。” 3.“心即理也。”“心外无理,心外无物,心外无事。” 4.“人心之得其正者即道心;道心之失其正者即人心。” 5.“无...

卯金刀GG
今天
2
0
OSChina 周三乱弹 —— 我们无法成为野兽

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @ _刚刚好: 霸王洗发水这波很骚 手机党少年们想听歌,请使劲儿戳(这里) hahahahahahh @嘻酱:居然忘了喝水。 让你喝可乐的话, 你准忘不了...

小小编辑
今天
9
0
vm GC 日志 配置及查看

-XX:+PrintGCDetails 打印 gc 日志 -XX:+PrintTenuringDistribution 监控晋升分布 -XX:+PrintGCTimeStamps 包含时间戳 -XX:+printGCDateStamps 包含时间 -Xloggc:<filename> 可以将数据保存为......

Canaan_
昨天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部