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"
onclick='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>
相关推荐
easyui datagrid 嵌套datagrid form 简单提交 ，刷新子表数据
在“可编辑 datagrid 完整例子”中，EasyUI 的 datagrid 组件被用作数据展示和编辑的核心。此例子特别强调了对 filebox 的支持，filebox 是 EasyUI 的一个扩展，用于处理文件上传功能。 在标题和描述中提到的“可...
在本篇文章中，我们将深入探讨 EasyUI Datagrid 的主要配置选项及其用途。 1. **columns**：这是 Datagrid 最基本的配置，它是一个数组，包含了表格的所有列信息，如字段名（field）、标题（title）和宽度（width）...
标题 "jquery easyui 表头固定 datagrid 弹出框 AJAX刷新页面" 涉及的是在网页开发中使用jQuery EasyUI库实现的功能。jQuery EasyUI是一个基于jQuery的UI框架，它提供了一系列易于使用的组件，如datagrid（数据网格...
在使用EasyUI框架开发Web应用时，Datagrid组件是一个非常重要的元素，它提供了一种方便的方式来展示和操作数据。在标题“easyui datagrid在编辑状态下更新列的值”中，我们关注的是如何在Datagrid的编辑模式下动态地...
在IT领域，EasyUI Datagrid是一款基于jQuery的前端数据展示组件，它提供了丰富的表格功能，如数据分页、排序、筛选等。当我们需要将Datagrid中的数据进行打印时，可能会遇到一些挑战，因为通常默认的浏览器打印功能...
在jQuery EasyUI中，DataGrid是一种常用的表格展示控件，它可以与各种编辑器结合使用，如combobox（下拉框）来实现更丰富的交互功能。本文主要探讨的是如何利用jQuery EasyUI的DataGrid和combobox组件实现多级联动的...
EasyUI 是一个基于 jQuery 的前端框架，主要用于构建用户界面，特别是对于企业级应用而言，它提供了丰富的组件，如对话框、表单、菜单、树形控件（Tree）和数据网格（DataGrid）等。在本项目中，"EasyUI tree 及 ...
支持datagrid扩展，在一条记录下面可以嵌套一个子datagrid，切记要在页面中引入该js
easyui的datagrid的数据渲染
"easyui-datagrid 之间拖拽效果 demo" 重点展示了如何在两个 EasyUI Datagrid 之间实现数据的拖放功能，这对于提升用户体验，尤其是处理大量数据时的交互性至关重要。 首先，Datagrid 是 EasyUI 提供的一种表格控件...
标题中的“easyui datagrid 右冻结”是指在使用EasyUI框架开发Web应用程序时，针对datagrid组件实现右侧列固定的功能。EasyUI是一个基于jQuery的UI库，提供了丰富的组件，包括datagrid，它是一个用于展示表格数据的...
http://blog.csdn.net/tianxiawudi0720/article/details/47401399
easyui datagrid editor回车切换单元格示例，适合熟悉easyui但又不懂如何做的人员，可能参考一下源码JS。
JS EasyUI DataGrid是一款基于jQuery和EasyUI框架的数据表格组件，它提供了丰富的功能，如数据分页、排序、过滤和自定义操作等。在实际应用中，动态加载数据是DataGrid的一个重要特性，允许用户在需要时加载更多的...
这个“jquery easyui datagrid demo”包含了一些关于如何使用 jQuery EasyUI 中 Datagrid 组件的示例和相关文档，帮助我们理解和应用 Datagrid。 首先，`datagrid.doc` 文件很可能是 Datagrid 的简要说明文档，它...
在描述中提到的"easyui的datagrid生成合并行,合计计算价格"，指的是如何使用EasyUI的DataGrid组件来实现表格数据的行合并以及总价的计算功能。以下是对这个知识点的详细解释： 1. EasyUI DataGrid组件： EasyUI的...
EasyUI 是一个基于 jQuery 的 UI 框架，它提供了丰富的组件，包括表格（DataGrid）等，使得 Web 应用程序的界面开发更加便捷。在这个"EasyUI DataGrid 过滤用法实例"中，我们将深入探讨如何利用 EasyUI 的 DataGrid ...
UI设计在一个系统中的重要性是不容忽视的，我们开发人员要做到：让用户去控制...给你的Easyui-DataGrid 表头添加一点料吧 Easyui-Datagrid—表头灵活显示http://blog.csdn.net/u010293698/article/details/47956865
标题 "EasyUI可扩展Editable DataGrid（可编辑数据表格）" 涉及的是一个流行的JavaScript框架——EasyUI中的一个特性。EasyUI是基于jQuery的一个轻量级且易于使用的前端框架，它提供了一系列预定义的CSS样式和...