easyUI 定时刷新 DataGrid-CSDN博客

本文链接：https://blog.csdn.net/xinjiatao/article/details/84712470

httpMon.js

$(function(){
	getServiceState();
	run(); 
});

var interval;
function run(){ 
	interval = setInterval(ajaxGetSerState,"3000"); //3秒钟刷一下
} 

function ajaxGetSerState() {
	$.ajax({
		type: 'POST',
		url: $.test.contextPath + '/MonAction.do?method=getState',
		dataType: 'json',
		success: function(data) {
			if ($.isNotEmpty(data) && $.isNotEmpty(data.error)) {
				return;
			}
			  $("#datagrid").datagrid("loadData",data);
		},
		error: function(XMLHttpRequest, textStatus, errorThrown) {
		}
	});
}

/**
 * 初始化
 */
function getServiceState() {
	$('#datagrid').datagrid({
		url: $.test.contextPath + '/MonAction.do?method=getState',
		striped: true,
		collapsible: true,
		remoteSort: false,
		fit: true,
		fitColumns: true,
		singleSelect: true,
		pageNumber: 1,
		nowrap:false,
		pageSize: 10,
		pagination: false,
		columns : [ [  {
			field : 'serviceName',
			title : '名称',
			width : 70,
			align:'left',
			formatter : function(value, row, index) {
				return row.serviceName;
			}
		}, {
			field : 'serviceState',
			title : '状态',
			width : 270,
			align:'left',
			editor: {
                type: 'validatebox',
                	options: { required: true } 
            },
			formatter : function(value, row, index) {
				if(row.serviceState == 200){
					return row.serviceState;
				}else{
					return  "<div style=\"width: 908px;margin:0 auto;border:red 0px solid;display:block;word-break: break-all;word-wrap: break-word;color:red \">"+row.serviceState+"</div>";
				}
			}
		}
		] ],
		rownumbers: true,
		onLoadSuccess: function(data){
		}
	});
}

jsp:

<body>
	<div id="toolbar" style="padding: 1px; height: auto;">
		<!-- 查询 -->
		<div>
			<form id="queryForm" method="post" novalidate>
				<table
					style="margin-top: 2px; border: none; border-collapse: collapse; border-spacing: 50px;">
					<tr>
						<td><a href="javascript:void(0)"
							class="button button-rounded button-flat-primary"
							οnclick='getServiceState();'> <i
								class="icon-ccw icon-padding-right5"></i>手动刷新 </a>
						</td>
					</tr>
				</table>
			</form>
		</div>
	</div>
	<table id="datagrid" class="easyui-datagrid"  style="width: 100%; height: 100%"
		data-options="width:800,height:500,idField:'keyid',
                      iconCls:'icon-tip',striped: true,fitColumns:true,singleSelect:true,
                      maximized:true,remoteSort: false,rownumbers:true"></table>
	<script type="text/javascript"
		src="<%=request.getContextPath()%>/pages/monitor/httpMon.js"></script>
</body>